From 8449d53c387e2e34bf30fc2350771164b8dbe1fe Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 28 Jul 2026 09:37:32 +0200
Subject: [PATCH 01/87] Fix alert

---
 Customization/xsl/topic.xsl      |   4 +-
 css/common-bootstrap.css         |   6 +-
 includes/bootstrap.hdf.xml       |  29 ++++++---
 includes/ftr.sidebar.example.xml |   4 +-
 sample/alerts.dita               | 104 +++++++++++++++----------------
 sample/document.ditamap          |  12 ++--
 xsl/utility-classes.xsl          |  45 ++++++-------
 7 files changed, 105 insertions(+), 99 deletions(-)

diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl
index 4a7a2c57..961add5b 100644
--- a/Customization/xsl/topic.xsl
+++ b/Customization/xsl/topic.xsl
@@ -296,9 +296,7 @@
     </xsl:param>
     <!-- ↓ Add Bootstrap class attributes template ↓ -->
     <xsl:variable name="bootstrap-class">
-      <xsl:if test="not(contains(@outputclass, 'alert-'))">
-        <xsl:call-template name="bootstrap-note"/>
-      </xsl:if>
+      <xsl:call-template name="bootstrap-note"/>
     </xsl:variable>
     <div role="alert">
       <xsl:call-template name="commonattributes">
diff --git a/css/common-bootstrap.css b/css/common-bootstrap.css
index 6e29dafd..a8e95852 100644
--- a/css/common-bootstrap.css
+++ b/css/common-bootstrap.css
@@ -44,7 +44,7 @@
   }
 
   [data-bs-theme='light'] {
-    --dita-violet: var(--bs-purple);
+    --dita-violet: var(--bs-purple-400);
   }
 }
 
@@ -127,11 +127,11 @@
 
 .note {
   border-left: 6px solid;
-  border-left-color: var(--bs-alert-color, transparent);
+  border-left-color: var(--bs-alert-border-color, transparent);
 }
 
 [dir='rtl'] .note {
   border-right: 6px solid;
-  border-right-color: var(--bs-alert-color, transparent);
+  border-right-color: var(--bs-alert-border-color, transparent);
   border-left: 0;
 }
diff --git a/includes/bootstrap.hdf.xml b/includes/bootstrap.hdf.xml
index f8fa94d6..e19a37d4 100644
--- a/includes/bootstrap.hdf.xml
+++ b/includes/bootstrap.hdf.xml
@@ -1,13 +1,26 @@
 <div>
-  <link
+  <!--link href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/css/bootstrap.min.css"
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
-    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
-    crossorigin="anonymous"
-  />
-  <script
-    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
-    integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
+    integrity="sha384-Xwd74TLifqm2pdd11/yBekY9q1DgeT2SAZnZ5E/UnBb/rkQ79LUZWSYJ0UP1/XUm"
     crossorigin="anonymous"
   />
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-Z+5YElvegGtTorgF5XlhCRkdTbU6SmOE+vvqYkVzGctueilwTIsac8hLXOvDlX3B" crossorigin="anonymous"
+  /-->
+  <link href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
+  <script type="module">
+//<![CDATA[
+
+/*!
+  * Bootstrap v6.0.0-alpha1 (https://getbootstrap.com/)
+  * Copyright 2011-2026 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+const elementMap=new Map,Data={set(e,t,n){elementMap.has(e)||elementMap.set(e,new Map);const i=elementMap.get(e);i.has(t)||0===i.size?i.set(t,n):console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${[...i.keys()][0]}.`)},get:(e,t)=>elementMap.has(e)&&elementMap.get(e).get(t)||null,getAny:e=>elementMap.has(e)&&elementMap.get(e).values().next().value||null,remove(e,t){if(!elementMap.has(e))return;const n=elementMap.get(e);n.delete(t),0===n.size&&elementMap.delete(e)}},namespaceRegex=/[^.]*(?=\..*)\.|.*/,stripNameRegex=/\..*/,stripUidRegex=/::\d+$/,eventRegistry={};let uidEvent=1;const customEvents={mouseenter:"mouseover",mouseleave:"mouseout"},nativeEvents=new Set(["click","dblclick","mouseup","mousedown","contextmenu","mousewheel","DOMMouseScroll","mouseover","mouseout","mousemove","selectstart","selectend","keydown","keypress","keyup","orientationchange","touchstart","touchmove","touchend","touchcancel","pointerdown","pointermove","pointerup","pointerleave","pointercancel","gesturestart","gesturechange","gestureend","focus","blur","change","reset","select","submit","focusin","focusout","load","unload","beforeunload","resize","move","DOMContentLoaded","readystatechange","error","abort","scroll","scrollend"]);function makeEventUid(e,t){return t&&`${t}::${uidEvent++}`||e.uidEvent||uidEvent++}function getElementEvents(e){const t=makeEventUid(e);return e.uidEvent=t,eventRegistry[t]=eventRegistry[t]||{},eventRegistry[t]}function bootstrapHandler(e,t){return function n(i){return hydrateObj(i,{delegateTarget:e}),n.oneOff&&EventHandler.off(e,i.type,t),t.apply(e,[i])}}function bootstrapDelegationHandler(e,t,n){return function i(s){const o=e.querySelectorAll(t);for(let{target:a}=s;a&&a!==this;a=a.parentNode)for(const l of o)if(l===a)return hydrateObj(s,{delegateTarget:a}),i.oneOff&&EventHandler.off(e,s.type,t,n),n.apply(a,[s])}}function findHandler(e,t,n=null){return Object.values(e).find(e=>e.callable===t&&e.delegationSelector===n)}function normalizeParameters(e,t,n){const i="string"==typeof t,s=i?n:t||n;let o=getTypeEvent(e);return nativeEvents.has(o)||(o=e),[i,s,o]}function addHandler(e,t,n,i,s){if("string"!=typeof t||!e)return;let[o,a,l]=normalizeParameters(t,n,i);if(t in customEvents){const e=e=>function(t){if(!t.relatedTarget||t.relatedTarget!==t.delegateTarget&&!t.delegateTarget.contains(t.relatedTarget))return e.call(this,t)};a=e(a)}const r=getElementEvents(e),c=r[l]||(r[l]={}),d=findHandler(c,a,o?n:null);if(d)return void(d.oneOff=d.oneOff&&s);const u=makeEventUid(a,t.replace(namespaceRegex,"")),h=o?bootstrapDelegationHandler(e,n,a):bootstrapHandler(e,a);h.delegationSelector=o?n:null,h.callable=a,h.oneOff=s,h.uidEvent=u,c[u]=h,e.addEventListener(l,h,o)}function removeHandler(e,t,n,i,s){const o=findHandler(t[n],i,s);o&&(e.removeEventListener(n,o,Boolean(s)),delete t[n][o.uidEvent])}function removeNamespacedHandlers(e,t,n,i){const s=t[n]||{};for(const[o,a]of Object.entries(s))o.includes(i)&&removeHandler(e,t,n,a.callable,a.delegationSelector)}function getTypeEvent(e){return e=e.replace(stripNameRegex,""),customEvents[e]||e}const EventHandler={on(e,t,n,i){addHandler(e,t,n,i,!1)},one(e,t,n,i){addHandler(e,t,n,i,!0)},off(e,t,n,i){if("string"!=typeof t||!e)return;const[s,o,a]=normalizeParameters(t,n,i),l=a!==t,r=getElementEvents(e),c=r[a]||{},d=t.startsWith(".");if(void 0===o){if(d)for(const n of Object.keys(r))removeNamespacedHandlers(e,r,n,t.slice(1));for(const[n,i]of Object.entries(c)){const s=n.replace(stripUidRegex,"");l&&!t.includes(s)||removeHandler(e,r,a,i.callable,i.delegationSelector)}}else{if(!Object.keys(c).length)return;removeHandler(e,r,a,o,s?n:null)}},trigger(e,t,n){if("string"!=typeof t||!e)return null;const i=hydrateObj(new Event(t,{bubbles:!0,cancelable:!0}),n);return e.dispatchEvent(i),i}};function hydrateObj(e,t={}){for(const[n,i]of Object.entries(t))try{e[n]=i}catch{Object.defineProperty(e,n,{configurable:!0,get:()=>i})}return e}function normalizeData(e){if("true"===e)return!0;if("false"===e)return!1;if(e===Number(e).toString())return Number(e);if(""===e||"null"===e)return null;if("string"!=typeof e)return e;try{return JSON.parse(decodeURIComponent(e))}catch{return e}}function normalizeDataKey(e){return e.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}const Manipulator={setDataAttribute(e,t,n){e.setAttribute(`data-bs-${normalizeDataKey(t)}`,n)},removeDataAttribute(e,t){e.removeAttribute(`data-bs-${normalizeDataKey(t)}`)},getDataAttributes(e){if(!e)return{};const t={},n=Object.keys(e.dataset).filter(e=>e.startsWith("bs")&&!e.startsWith("bsConfig"));for(const i of n){let n=i.replace(/^bs/,"");n=n.charAt(0).toLowerCase()+n.slice(1),t[n]=normalizeData(e.dataset[i])}return t},getDataAttribute:(e,t)=>normalizeData(e.getAttribute(`data-bs-${normalizeDataKey(t)}`))},MAX_UID=1e6,MILLISECONDS_MULTIPLIER=1e3,TRANSITION_END="transitionend",parseSelector=e=>(e&&window.CSS&&window.CSS.escape&&(e=e.replace(/#([^\s"#']+)/g,(e,t)=>`#${CSS.escape(t)}`)),e),toType=e=>null==e?`${e}`:Object.prototype.toString.call(e).match(/\s([a-z]+)/i)[1].toLowerCase(),getUID=e=>{do{e+=Math.floor(1e6*Math.random())}while(document.getElementById(e));return e},getTransitionDurationFromElement=e=>{if(!e)return 0;let{transitionDuration:t,transitionDelay:n}=window.getComputedStyle(e);const i=Number.parseFloat(t),s=Number.parseFloat(n);return i||s?(t=t.split(",")[0],n=n.split(",")[0],1e3*(Number.parseFloat(t)+Number.parseFloat(n))):0},triggerTransitionEnd=e=>{e.dispatchEvent(new Event(TRANSITION_END))},isElement$1=e=>!(!e||"object"!=typeof e)&&void 0!==e.nodeType,getElement=e=>isElement$1(e)?e:"string"==typeof e&&e.length>0?document.querySelector(parseSelector(e)):null,isVisible=e=>{if(!isElement$1(e)||0===e.getClientRects().length)return!1;const t="visible"===getComputedStyle(e).getPropertyValue("visibility"),n=e.closest("details:not([open])");if(!n)return t;if(n!==e){const t=e.closest("summary");if(t&&t.parentNode!==n)return!1;if(null===t)return!1}return t},isDisabled=e=>!e||e.nodeType!==Node.ELEMENT_NODE||!!e.classList.contains("disabled")||(void 0!==e.disabled?e.disabled:e.hasAttribute("disabled")&&"false"!==e.getAttribute("disabled")),findShadowRoot=e=>{if(!document.documentElement.attachShadow)return null;if("function"==typeof e.getRootNode){const t=e.getRootNode();return t instanceof ShadowRoot?t:null}return e instanceof ShadowRoot?e:e.parentNode?findShadowRoot(e.parentNode):null},noop=()=>{},reflow=e=>{e.offsetHeight},isRTL$1=()=>"rtl"===document.documentElement.dir,execute=(e,t=[],n=e)=>"function"==typeof e?e.call(...t):n,executeAfterTransition=(e,t,n=!0)=>{if(!n)return void execute(e);const i=getTransitionDurationFromElement(t)+5;let s=!1;const o=({target:n})=>{n===t&&(s=!0,t.removeEventListener(TRANSITION_END,o),execute(e))};t.addEventListener(TRANSITION_END,o),setTimeout(()=>{s||triggerTransitionEnd(t)},i)},getNextActiveElement=(e,t,n,i)=>{const s=e.length;let o=e.indexOf(t);return-1===o?!n&&i?e[s-1]:e[0]:(o+=n?1:-1,i&&(o=(o+s)%s),e[Math.max(0,Math.min(o,s-1))])};class Config{static get Default(){return{}}static get DefaultType(){return{}}static get NAME(){throw new Error('You have to implement the static method "NAME", for each component!')}_getConfig(e){return e=this._mergeConfigObj(e),e=this._configAfterMerge(e),this._typeCheckConfig(e),e}_configAfterMerge(e){return e}_mergeConfigObj(e,t){const n=isElement$1(t)?Manipulator.getDataAttribute(t,"config"):{};return{...this.constructor.Default,..."object"==typeof n?n:{},...isElement$1(t)?Manipulator.getDataAttributes(t):{},..."object"==typeof e?e:{}}}_typeCheckConfig(e,t=this.constructor.DefaultType){for(const[n,i]of Object.entries(t)){const t=e[n],s=isElement$1(t)?"element":toType(t);if(!new RegExp(i).test(s))throw new TypeError(`${this.constructor.NAME.toUpperCase()}: Option "${n}" provided type "${s}" but expected type "${i}".`)}}}const VERSION="6.0.0-alpha1";class BaseComponent extends Config{constructor(e,t){if(super(),!(e=getElement(e)))return;this._element=e,this._config=this._getConfig(t);const n=Data.get(this._element,this.constructor.DATA_KEY);n&&n.dispose(),Data.set(this._element,this.constructor.DATA_KEY,this)}dispose(){Data.remove(this._element,this.constructor.DATA_KEY),EventHandler.off(this._element,this.constructor.EVENT_KEY);for(const e of Object.getOwnPropertyNames(this))this[e]=null}_queueCallback(e,t,n=!0){executeAfterTransition(()=>{this._element&&e()},t,n)}_getConfig(e){return e=this._mergeConfigObj(e,this._element),e=this._configAfterMerge(e),this._typeCheckConfig(e),e}static getInstance(e){return Data.get(getElement(e),this.DATA_KEY)}static getOrCreateInstance(e,t={}){return this.getInstance(e)||new this(e,"object"==typeof t?t:null)}static get VERSION(){return VERSION}static get DATA_KEY(){return`bs.${this.NAME}`}static get EVENT_KEY(){return`.${this.DATA_KEY}`}static eventName(e){return`${e}${this.EVENT_KEY}`}}const getSelector=e=>{let t=e.getAttribute("data-bs-target");if(!t||"#"===t){let n=e.getAttribute("href");if(!n||!n.includes("#")&&!n.startsWith("."))return null;n.includes("#")&&!n.startsWith("#")&&(n=`#${n.split("#")[1]}`),t=n&&"#"!==n?n.trim():null}return t?t.split(",").map(e=>parseSelector(e)).join(","):null},SelectorEngine={find:(e,t=document.documentElement)=>[...Element.prototype.querySelectorAll.call(t,e)],findOne:(e,t=document.documentElement)=>Element.prototype.querySelector.call(t,e),children:(e,t)=>[...e.children].filter(e=>e.matches(t)),parents(e,t){const n=[];let i=e.parentNode.closest(t);for(;i;)n.push(i),i=i.parentNode.closest(t);return n},closest:(e,t)=>Element.prototype.closest.call(e,t),prev(e,t){let n=e.previousElementSibling;for(;n;){if(n.matches(t))return[n];n=n.previousElementSibling}return[]},next(e,t){let n=e.nextElementSibling;for(;n;){if(n.matches(t))return[n];n=n.nextElementSibling}return[]},focusableChildren(e){const t=["a","button","input","textarea","select","details","[tabindex]",'[contenteditable="true"]'].map(e=>`${e}:not([tabindex^="-"])`).join(",");return this.find(t,e).filter(e=>!isDisabled(e)&&isVisible(e))},getSelectorFromElement(e){const t=getSelector(e);return t&&SelectorEngine.findOne(t)?t:null},getElementFromSelector(e){const t=getSelector(e);return t?SelectorEngine.findOne(t):null},getMultipleElementsFromSelector(e){const t=getSelector(e);return t?SelectorEngine.find(t):[]}},enableDismissTrigger=(e,t="hide")=>{const n=`click.dismiss${e.EVENT_KEY}`,i=e.NAME;EventHandler.on(document,n,`[data-bs-dismiss="${i}"]`,function(n){if(["A","AREA"].includes(this.tagName)&&n.preventDefault(),isDisabled(this))return;const s=SelectorEngine.getElementFromSelector(this)||this.closest(`.${i}`);e.getOrCreateInstance(s)[t]()})},eventActionOnPlugin=(e,t,n,i,s=null)=>{eventAction(`${t}.${e.NAME}`,n,t=>{const n=t.targets.filter(Boolean).map(t=>e.getOrCreateInstance(t));"function"==typeof s&&s({...t,instances:n});for(const e of n)e[i]()})},eventAction=(e,t,n)=>{const i=`${t}:not(.disabled):not(:disabled)`;EventHandler.on(document,e,i,function(e){["A","AREA"].includes(this.tagName)&&e.preventDefault();const t=SelectorEngine.getSelectorFromElement(this),i=t?SelectorEngine.find(t):[this];n({targets:i,event:e})})},NAME$l="alert",DATA_KEY$h="bs.alert",EVENT_KEY$i=".bs.alert",EVENT_CLOSE="close.bs.alert",EVENT_CLOSED="closed.bs.alert",CLASS_NAME_FADE$4="fade",CLASS_NAME_SHOW$6="show";class Alert extends BaseComponent{static get NAME(){return NAME$l}close(){if(EventHandler.trigger(this._element,EVENT_CLOSE).defaultPrevented)return;this._element.classList.remove("show");const e=this._element.classList.contains("fade");this._queueCallback(()=>this._destroyElement(),this._element,e)}_destroyElement(){this._element.remove(),EventHandler.trigger(this._element,EVENT_CLOSED),this.dispose()}}enableDismissTrigger(Alert,"close");const NAME$k="button",DATA_KEY$g="bs.button",EVENT_KEY$h=`.${DATA_KEY$g}`,DATA_API_KEY$c=".data-api",CLASS_NAME_ACTIVE$4="active",SELECTOR_DATA_TOGGLE$a='[data-bs-toggle="button"]',EVENT_CLICK_DATA_API$8=`click${EVENT_KEY$h}.data-api`;class Button extends BaseComponent{static get NAME(){return NAME$k}toggle(){this._element.setAttribute("aria-pressed",this._element.classList.toggle("active"))}}EventHandler.on(document,EVENT_CLICK_DATA_API$8,SELECTOR_DATA_TOGGLE$a,e=>{e.preventDefault();const t=e.target.closest(SELECTOR_DATA_TOGGLE$a);Button.getOrCreateInstance(t).toggle()});const NAME$j="carousel",DATA_KEY$f="bs.carousel",EVENT_KEY$g=`.${DATA_KEY$f}`,DATA_API_KEY$b=".data-api",ARROW_LEFT_KEY$2="ArrowLeft",ARROW_RIGHT_KEY$2="ArrowRight",DIRECTION_LEFT="left",DIRECTION_RIGHT="right",EVENT_SLIDE=`slide${EVENT_KEY$g}`,EVENT_SLID=`slid${EVENT_KEY$g}`,EVENT_KEYDOWN$2=`keydown${EVENT_KEY$g}`,EVENT_MOUSEENTER$2=`mouseenter${EVENT_KEY$g}`,EVENT_MOUSELEAVE$1=`mouseleave${EVENT_KEY$g}`,EVENT_POINTERDOWN$1=`pointerdown${EVENT_KEY$g}`,EVENT_LOAD_DATA_API$3=`load${EVENT_KEY$g}.data-api`,EVENT_CLICK_DATA_API$7=`click${EVENT_KEY$g}.data-api`,CLASS_NAME_CAROUSEL="carousel",CLASS_NAME_ACTIVE$3="active",CLASS_NAME_FADE$3="carousel-fade",CLASS_NAME_CENTER="carousel-center",CLASS_NAME_AUTO="carousel-auto",CLASS_NAME_CLONE="carousel-item-clone",CLASS_NAME_PAUSED="paused",CLASS_NAME_PLAYING="carousel-playing",PROPERTY_INTERVAL="--bs-carousel-interval",SCROLL_DURATION=300,ACTIVE_RATIO_TOLERANCE=.05,SELECTOR_ACTIVE=".active",SELECTOR_ITEM=`.carousel-item:not(.${CLASS_NAME_CLONE})`,SELECTOR_ACTIVE_ITEM=".active"+SELECTOR_ITEM,SELECTOR_INNER$1=".carousel-inner",SELECTOR_INDICATORS=".carousel-indicators",SELECTOR_PLAY_PAUSE=".carousel-control-play-pause",SELECTOR_DATA_SLIDE="[data-bs-slide], [data-bs-slide-to]",SELECTOR_DATA_SLIDE_PREV='[data-bs-slide="prev"]',SELECTOR_DATA_SLIDE_NEXT='[data-bs-slide="next"]',SELECTOR_DATA_AUTOPLAY='[data-bs-autoplay="true"]',KEY_TO_DIRECTION={[ARROW_LEFT_KEY$2]:"right",[ARROW_RIGHT_KEY$2]:"left"},ENDS_STOP="stop",ENDS_WRAP="wrap",ENDS_LOOP="loop",Default$i={autoplay:!1,ends:ENDS_LOOP,interval:5e3,keyboard:!0,pause:"hover"},DefaultType$i={autoplay:"boolean",ends:"string",interval:"number",keyboard:"boolean",pause:"(string|boolean)"},easeInOutCubic=e=>e<.5?4*e*e*e:1-(-2*e+2)**3/2;class Carousel extends BaseComponent{constructor(e,t){super(e,t),this._viewport=SelectorEngine.findOne(SELECTOR_INNER$1,this._element)||this._element,this._indicatorsElement=SelectorEngine.findOne(SELECTOR_INDICATORS,this._element),this._playPauseElement=SelectorEngine.findOne(SELECTOR_PLAY_PAUSE,this._element),this._prevControls=SelectorEngine.find('[data-bs-slide="prev"]',this._element),this._nextControls=SelectorEngine.find('[data-bs-slide="next"]',this._element),this._interval=null,this._observer=null,this._scrollFrame=null,this._looping=!1,this._visibility=new Map,this._playing=this._config.autoplay,this._activeIndex=this._initialActiveIndex(),this._addEventListeners(),this._observeItems(),this._refreshActiveState(),this._playing&&this.cycle(),this._updatePlayPauseControl()}static get Default(){return Default$i}static get DefaultType(){return DefaultType$i}static get NAME(){return NAME$j}next(){this.to(this._navIndex()+1)}nextWhenVisible(){"visible"===document.visibilityState&&isVisible(this._element)&&this.next()}prev(){this.to(this._navIndex()-1)}pause(){this._clearInterval(),this._element.classList.remove("carousel-playing")}cycle(){this._clearInterval(),this._scheduleAutoplay(),this._element.classList.add("carousel-playing")}to(e){if(this._looping)return;const t=this._getItems(),n=Number.parseInt(e,10);if(this._config.ends===ENDS_LOOP&&!this._prefersReducedMotion()&&this._canLoop()){if(n>t.length-1)return void this._loopTransition(!0);if(n<0)return void this._loopTransition(!1)}const i=this._normalizeIndex(n,t.length),s=this._navIndex();null!==i&&i!==s&&(EventHandler.trigger(this._element,EVENT_SLIDE,{relatedTarget:t[i],direction:this._direction(s,i),from:s,to:i}).defaultPrevented||(this._isFade()?this._fadeTo(i):this._scrollToIndex(i)))}dispose(){this._clearInterval(),this._observer&&this._observer.disconnect(),null!==this._scrollFrame&&cancelAnimationFrame(this._scrollFrame);for(const e of SelectorEngine.find(`.${CLASS_NAME_CLONE}`,this._viewport))e.remove();this._viewport.style.scrollSnapType="",EventHandler.off(this._viewport,EVENT_KEY$g),super.dispose()}_configAfterMerge(e){return[ENDS_STOP,ENDS_WRAP,ENDS_LOOP].includes(e.ends)||(e.ends=Default$i.ends),e}_initialActiveIndex(){const e=SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM,this._element),t=e?this._getItems().indexOf(e):0;return Math.max(t,0)}_addEventListeners(){this._config.keyboard&&EventHandler.on(this._element,EVENT_KEYDOWN$2,e=>this._keydown(e)),"hover"===this._config.pause&&(EventHandler.on(this._element,EVENT_MOUSEENTER$2,()=>this.pause()),EventHandler.on(this._element,EVENT_MOUSELEAVE$1,()=>this._maybeEnableCycle())),EventHandler.on(this._viewport,EVENT_POINTERDOWN$1,()=>this._pauseFromInteraction())}_keydown(e){if(/input|textarea/i.test(e.target.tagName))return;const t=KEY_TO_DIRECTION[e.key];t&&(e.preventDefault(),this._pauseFromInteraction(),"right"===t?this.prev():this.next())}_observeItems(){if(!this._isFade()&&"undefined"!=typeof IntersectionObserver){this._observer=new IntersectionObserver(e=>this._handleIntersection(e),{root:this._viewport,threshold:[0,.25,.5,.75,1]});for(const e of this._getItems())this._observer.observe(e)}}_handleIntersection(e){if(this._looping)return;for(const t of e)this._visibility.set(t.target,t.isIntersecting?t.intersectionRatio:0);const t=this._getItems().map(e=>this._visibility.get(e)??0),n=Math.max(...t);let i=this._activeIndex;n>0&&(i=t.findIndex(e=>e>=n-.05)),this._setActive(i),this._updateEndControls()}_navIndex(){if(this._isFade()||this._viewport.scrollWidth-this._viewport.clientWidth<=0)return this._activeIndex;let e=this._activeIndex,t=Number.POSITIVE_INFINITY;for(const[n,i]of this._getItems().entries()){const s=Math.abs(this._scrollDelta(i));s<t&&(t=s,e=n)}return e}_scrollToIndex(e){const t=this._getItems()[e];if(!t)return;const n=this._scrollDelta(t);if(Math.abs(n)<1)return;const i=this._viewport.scrollLeft+n;this._viewport.style.scrollSnapType="none",this._animateScroll(i,()=>{this._viewport.style.scrollSnapType="",this._observer||this._setActive(e),this._updateEndControls()})}_animateScroll(e,t){null!==this._scrollFrame&&(cancelAnimationFrame(this._scrollFrame),this._scrollFrame=null);const n=this._viewport.scrollLeft,i=e-n;if(this._prefersReducedMotion()||"undefined"==typeof requestAnimationFrame)return this._viewport.scrollTo({left:e,behavior:"instant"}),void t();let s=null;const o=a=>{null===s&&(s=a);const l=Math.min((a-s)/300,1);this._viewport.scrollTo({left:n+i*easeInOutCubic(l),behavior:"instant"}),l<1?this._scrollFrame=requestAnimationFrame(o):(this._viewport.scrollTo({left:e,behavior:"instant"}),this._scrollFrame=null,t())};this._scrollFrame=requestAnimationFrame(o)}_scrollDelta(e){const t=this._viewport.getBoundingClientRect(),n=e.getBoundingClientRect();if(this._element.classList.contains("carousel-center"))return n.left+n.width/2-(t.left+t.width/2);const i=Number.parseFloat(getComputedStyle(this._viewport).scrollPaddingInlineStart)||0;return isRTL$1()?n.right-(t.right-i):n.left-(t.left+i)}_loopTransition(e){const t=this._getItems(),n=t.length-1,i=this._activeIndex,s=e?0:n,o=this._loopDirection(e);if(EventHandler.trigger(this._element,EVENT_SLIDE,{relatedTarget:t[s],direction:o,from:i,to:s}).defaultPrevented)return;this._looping=!0;const a=(e?t[0]:t[n]).cloneNode(!0);a.classList.add(CLASS_NAME_CLONE),a.classList.remove("active"),a.removeAttribute("id");for(const e of SelectorEngine.find("[id]",a))e.removeAttribute("id");a.setAttribute("aria-hidden","true"),a.inert=!0,this._viewport.style.scrollSnapType="none",e?this._viewport.append(a):(this._viewport.prepend(a),this._jumpScroll(this._scrollDelta(t[i]))),this._animateScroll(this._viewport.scrollLeft+this._scrollDelta(a),()=>{a.remove(),this._jumpScroll(this._scrollDelta(t[s])),this._activeIndex=s,this._refreshActiveState(),EventHandler.trigger(this._element,EVENT_SLID,{relatedTarget:t[s],direction:o,from:i,to:s}),this._viewport.style.scrollSnapType="",this._looping=!1})}_loopDirection(e){return isRTL$1()?e?"right":"left":e?"left":"right"}_jumpScroll(e){this._viewport.style.scrollSnapType="none",this._viewport.scrollBy({left:e,top:0,behavior:"instant"})}_fadeTo(e){this._setActive(e)}_setActive(e){const t=this._getItems();if(e===this._activeIndex||!t[e])return;const n=this._activeIndex;this._activeIndex=e,this._refreshActiveState(),EventHandler.trigger(this._element,EVENT_SLID,{relatedTarget:t[e],direction:this._direction(n,e),from:n,to:e})}_refreshActiveState(){const e=this._getItems();for(const[t,n]of e.entries())n.classList.toggle("active",t===this._activeIndex);this._setActiveIndicatorElement(this._activeIndex),this._updateEndControls()}_updateEndControls(){if(this._config.ends!==ENDS_STOP)return;const e=this._viewport,t=e.scrollWidth-e.clientWidth;let n,i;if(t>0){const s=Math.abs(e.scrollLeft);n=s<=1,i=s>=t-1}else{const e=this._getItems().length-1;n=this._activeIndex<=0,i=this._activeIndex>=e}this._setControlsDisabled(this._prevControls,n),this._setControlsDisabled(this._nextControls,i)}_setControlsDisabled(e,t){for(const n of e)t&&n===document.activeElement&&((e===this._prevControls?this._nextControls:this._prevControls)[0]??this._viewport).focus({preventScroll:!0}),n.disabled=t}_setActiveIndicatorElement(e){if(!this._indicatorsElement)return;const t=SelectorEngine.findOne(".active",this._indicatorsElement);t&&(t.classList.remove("active"),t.removeAttribute("aria-current"));const n=SelectorEngine.findOne(`[data-bs-slide-to="${e}"]`,this._indicatorsElement);n&&(n.classList.add("active"),n.setAttribute("aria-current","true"))}_normalizeIndex(e,t){return Number.isNaN(e)||0===t?null:e<0?this._wrapsAround()?t-1:null:e>t-1?this._wrapsAround()?0:null:e}_wrapsAround(){return this._config.ends===ENDS_WRAP||this._config.ends===ENDS_LOOP}_canLoop(){if(this._isFade()||this._getItems().length<2)return!1;const e=getComputedStyle(this._element),t=t=>Number.parseFloat(e.getPropertyValue(t))||0;return 1===(t("--bs-carousel-items")||1)&&0===t("--bs-carousel-items-peek")&&!this._element.classList.contains("carousel-center")&&!this._element.classList.contains("carousel-auto")}_direction(e,t){const n=t>e;return isRTL$1()?n?"right":"left":n?"left":"right"}_scheduleAutoplay(e=this._activeIndex){const t=this._itemInterval(e);this._element.style.setProperty(PROPERTY_INTERVAL,`${t}ms`),this._interval=setTimeout(()=>{const e=this._upcomingIndex();this.nextWhenVisible(),null!==e?this._scheduleAutoplay(e):this.pause()},t)}_upcomingIndex(){return this._normalizeIndex(this._navIndex()+1,this._getItems().length)}_itemInterval(e=this._activeIndex){const t=this._getItems()[e],n=t?Number.parseInt(t.getAttribute("data-bs-interval"),10):Number.NaN;return Number.isNaN(n)?this._config.interval:n}_maybeEnableCycle(){this._playing&&this.cycle()}_pauseFromInteraction(){this._playing=!1,this.pause(),this._updatePlayPauseControl()}_togglePlayPause(){this._playing?this._pauseFromInteraction():(this._playing=!0,this.cycle(),this._updatePlayPauseControl())}_updatePlayPauseControl(){if(!this._playPauseElement)return;this._playPauseElement.classList.toggle("paused",!this._playing);const e=this._playPauseElement.getAttribute(this._playing?"data-bs-pause-label":"data-bs-play-label");e&&this._playPauseElement.setAttribute("aria-label",e)}_isFade(){return this._element.classList.contains("carousel-fade")}_prefersReducedMotion(){return"undefined"!=typeof window&&"function"==typeof window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}_getItems(){return SelectorEngine.find(SELECTOR_ITEM,this._element)}_clearInterval(){this._interval&&(clearTimeout(this._interval),this._interval=null)}}EventHandler.on(document,EVENT_CLICK_DATA_API$7,SELECTOR_DATA_SLIDE,function(e){const t=SelectorEngine.getElementFromSelector(this);if(!t||!t.classList.contains("carousel"))return;e.preventDefault();const n=Carousel.getOrCreateInstance(t);n._pauseFromInteraction();const i=this.getAttribute("data-bs-slide-to");i?n.to(i):"next"!==Manipulator.getDataAttribute(this,"slide")?n.prev():n.next()}),EventHandler.on(document,EVENT_CLICK_DATA_API$7,SELECTOR_PLAY_PAUSE,function(e){const t=SelectorEngine.getElementFromSelector(this);t&&t.classList.contains("carousel")&&(e.preventDefault(),Carousel.getOrCreateInstance(t)._togglePlayPause())}),EventHandler.on(window,EVENT_LOAD_DATA_API$3,()=>{const e=SelectorEngine.find(SELECTOR_DATA_AUTOPLAY);for(const t of e)Carousel.getOrCreateInstance(t)});const NAME$i="collapse",DATA_KEY$e="bs.collapse",EVENT_KEY$f=`.${DATA_KEY$e}`,DATA_API_KEY$a=".data-api",EVENT_SHOW$7=`show${EVENT_KEY$f}`,EVENT_SHOWN$6=`shown${EVENT_KEY$f}`,EVENT_HIDE$6=`hide${EVENT_KEY$f}`,EVENT_HIDDEN$8=`hidden${EVENT_KEY$f}`,EVENT_CLICK_DATA_API$6=`click${EVENT_KEY$f}.data-api`,CLASS_NAME_SHOW$5="show",CLASS_NAME_COLLAPSE="collapse",CLASS_NAME_COLLAPSING="collapsing",CLASS_NAME_COLLAPSED="collapsed",CLASS_NAME_DEEPER_CHILDREN=":scope .collapse .collapse",CLASS_NAME_HORIZONTAL="collapse-horizontal",WIDTH="width",HEIGHT="height",SELECTOR_ACTIVES=".collapse.show, .collapse.collapsing",SELECTOR_DATA_TOGGLE$9='[data-bs-toggle="collapse"]',Default$h={parent:null,toggle:!0},DefaultType$h={parent:"(null|element)",toggle:"boolean"};class Collapse extends BaseComponent{constructor(e,t){super(e,t),this._isTransitioning=!1,this._triggerArray=[];const n=SelectorEngine.find(SELECTOR_DATA_TOGGLE$9);for(const e of n){const t=SelectorEngine.getSelectorFromElement(e),n=SelectorEngine.find(t).filter(e=>e===this._element);null!==t&&n.length&&this._triggerArray.push(e)}this._initializeChildren(),this._config.parent||this._addAriaAndCollapsedClass(this._triggerArray,this._isShown()),this._config.toggle&&this.toggle()}static get Default(){return Default$h}static get DefaultType(){return DefaultType$h}static get NAME(){return NAME$i}toggle(){this._isShown()?this.hide():this.show()}show(){if(this._isTransitioning||this._isShown())return;let e=[];if(this._config.parent&&(e=this._getFirstLevelChildren(SELECTOR_ACTIVES).filter(e=>e!==this._element).map(e=>Collapse.getOrCreateInstance(e,{toggle:!1}))),e.length&&e[0]._isTransitioning)return;if(EventHandler.trigger(this._element,EVENT_SHOW$7).defaultPrevented)return;for(const t of e)t.hide();const t=this._getDimension();this._element.classList.remove("collapse"),this._element.classList.add("collapsing"),this._element.style[t]=0,this._addAriaAndCollapsedClass(this._triggerArray,!0),this._isTransitioning=!0;const n=`scroll${t[0].toUpperCase()+t.slice(1)}`;this._queueCallback(()=>{this._isTransitioning=!1,this._element.classList.remove("collapsing"),this._element.classList.add("collapse","show"),this._element.style[t]="",EventHandler.trigger(this._element,EVENT_SHOWN$6)},this._element,!0),this._element.style[t]=`${this._element[n]}px`}hide(){if(this._isTransitioning||!this._isShown())return;if(EventHandler.trigger(this._element,EVENT_HIDE$6).defaultPrevented)return;const e=this._getDimension();this._element.style[e]=`${this._element.getBoundingClientRect()[e]}px`,reflow(this._element),this._element.classList.add("collapsing"),this._element.classList.remove("collapse","show");for(const e of this._triggerArray){const t=SelectorEngine.getElementFromSelector(e);t&&!this._isShown(t)&&this._addAriaAndCollapsedClass([e],!1)}this._isTransitioning=!0,this._element.style[e]="",this._queueCallback(()=>{this._isTransitioning=!1,this._element.classList.remove("collapsing"),this._element.classList.add("collapse"),EventHandler.trigger(this._element,EVENT_HIDDEN$8)},this._element,!0)}_isShown(e=this._element){return e.classList.contains("show")}_configAfterMerge(e){return e.toggle=Boolean(e.toggle),e.parent=getElement(e.parent),e}_getDimension(){return this._element.classList.contains("collapse-horizontal")?WIDTH:HEIGHT}_initializeChildren(){if(!this._config.parent)return;const e=this._getFirstLevelChildren(SELECTOR_DATA_TOGGLE$9);for(const t of e){const e=SelectorEngine.getElementFromSelector(t);e&&this._addAriaAndCollapsedClass([t],this._isShown(e))}}_getFirstLevelChildren(e){const t=SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN,this._config.parent);return SelectorEngine.find(e,this._config.parent).filter(e=>!t.includes(e))}_addAriaAndCollapsedClass(e,t){if(e.length)for(const n of e)n.classList.toggle("collapsed",!t),n.setAttribute("aria-expanded",t)}}EventHandler.on(document,EVENT_CLICK_DATA_API$6,SELECTOR_DATA_TOGGLE$9,function(e){("A"===e.target.tagName||e.delegateTarget&&"A"===e.delegateTarget.tagName)&&e.preventDefault();for(const e of SelectorEngine.getMultipleElementsFromSelector(this))Collapse.getOrCreateInstance(e,{toggle:!1}).toggle()});const min=Math.min,max=Math.max,round=Math.round,floor=Math.floor,createCoords=e=>({x:e,y:e}),oppositeSideMap={left:"right",right:"left",bottom:"top",top:"bottom"};function clamp(e,t,n){return max(e,min(t,n))}function evaluate(e,t){return"function"==typeof e?e(t):e}function getSide(e){return e.split("-")[0]}function getAlignment(e){return e.split("-")[1]}function getOppositeAxis(e){return"x"===e?"y":"x"}function getAxisLength(e){return"y"===e?"height":"width"}function getSideAxis(e){const t=e[0];return"t"===t||"b"===t?"y":"x"}function getAlignmentAxis(e){return getOppositeAxis(getSideAxis(e))}function getAlignmentSides(e,t,n){void 0===n&&(n=!1);const i=getAlignment(e),s=getAlignmentAxis(e),o=getAxisLength(s);let a="x"===s?i===(n?"end":"start")?"right":"left":"start"===i?"bottom":"top";return t.reference[o]>t.floating[o]&&(a=getOppositePlacement(a)),[a,getOppositePlacement(a)]}function getExpandedPlacements(e){const t=getOppositePlacement(e);return[getOppositeAlignmentPlacement(e),t,getOppositeAlignmentPlacement(t)]}function getOppositeAlignmentPlacement(e){return e.includes("start")?e.replace("start","end"):e.replace("end","start")}const lrPlacement=["left","right"],rlPlacement=["right","left"],tbPlacement=["top","bottom"],btPlacement=["bottom","top"];function getSideList(e,t,n){switch(e){case"top":case"bottom":return n?t?rlPlacement:lrPlacement:t?lrPlacement:rlPlacement;case"left":case"right":return t?tbPlacement:btPlacement;default:return[]}}function getOppositeAxisPlacements(e,t,n,i){const s=getAlignment(e);let o=getSideList(getSide(e),"start"===n,i);return s&&(o=o.map(e=>e+"-"+s),t&&(o=o.concat(o.map(getOppositeAlignmentPlacement)))),o}function getOppositePlacement(e){const t=getSide(e);return oppositeSideMap[t]+e.slice(t.length)}function expandPaddingObject(e){return{top:0,right:0,bottom:0,left:0,...e}}function getPaddingObject(e){return"number"!=typeof e?expandPaddingObject(e):{top:e,right:e,bottom:e,left:e}}function rectToClientRect(e){const{x:t,y:n,width:i,height:s}=e;return{width:i,height:s,top:n,left:t,right:t+i,bottom:n+s,x:t,y:n}}function computeCoordsFromPlacement(e,t,n){let{reference:i,floating:s}=e;const o=getSideAxis(t),a=getAlignmentAxis(t),l=getAxisLength(a),r=getSide(t),c="y"===o,d=i.x+i.width/2-s.width/2,u=i.y+i.height/2-s.height/2,h=i[l]/2-s[l]/2;let _;switch(r){case"top":_={x:d,y:i.y-s.height};break;case"bottom":_={x:d,y:i.y+i.height};break;case"right":_={x:i.x+i.width,y:u};break;case"left":_={x:i.x-s.width,y:u};break;default:_={x:i.x,y:i.y}}switch(getAlignment(t)){case"start":_[a]-=h*(n&&c?-1:1);break;case"end":_[a]+=h*(n&&c?-1:1)}return _}async function detectOverflow(e,t){var n;void 0===t&&(t={});const{x:i,y:s,platform:o,rects:a,elements:l,strategy:r}=e,{boundary:c="clippingAncestors",rootBoundary:d="viewport",elementContext:u="floating",altBoundary:h=!1,padding:_=0}=evaluate(t,e),m=getPaddingObject(_),g=l[h?"floating"===u?"reference":"floating":u],p=rectToClientRect(await o.getClippingRect({element:null==(n=await(null==o.isElement?void 0:o.isElement(g)))||n?g:g.contextElement||await(null==o.getDocumentElement?void 0:o.getDocumentElement(l.floating)),boundary:c,rootBoundary:d,strategy:r})),E="floating"===u?{x:i,y:s,width:a.floating.width,height:a.floating.height}:a.reference,f=await(null==o.getOffsetParent?void 0:o.getOffsetParent(l.floating)),v=await(null==o.isElement?void 0:o.isElement(f))&&await(null==o.getScale?void 0:o.getScale(f))||{x:1,y:1},T=rectToClientRect(o.convertOffsetParentRelativeRectToViewportRelativeRect?await o.convertOffsetParentRelativeRectToViewportRelativeRect({elements:l,rect:E,offsetParent:f,strategy:r}):E);return{top:(p.top-T.top+m.top)/v.y,bottom:(T.bottom-p.bottom+m.bottom)/v.y,left:(p.left-T.left+m.left)/v.x,right:(T.right-p.right+m.right)/v.x}}const MAX_RESET_COUNT=50,computePosition$1=async(e,t,n)=>{const{placement:i="bottom",strategy:s="absolute",middleware:o=[],platform:a}=n,l=a.detectOverflow?a:{...a,detectOverflow:detectOverflow},r=await(null==a.isRTL?void 0:a.isRTL(t));let c=await a.getElementRects({reference:e,floating:t,strategy:s}),{x:d,y:u}=computeCoordsFromPlacement(c,i,r),h=i,_=0;const m={};for(let n=0;n<o.length;n++){const g=o[n];if(!g)continue;const{name:p,fn:E}=g,{x:f,y:v,data:T,reset:b}=await E({x:d,y:u,initialPlacement:i,placement:h,strategy:s,middlewareData:m,rects:c,platform:l,elements:{reference:e,floating:t}});d=null!=f?f:d,u=null!=v?v:u,m[p]={...m[p],...T},b&&_<50&&(_++,"object"==typeof b&&(b.placement&&(h=b.placement),b.rects&&(c=!0===b.rects?await a.getElementRects({reference:e,floating:t,strategy:s}):b.rects),({x:d,y:u}=computeCoordsFromPlacement(c,h,r))),n=-1)}return{x:d,y:u,placement:h,strategy:s,middlewareData:m}},arrow$1=e=>({name:"arrow",options:e,async fn(t){const{x:n,y:i,placement:s,rects:o,platform:a,elements:l,middlewareData:r}=t,{element:c,padding:d=0}=evaluate(e,t)||{};if(null==c)return{};const u=getPaddingObject(d),h={x:n,y:i},_=getAlignmentAxis(s),m=getAxisLength(_),g=await a.getDimensions(c),p="y"===_,E=p?"top":"left",f=p?"bottom":"right",v=p?"clientHeight":"clientWidth",T=o.reference[m]+o.reference[_]-h[_]-o.floating[m],b=h[_]-o.reference[_],A=await(null==a.getOffsetParent?void 0:a.getOffsetParent(c));let y=A?A[v]:0;y&&await(null==a.isElement?void 0:a.isElement(A))||(y=l.floating[v]||o.floating[m]);const S=T/2-b/2,D=y/2-g[m]/2-1,C=min(u[E],D),N=min(u[f],D),w=C,x=y-g[m]-N,L=y/2-g[m]/2+S,M=clamp(w,L,x),O=!r.arrow&&null!=getAlignment(s)&&L!==M&&o.reference[m]/2-(L<w?C:N)-g[m]/2<0,I=O?L<w?L-w:L-x:0;return{[_]:h[_]+I,data:{[_]:M,centerOffset:L-M-I,...O&&{alignmentOffset:I}},reset:O}}}),flip$1=function(e){return void 0===e&&(e={}),{name:"flip",options:e,async fn(t){var n,i;const{placement:s,middlewareData:o,rects:a,initialPlacement:l,platform:r,elements:c}=t,{mainAxis:d=!0,crossAxis:u=!0,fallbackPlacements:h,fallbackStrategy:_="bestFit",fallbackAxisSideDirection:m="none",flipAlignment:g=!0,...p}=evaluate(e,t);if(null!=(n=o.arrow)&&n.alignmentOffset)return{};const E=getSide(s),f=getSideAxis(l),v=getSide(l)===l,T=await(null==r.isRTL?void 0:r.isRTL(c.floating)),b=h||(v||!g?[getOppositePlacement(l)]:getExpandedPlacements(l)),A="none"!==m;!h&&A&&b.push(...getOppositeAxisPlacements(l,g,m,T));const y=[l,...b],S=await r.detectOverflow(t,p),D=[];let C=(null==(i=o.flip)?void 0:i.overflows)||[];if(d&&D.push(S[E]),u){const e=getAlignmentSides(s,a,T);D.push(S[e[0]],S[e[1]])}if(C=[...C,{placement:s,overflows:D}],!D.every(e=>e<=0)){var N,w;const e=((null==(N=o.flip)?void 0:N.index)||0)+1,t=y[e];if(t&&("alignment"!==u||f===getSideAxis(t)||C.every(e=>getSideAxis(e.placement)!==f||e.overflows[0]>0)))return{data:{index:e,overflows:C},reset:{placement:t}};let n=null==(w=C.filter(e=>e.overflows[0]<=0).sort((e,t)=>e.overflows[1]-t.overflows[1])[0])?void 0:w.placement;if(!n)switch(_){case"bestFit":{var x;const e=null==(x=C.filter(e=>{if(A){const t=getSideAxis(e.placement);return t===f||"y"===t}return!0}).map(e=>[e.placement,e.overflows.filter(e=>e>0).reduce((e,t)=>e+t,0)]).sort((e,t)=>e[1]-t[1])[0])?void 0:x[0];e&&(n=e);break}case"initialPlacement":n=l}if(s!==n)return{reset:{placement:n}}}return{}}}},originSides=new Set(["left","top"]);async function convertValueToCoords(e,t){const{placement:n,platform:i,elements:s}=e,o=await(null==i.isRTL?void 0:i.isRTL(s.floating)),a=getSide(n),l=getAlignment(n),r="y"===getSideAxis(n),c=originSides.has(a)?-1:1,d=o&&r?-1:1,u=evaluate(t,e);let{mainAxis:h,crossAxis:_,alignmentAxis:m}="number"==typeof u?{mainAxis:u,crossAxis:0,alignmentAxis:null}:{mainAxis:u.mainAxis||0,crossAxis:u.crossAxis||0,alignmentAxis:u.alignmentAxis};return l&&"number"==typeof m&&(_="end"===l?-1*m:m),r?{x:_*d,y:h*c}:{x:h*c,y:_*d}}const offset$1=function(e){return void 0===e&&(e=0),{name:"offset",options:e,async fn(t){var n,i;const{x:s,y:o,placement:a,middlewareData:l}=t,r=await convertValueToCoords(t,e);return a===(null==(n=l.offset)?void 0:n.placement)&&null!=(i=l.arrow)&&i.alignmentOffset?{}:{x:s+r.x,y:o+r.y,data:{...r,placement:a}}}}},shift$1=function(e){return void 0===e&&(e={}),{name:"shift",options:e,async fn(t){const{x:n,y:i,placement:s,platform:o}=t,{mainAxis:a=!0,crossAxis:l=!1,limiter:r={fn:e=>{let{x:t,y:n}=e;return{x:t,y:n}}},...c}=evaluate(e,t),d={x:n,y:i},u=await o.detectOverflow(t,c),h=getSideAxis(getSide(s)),_=getOppositeAxis(h);let m=d[_],g=d[h];if(a){const e="y"===_?"bottom":"right";m=clamp(m+u["y"===_?"top":"left"],m,m-u[e])}if(l){const e="y"===h?"bottom":"right";g=clamp(g+u["y"===h?"top":"left"],g,g-u[e])}const p=r.fn({...t,[_]:m,[h]:g});return{...p,data:{x:p.x-n,y:p.y-i,enabled:{[_]:a,[h]:l}}}}}};function hasWindow(){return"undefined"!=typeof window}function getNodeName(e){return isNode(e)?(e.nodeName||"").toLowerCase():"#document"}function getWindow(e){var t;return(null==e||null==(t=e.ownerDocument)?void 0:t.defaultView)||window}function getDocumentElement(e){var t;return null==(t=(isNode(e)?e.ownerDocument:e.document)||window.document)?void 0:t.documentElement}function isNode(e){return!!hasWindow()&&(e instanceof Node||e instanceof getWindow(e).Node)}function isElement(e){return!!hasWindow()&&(e instanceof Element||e instanceof getWindow(e).Element)}function isHTMLElement(e){return!!hasWindow()&&(e instanceof HTMLElement||e instanceof getWindow(e).HTMLElement)}function isShadowRoot(e){return!(!hasWindow()||"undefined"==typeof ShadowRoot)&&(e instanceof ShadowRoot||e instanceof getWindow(e).ShadowRoot)}function isOverflowElement(e){const{overflow:t,overflowX:n,overflowY:i,display:s}=getComputedStyle$1(e);return/auto|scroll|overlay|hidden|clip/.test(t+i+n)&&"inline"!==s&&"contents"!==s}function isTableElement(e){return/^(table|td|th)$/.test(getNodeName(e))}function isTopLayer(e){try{if(e.matches(":popover-open"))return!0}catch(e){}try{return e.matches(":modal")}catch(e){return!1}}const willChangeRe=/transform|translate|scale|rotate|perspective|filter/,containRe=/paint|layout|strict|content/,isNotNone=e=>!!e&&"none"!==e;let isWebKitValue;function isContainingBlock(e){const t=isElement(e)?getComputedStyle$1(e):e;return isNotNone(t.transform)||isNotNone(t.translate)||isNotNone(t.scale)||isNotNone(t.rotate)||isNotNone(t.perspective)||!isWebKit()&&(isNotNone(t.backdropFilter)||isNotNone(t.filter))||willChangeRe.test(t.willChange||"")||containRe.test(t.contain||"")}function getContainingBlock(e){let t=getParentNode(e);for(;isHTMLElement(t)&&!isLastTraversableNode(t);){if(isContainingBlock(t))return t;if(isTopLayer(t))return null;t=getParentNode(t)}return null}function isWebKit(){return null==isWebKitValue&&(isWebKitValue="undefined"!=typeof CSS&&CSS.supports&&CSS.supports("-webkit-backdrop-filter","none")),isWebKitValue}function isLastTraversableNode(e){return/^(html|body|#document)$/.test(getNodeName(e))}function getComputedStyle$1(e){return getWindow(e).getComputedStyle(e)}function getNodeScroll(e){return isElement(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.scrollX,scrollTop:e.scrollY}}function getParentNode(e){if("html"===getNodeName(e))return e;const t=e.assignedSlot||e.parentNode||isShadowRoot(e)&&e.host||getDocumentElement(e);return isShadowRoot(t)?t.host:t}function getNearestOverflowAncestor(e){const t=getParentNode(e);return isLastTraversableNode(t)?e.ownerDocument?e.ownerDocument.body:e.body:isHTMLElement(t)&&isOverflowElement(t)?t:getNearestOverflowAncestor(t)}function getOverflowAncestors(e,t,n){var i;void 0===t&&(t=[]),void 0===n&&(n=!0);const s=getNearestOverflowAncestor(e),o=s===(null==(i=e.ownerDocument)?void 0:i.body),a=getWindow(s);if(o){const e=getFrameElement(a);return t.concat(a,a.visualViewport||[],isOverflowElement(s)?s:[],e&&n?getOverflowAncestors(e):[])}return t.concat(s,getOverflowAncestors(s,[],n))}function getFrameElement(e){return e.parent&&Object.getPrototypeOf(e.parent)?e.frameElement:null}function getCssDimensions(e){const t=getComputedStyle$1(e);let n=parseFloat(t.width)||0,i=parseFloat(t.height)||0;const s=isHTMLElement(e),o=s?e.offsetWidth:n,a=s?e.offsetHeight:i,l=round(n)!==o||round(i)!==a;return l&&(n=o,i=a),{width:n,height:i,$:l}}function unwrapElement(e){return isElement(e)?e:e.contextElement}function getScale(e){const t=unwrapElement(e);if(!isHTMLElement(t))return createCoords(1);const n=t.getBoundingClientRect(),{width:i,height:s,$:o}=getCssDimensions(t);let a=(o?round(n.width):n.width)/i,l=(o?round(n.height):n.height)/s;return a&&Number.isFinite(a)||(a=1),l&&Number.isFinite(l)||(l=1),{x:a,y:l}}const noOffsets=createCoords(0);function getVisualOffsets(e){const t=getWindow(e);return isWebKit()&&t.visualViewport?{x:t.visualViewport.offsetLeft,y:t.visualViewport.offsetTop}:noOffsets}function shouldAddVisualOffsets(e,t,n){return void 0===t&&(t=!1),!(!n||t&&n!==getWindow(e))&&t}function getBoundingClientRect(e,t,n,i){void 0===t&&(t=!1),void 0===n&&(n=!1);const s=e.getBoundingClientRect(),o=unwrapElement(e);let a=createCoords(1);t&&(i?isElement(i)&&(a=getScale(i)):a=getScale(e));const l=shouldAddVisualOffsets(o,n,i)?getVisualOffsets(o):createCoords(0);let r=(s.left+l.x)/a.x,c=(s.top+l.y)/a.y,d=s.width/a.x,u=s.height/a.y;if(o){const e=getWindow(o),t=i&&isElement(i)?getWindow(i):i;let n=e,s=getFrameElement(n);for(;s&&i&&t!==n;){const e=getScale(s),t=s.getBoundingClientRect(),i=getComputedStyle$1(s),o=t.left+(s.clientLeft+parseFloat(i.paddingLeft))*e.x,a=t.top+(s.clientTop+parseFloat(i.paddingTop))*e.y;r*=e.x,c*=e.y,d*=e.x,u*=e.y,r+=o,c+=a,n=getWindow(s),s=getFrameElement(n)}}return rectToClientRect({width:d,height:u,x:r,y:c})}function getWindowScrollBarX(e,t){const n=getNodeScroll(e).scrollLeft;return t?t.left+n:getBoundingClientRect(getDocumentElement(e)).left+n}function getHTMLOffset(e,t){const n=e.getBoundingClientRect();return{x:n.left+t.scrollLeft-getWindowScrollBarX(e,n),y:n.top+t.scrollTop}}function convertOffsetParentRelativeRectToViewportRelativeRect(e){let{elements:t,rect:n,offsetParent:i,strategy:s}=e;const o="fixed"===s,a=getDocumentElement(i),l=!!t&&isTopLayer(t.floating);if(i===a||l&&o)return n;let r={scrollLeft:0,scrollTop:0},c=createCoords(1);const d=createCoords(0),u=isHTMLElement(i);if((u||!u&&!o)&&(("body"!==getNodeName(i)||isOverflowElement(a))&&(r=getNodeScroll(i)),u)){const e=getBoundingClientRect(i);c=getScale(i),d.x=e.x+i.clientLeft,d.y=e.y+i.clientTop}const h=!a||u||o?createCoords(0):getHTMLOffset(a,r);return{width:n.width*c.x,height:n.height*c.y,x:n.x*c.x-r.scrollLeft*c.x+d.x+h.x,y:n.y*c.y-r.scrollTop*c.y+d.y+h.y}}function getClientRects(e){return Array.from(e.getClientRects())}function getDocumentRect(e){const t=getDocumentElement(e),n=getNodeScroll(e),i=e.ownerDocument.body,s=max(t.scrollWidth,t.clientWidth,i.scrollWidth,i.clientWidth),o=max(t.scrollHeight,t.clientHeight,i.scrollHeight,i.clientHeight);let a=-n.scrollLeft+getWindowScrollBarX(e);const l=-n.scrollTop;return"rtl"===getComputedStyle$1(i).direction&&(a+=max(t.clientWidth,i.clientWidth)-s),{width:s,height:o,x:a,y:l}}const SCROLLBAR_MAX=25;function getViewportRect(e,t){const n=getWindow(e),i=getDocumentElement(e),s=n.visualViewport;let o=i.clientWidth,a=i.clientHeight,l=0,r=0;if(s){o=s.width,a=s.height;const e=isWebKit();(!e||e&&"fixed"===t)&&(l=s.offsetLeft,r=s.offsetTop)}const c=getWindowScrollBarX(i);if(c<=0){const e=i.ownerDocument,t=e.body,n=getComputedStyle(t),s="CSS1Compat"===e.compatMode&&parseFloat(n.marginLeft)+parseFloat(n.marginRight)||0,a=Math.abs(i.clientWidth-t.clientWidth-s);a<=25&&(o-=a)}else c<=25&&(o+=c);return{width:o,height:a,x:l,y:r}}function getInnerBoundingClientRect(e,t){const n=getBoundingClientRect(e,!0,"fixed"===t),i=n.top+e.clientTop,s=n.left+e.clientLeft,o=isHTMLElement(e)?getScale(e):createCoords(1);return{width:e.clientWidth*o.x,height:e.clientHeight*o.y,x:s*o.x,y:i*o.y}}function getClientRectFromClippingAncestor(e,t,n){let i;if("viewport"===t)i=getViewportRect(e,n);else if("document"===t)i=getDocumentRect(getDocumentElement(e));else if(isElement(t))i=getInnerBoundingClientRect(t,n);else{const n=getVisualOffsets(e);i={x:t.x-n.x,y:t.y-n.y,width:t.width,height:t.height}}return rectToClientRect(i)}function hasFixedPositionAncestor(e,t){const n=getParentNode(e);return!(n===t||!isElement(n)||isLastTraversableNode(n))&&("fixed"===getComputedStyle$1(n).position||hasFixedPositionAncestor(n,t))}function getClippingElementAncestors(e,t){const n=t.get(e);if(n)return n;let i=getOverflowAncestors(e,[],!1).filter(e=>isElement(e)&&"body"!==getNodeName(e)),s=null;const o="fixed"===getComputedStyle$1(e).position;let a=o?getParentNode(e):e;for(;isElement(a)&&!isLastTraversableNode(a);){const t=getComputedStyle$1(a),n=isContainingBlock(a);n||"fixed"!==t.position||(s=null),(o?!n&&!s:!n&&"static"===t.position&&s&&("absolute"===s.position||"fixed"===s.position)||isOverflowElement(a)&&!n&&hasFixedPositionAncestor(e,a))?i=i.filter(e=>e!==a):s=t,a=getParentNode(a)}return t.set(e,i),i}function getClippingRect(e){let{element:t,boundary:n,rootBoundary:i,strategy:s}=e;const o=[..."clippingAncestors"===n?isTopLayer(t)?[]:getClippingElementAncestors(t,this._c):[].concat(n),i],a=getClientRectFromClippingAncestor(t,o[0],s);let l=a.top,r=a.right,c=a.bottom,d=a.left;for(let e=1;e<o.length;e++){const n=getClientRectFromClippingAncestor(t,o[e],s);l=max(n.top,l),r=min(n.right,r),c=min(n.bottom,c),d=max(n.left,d)}return{width:r-d,height:c-l,x:d,y:l}}function getDimensions(e){const{width:t,height:n}=getCssDimensions(e);return{width:t,height:n}}function getRectRelativeToOffsetParent(e,t,n){const i=isHTMLElement(t),s=getDocumentElement(t),o="fixed"===n,a=getBoundingClientRect(e,!0,o,t);let l={scrollLeft:0,scrollTop:0};const r=createCoords(0);function c(){r.x=getWindowScrollBarX(s)}if(i||!i&&!o)if(("body"!==getNodeName(t)||isOverflowElement(s))&&(l=getNodeScroll(t)),i){const e=getBoundingClientRect(t,!0,o,t);r.x=e.x+t.clientLeft,r.y=e.y+t.clientTop}else s&&c();o&&!i&&s&&c();const d=!s||i||o?createCoords(0):getHTMLOffset(s,l);return{x:a.left+l.scrollLeft-r.x-d.x,y:a.top+l.scrollTop-r.y-d.y,width:a.width,height:a.height}}function isStaticPositioned(e){return"static"===getComputedStyle$1(e).position}function getTrueOffsetParent(e,t){if(!isHTMLElement(e)||"fixed"===getComputedStyle$1(e).position)return null;if(t)return t(e);let n=e.offsetParent;return getDocumentElement(e)===n&&(n=n.ownerDocument.body),n}function getOffsetParent(e,t){const n=getWindow(e);if(isTopLayer(e))return n;if(!isHTMLElement(e)){let t=getParentNode(e);for(;t&&!isLastTraversableNode(t);){if(isElement(t)&&!isStaticPositioned(t))return t;t=getParentNode(t)}return n}let i=getTrueOffsetParent(e,t);for(;i&&isTableElement(i)&&isStaticPositioned(i);)i=getTrueOffsetParent(i,t);return i&&isLastTraversableNode(i)&&isStaticPositioned(i)&&!isContainingBlock(i)?n:i||getContainingBlock(e)||n}const getElementRects=async function(e){const t=this.getOffsetParent||getOffsetParent,n=this.getDimensions,i=await n(e.floating);return{reference:getRectRelativeToOffsetParent(e.reference,await t(e.floating),e.strategy),floating:{x:0,y:0,width:i.width,height:i.height}}};function isRTL(e){return"rtl"===getComputedStyle$1(e).direction}const platform={convertOffsetParentRelativeRectToViewportRelativeRect:convertOffsetParentRelativeRectToViewportRelativeRect,getDocumentElement:getDocumentElement,getClippingRect:getClippingRect,getOffsetParent:getOffsetParent,getElementRects:getElementRects,getClientRects:getClientRects,getDimensions:getDimensions,getScale:getScale,isElement:isElement,isRTL:isRTL};function rectsAreEqual(e,t){return e.x===t.x&&e.y===t.y&&e.width===t.width&&e.height===t.height}function observeMove(e,t){let n,i=null;const s=getDocumentElement(e);function o(){var e;clearTimeout(n),null==(e=i)||e.disconnect(),i=null}return function a(l,r){void 0===l&&(l=!1),void 0===r&&(r=1),o();const c=e.getBoundingClientRect(),{left:d,top:u,width:h,height:_}=c;if(l||t(),!h||!_)return;const m={rootMargin:-floor(u)+"px "+-floor(s.clientWidth-(d+h))+"px "+-floor(s.clientHeight-(u+_))+"px "+-floor(d)+"px",threshold:max(0,min(1,r))||1};let g=!0;function p(t){const i=t[0].intersectionRatio;if(i!==r){if(!g)return a();i?a(!1,i):n=setTimeout(()=>{a(!1,1e-7)},1e3)}1!==i||rectsAreEqual(c,e.getBoundingClientRect())||a(),g=!1}try{i=new IntersectionObserver(p,{...m,root:s.ownerDocument})}catch(e){i=new IntersectionObserver(p,m)}i.observe(e)}(!0),o}function autoUpdate(e,t,n,i){void 0===i&&(i={});const{ancestorScroll:s=!0,ancestorResize:o=!0,elementResize:a="function"==typeof ResizeObserver,layoutShift:l="function"==typeof IntersectionObserver,animationFrame:r=!1}=i,c=unwrapElement(e),d=s||o?[...c?getOverflowAncestors(c):[],...t?getOverflowAncestors(t):[]]:[];d.forEach(e=>{s&&e.addEventListener("scroll",n,{passive:!0}),o&&e.addEventListener("resize",n)});const u=c&&l?observeMove(c,n):null;let h,_=-1,m=null;a&&(m=new ResizeObserver(e=>{let[i]=e;i&&i.target===c&&m&&t&&(m.unobserve(t),cancelAnimationFrame(_),_=requestAnimationFrame(()=>{var e;null==(e=m)||e.observe(t)})),n()}),c&&!r&&m.observe(c),t&&m.observe(t));let g=r?getBoundingClientRect(e):null;return r&&function t(){const i=getBoundingClientRect(e);g&&!rectsAreEqual(g,i)&&n(),g=i,h=requestAnimationFrame(t)}(),n(),()=>{var e;d.forEach(e=>{s&&e.removeEventListener("scroll",n),o&&e.removeEventListener("resize",n)}),null==u||u(),null==(e=m)||e.disconnect(),m=null,r&&cancelAnimationFrame(h)}}const offset=offset$1,shift=shift$1,flip=flip$1,arrow=arrow$1,computePosition=(e,t,n)=>{const i=new Map,s={platform:platform,...n},o={...s.platform,_c:i};return computePosition$1(e,t,{...s,platform:o})},BREAKPOINTS={sm:576,md:768,lg:1024,xl:1280,"2xl":1536},parseResponsivePlacement=(e,t="bottom")=>{if(!e||!e.includes(":"))return null;const n=e.split(/\s+/),i={xs:t};for(const e of n)if(e.includes(":")){const[t,n]=e.split(":");void 0!==BREAKPOINTS[t]&&(i[t]=n)}else i.xs=e;return i},getResponsivePlacement=(e,t="bottom")=>{if(!e)return t;const n=window.innerWidth;let i=e.xs||t;const s=["sm","md","lg","xl","2xl"];for(const t of s)n>=BREAKPOINTS[t]&&e[t]&&(i=e[t]);return i},createBreakpointListeners=e=>{const t=[];for(const n of Object.keys(BREAKPOINTS)){const i=BREAKPOINTS[n],s=window.matchMedia(`(min-width: ${i}px)`);s.addEventListener("change",e),t.push({mql:s,handler:e})}return t},disposeBreakpointListeners=e=>{for(const{mql:t,handler:n}of e)t.removeEventListener("change",n)},NAME$h="menu",DATA_KEY$d="bs.menu",EVENT_KEY$e=".bs.menu",DATA_API_KEY$9=".data-api",ESCAPE_KEY$2="Escape",TAB_KEY$1="Tab",ARROW_UP_KEY$2="ArrowUp",ARROW_DOWN_KEY$2="ArrowDown",ARROW_LEFT_KEY$1="ArrowLeft",ARROW_RIGHT_KEY$1="ArrowRight",HOME_KEY$2="Home",END_KEY$2="End",ENTER_KEY$1="Enter",SPACE_KEY$1=" ",RIGHT_MOUSE_BUTTON=2,SUBMENU_CLOSE_DELAY=100,EVENT_HIDE$5="hide.bs.menu",EVENT_HIDDEN$7="hidden.bs.menu",EVENT_SHOW$6="show.bs.menu",EVENT_SHOWN$5="shown.bs.menu",EVENT_CLICK_DATA_API$5="click.bs.menu.data-api",EVENT_KEYDOWN_DATA_API="keydown.bs.menu.data-api",EVENT_KEYUP_DATA_API="keyup.bs.menu.data-api",CLASS_NAME_SHOW$4="show",SELECTOR_DATA_TOGGLE$8='[data-bs-toggle="menu"]:not(.disabled):not(:disabled)',SELECTOR_MENU$2=".menu",SELECTOR_SUBMENU=".submenu",SELECTOR_SUBMENU_TOGGLE=".submenu > .menu-item",SELECTOR_NAVBAR_NAV=".navbar-nav",SELECTOR_VISIBLE_ITEMS$1=".menu-item:not(.disabled):not(:disabled)",DEFAULT_PLACEMENT="bottom-start",SUBMENU_PLACEMENT="end-start",resolveLogicalPlacement=e=>isRTL$1()?e.replace(/^start(?=-|$)/,"right").replace(/^end(?=-|$)/,"left"):e.replace(/^start(?=-|$)/,"left").replace(/^end(?=-|$)/,"right"),triangleSign=(e,t,n)=>(e.x-n.x)*(t.y-n.y)-(t.x-n.x)*(e.y-n.y),Default$g={autoClose:!0,boundary:"clippingParents",container:!1,display:"dynamic",offset:[0,2],floatingConfig:null,menu:null,placement:"bottom-start",reference:"toggle",strategy:"absolute",submenuTrigger:"both",submenuDelay:100},DefaultType$g={autoClose:"(boolean|string)",boundary:"(string|element)",container:"(string|element|boolean)",display:"string",offset:"(array|string|function)",floatingConfig:"(null|object|function)",menu:"(null|element)",placement:"string",reference:"(string|element|object)",strategy:"string",submenuTrigger:"string",submenuDelay:"number"};class Menu extends BaseComponent{static _openInstances=new Set;constructor(e,t){super(e,t),this._floatingCleanup=null,this._mediaQueryListeners=[],this._responsivePlacements=null,this._parent=this._element.parentNode,this._openSubmenus=new Map,this._submenuCloseTimeouts=new Map,this._hoverIntentData=null,this._menu=this._config.menu||this._findMenu(),!this._config.menu&&this._menu&&(this._parent=this._findWrapper(this._menu)),this._isSubmenu=this._parent.classList?.contains("submenu"),this._menuOriginalParent=this._menu?.parentNode,this._parseResponsivePlacements(),this._setupSubmenuListeners()}static get Default(){return Default$g}static get DefaultType(){return DefaultType$g}static get NAME(){return"menu"}toggle(){return this._isShown()?this.hide():this.show()}show(){if(isDisabled(this._element)||this._isShown())return;const e={relatedTarget:this._element};if(!EventHandler.trigger(this._element,EVENT_SHOW$6,e).defaultPrevented){if(this._moveMenuToContainer(),this._createFloating(),"ontouchstart"in document.documentElement&&!this._parent.closest(".navbar-nav"))for(const e of document.body.children)EventHandler.on(e,"mouseover",noop);this._element.focus({focusVisible:!1}),this._element.setAttribute("aria-expanded","true"),this._menu.classList.add("show"),this._element.classList.add("show"),this._parent&&this._parent.classList.add("show"),Menu._openInstances.add(this),EventHandler.trigger(this._element,EVENT_SHOWN$5,e)}}hide(){if(isDisabled(this._element)||!this._isShown())return;const e={relatedTarget:this._element};this._completeHide(e)}dispose(){this._disposeFloating(),this._restoreMenuToOriginalParent(),this._disposeMediaQueryListeners(),this._closeAllSubmenus(),this._clearAllSubmenuTimeouts(),Menu._openInstances.delete(this),super.dispose()}update(){this._floatingCleanup&&this._updateFloatingPosition()}_findMenu(){const e=SelectorEngine.closest(this._element,":has(.menu)");return SelectorEngine.next(this._element,".menu")[0]||SelectorEngine.prev(this._element,".menu")[0]||SelectorEngine.findOne(".menu",e||this._parent)}_findWrapper(e){let t=this._element.parentNode;for(;t instanceof Element&&!t.contains(e);)t=t.parentNode;return t instanceof Element?t:this._element.parentNode}_completeHide(e){if(!EventHandler.trigger(this._element,EVENT_HIDE$5,e).defaultPrevented){if(this._closeAllSubmenus(),"ontouchstart"in document.documentElement)for(const e of document.body.children)EventHandler.off(e,"mouseover",noop);this._disposeFloating(),this._restoreMenuToOriginalParent(),this._menu.classList.remove("show"),this._element.classList.remove("show"),this._parent&&this._parent.classList.remove("show"),this._element.setAttribute("aria-expanded","false"),Manipulator.removeDataAttribute(this._menu,"placement"),Manipulator.removeDataAttribute(this._menu,"display"),Menu._openInstances.delete(this),EventHandler.trigger(this._element,EVENT_HIDDEN$7,e)}}_getConfig(e){if("object"==typeof(e=super._getConfig(e)).reference&&!isElement$1(e.reference)&&"function"!=typeof e.reference.getBoundingClientRect)throw new TypeError(`${"menu".toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`);return e}_createFloating(){if("static"===this._config.display)return void Manipulator.setDataAttribute(this._menu,"display","static");let e=this._element;"parent"===this._config.reference?e=this._parent:isElement$1(this._config.reference)?e=getElement(this._config.reference):"object"==typeof this._config.reference&&(e=this._config.reference),this._updateFloatingPosition(e),this._floatingCleanup=autoUpdate(e,this._menu,()=>this._updateFloatingPosition(e))}async _updateFloatingPosition(e=null){if(!this._menu)return;e||(e="parent"===this._config.reference?this._parent:isElement$1(this._config.reference)?getElement(this._config.reference):"object"==typeof this._config.reference?this._config.reference:this._element);const t=this._getPlacement(),n=this._getFloatingMiddleware(),i=this._getFloatingConfig(t,n);await this._applyFloatingPosition(e,this._menu,i.placement,i.middleware,i.strategy)}_isShown(){return this._menu.classList.contains("show")}_getPlacement(){const e=this._responsivePlacements?getResponsivePlacement(this._responsivePlacements,"bottom-start"):this._config.placement;return resolveLogicalPlacement(e)}_parseResponsivePlacements(){this._responsivePlacements=parseResponsivePlacement(this._config.placement,"bottom-start"),this._responsivePlacements&&this._setupMediaQueryListeners()}_setupMediaQueryListeners(){this._disposeMediaQueryListeners(),this._mediaQueryListeners=createBreakpointListeners(()=>{this._isShown()&&this._updateFloatingPosition()})}_disposeMediaQueryListeners(){disposeBreakpointListeners(this._mediaQueryListeners),this._mediaQueryListeners=[]}_getOffset(){const{offset:e}=this._config;return"string"==typeof e?e.split(",").map(e=>Number.parseInt(e,10)):"function"==typeof e?({placement:t,rects:n})=>e({placement:t,reference:n.reference,floating:n.floating},this._element):e}_getFloatingMiddleware(){const e=this._getOffset();return[offset("function"==typeof e?e:{mainAxis:e[1]||0,crossAxis:e[0]||0}),flip({fallbackPlacements:this._getFallbackPlacements()}),shift({boundary:"clippingParents"===this._config.boundary?"clippingAncestors":this._config.boundary})]}_getFallbackPlacements(){return{bottom:["top","bottom-start","bottom-end","top-start","top-end"],"bottom-start":["top-start","bottom-end","top-end"],"bottom-end":["top-end","bottom-start","top-start"],top:["bottom","top-start","top-end","bottom-start","bottom-end"],"top-start":["bottom-start","top-end","bottom-end"],"top-end":["bottom-end","top-start","bottom-start"],right:["left","right-start","right-end","left-start","left-end"],"right-start":["left-start","right-end","left-end","top-start","bottom-start"],"right-end":["left-end","right-start","left-start","top-end","bottom-end"],left:["right","left-start","left-end","right-start","right-end"],"left-start":["right-start","left-end","right-end","top-start","bottom-start"],"left-end":["right-end","left-start","right-start","top-end","bottom-end"]}[this._getPlacement()]||["top","bottom","right","left"]}_getFloatingConfig(e,t){const n={placement:e,middleware:t,strategy:this._config.strategy};return{...n,...execute(this._config.floatingConfig,[void 0,n])}}_disposeFloating(){this._floatingCleanup&&(this._floatingCleanup(),this._floatingCleanup=null)}_getContainer(){const{container:e}=this._config;return!1===e?null:!0===e?document.body:getElement(e)}_moveMenuToContainer(){const e=this._getContainer();e&&this._menu&&this._menu.parentNode!==e&&e.append(this._menu)}_restoreMenuToOriginalParent(){this._menuOriginalParent&&this._menu&&this._menu.parentNode!==this._menuOriginalParent&&this._menuOriginalParent.append(this._menu)}async _applyFloatingPosition(e,t,n,i,s="absolute"){if(!t.isConnected)return null;const{x:o,y:a,placement:l}=await computePosition(e,t,{placement:n,middleware:i,strategy:s});return t.isConnected?(Object.assign(t.style,{position:s,left:`${o}px`,top:`${a}px`,margin:"0"}),Manipulator.setDataAttribute(t,"placement",l),l):null}_setupSubmenuListeners(){"hover"!==this._config.submenuTrigger&&"both"!==this._config.submenuTrigger||(EventHandler.on(this._menu,"mouseenter",".submenu > .menu-item",e=>{this._onSubmenuTriggerEnter(e)}),EventHandler.on(this._menu,"mouseleave",".submenu",e=>{this._onSubmenuLeave(e)}),EventHandler.on(this._menu,"mousemove",e=>{this._trackMousePosition(e)})),"click"!==this._config.submenuTrigger&&"both"!==this._config.submenuTrigger||EventHandler.on(this._menu,"click",".submenu > .menu-item",e=>{this._onSubmenuTriggerClick(e)})}_onSubmenuTriggerEnter(e){const t=e.target.closest(".submenu > .menu-item");if(!t)return;const n=t.closest(".submenu"),i=SelectorEngine.findOne(".menu",n);i&&(this._cancelSubmenuCloseTimeout(i),this._closeSiblingSubmenus(n),this._openSubmenu(t,i,n))}_onSubmenuLeave(e){const t=e.target.closest(".submenu"),n=SelectorEngine.findOne(".menu",t);n&&this._openSubmenus.has(n)&&(this._isMovingTowardSubmenu(e,n)||this._scheduleSubmenuClose(n,t))}_onSubmenuTriggerClick(e){const t=e.target.closest(".submenu > .menu-item");if(!t)return;e.preventDefault(),e.stopPropagation();const n=t.closest(".submenu"),i=SelectorEngine.findOne(".menu",n);i&&(this._openSubmenus.has(i)?this._closeSubmenu(i,n):(this._closeSiblingSubmenus(n),this._openSubmenu(t,i,n)))}_openSubmenu(e,t,n){if(this._openSubmenus.has(t))return;e.setAttribute("aria-expanded","true"),e.setAttribute("aria-haspopup","true"),t.style.opacity="0",t.classList.add("show"),n.classList.add("show");const i=this._createSubmenuFloating(e,t,n);this._openSubmenus.set(t,i),EventHandler.on(t,"mouseenter",()=>{this._cancelSubmenuCloseTimeout(t)})}_closeSubmenu(e,t){if(!this._openSubmenus.has(e))return;const n=SelectorEngine.find(".submenu .menu.show",e);for(const e of n){const t=e.closest(".submenu");this._closeSubmenu(e,t)}const i=SelectorEngine.findOne(".submenu > .menu-item",t),s=this._openSubmenus.get(e);s&&s(),this._openSubmenus.delete(e),EventHandler.off(e,"mouseenter"),i&&i.setAttribute("aria-expanded","false"),e.classList.remove("show"),t.classList.remove("show"),e.style.opacity=""}_closeAllSubmenus(){for(const[e]of this._openSubmenus){const t=e.closest(".submenu");this._closeSubmenu(e,t)}}_closeSiblingSubmenus(e){const t=e.parentNode,n=SelectorEngine.find(".submenu > .menu.show",t);for(const t of n){const n=t.closest(".submenu");n!==e&&this._closeSubmenu(t,n)}}_createSubmenuFloating(e,t,n){const i=n,s=resolveLogicalPlacement("end-start"),o=[offset({mainAxis:0,crossAxis:-4}),flip({fallbackPlacements:[resolveLogicalPlacement("start-start"),resolveLogicalPlacement("end-end"),resolveLogicalPlacement("start-end")]}),shift({padding:8})],a=()=>this._applyFloatingPosition(i,t,s,o).then(e=>(t.style.opacity="",e));return a(),autoUpdate(i,t,a)}_scheduleSubmenuClose(e,t){this._cancelSubmenuCloseTimeout(e);const n=setTimeout(()=>{this._closeSubmenu(e,t),this._submenuCloseTimeouts.delete(e)},this._config.submenuDelay);this._submenuCloseTimeouts.set(e,n)}_cancelSubmenuCloseTimeout(e){const t=this._submenuCloseTimeouts.get(e);t&&(clearTimeout(t),this._submenuCloseTimeouts.delete(e))}_clearAllSubmenuTimeouts(){for(const e of this._submenuCloseTimeouts.values())clearTimeout(e);this._submenuCloseTimeouts.clear()}_trackMousePosition(e){this._hoverIntentData={x:e.clientX,y:e.clientY,timestamp:Date.now()}}_isMovingTowardSubmenu(e,t){if(!this._hoverIntentData)return!1;const n=t.getBoundingClientRect(),i={x:e.clientX,y:e.clientY},s={x:this._hoverIntentData.x,y:this._hoverIntentData.y},o=isRTL$1()?n.right:n.left,a={x:o,y:n.top},l={x:o,y:n.bottom};return this._pointInTriangle(i,s,a,l)}_pointInTriangle(e,t,n,i){const s=triangleSign(e,t,n),o=triangleSign(e,n,i),a=triangleSign(e,i,t);return!((s<0||o<0||a<0)&&(s>0||o>0||a>0))}_selectMenuItem({key:e,target:t}){const n=t.closest(".menu")||this._menu,i=SelectorEngine.find(`:scope > ${SELECTOR_VISIBLE_ITEMS$1}`,n).filter(e=>isVisible(e));i.length&&getNextActiveElement(i,t,e===ARROW_DOWN_KEY$2,!i.includes(t)).focus()}_handleSubmenuKeydown(e){const{key:t,target:n}=e,i=isRTL$1(),s=i?ARROW_LEFT_KEY$1:ARROW_RIGHT_KEY$1,o=i?ARROW_RIGHT_KEY$1:ARROW_LEFT_KEY$1,a=n.closest(".submenu"),l=a&&n.matches(".submenu > .menu-item");if((t===ENTER_KEY$1||t===SPACE_KEY$1)&&l){e.preventDefault(),e.stopPropagation();const t=SelectorEngine.findOne(".menu",a);return t&&(this._closeSiblingSubmenus(a),this._openSubmenu(n,t,a),requestAnimationFrame(()=>{const e=SelectorEngine.findOne(SELECTOR_VISIBLE_ITEMS$1,t);e&&e.focus()})),!0}if(t===s&&l){e.preventDefault(),e.stopPropagation();const t=SelectorEngine.findOne(".menu",a);return t&&(this._closeSiblingSubmenus(a),this._openSubmenu(n,t,a),requestAnimationFrame(()=>{const e=SelectorEngine.findOne(SELECTOR_VISIBLE_ITEMS$1,t);e&&e.focus()})),!0}if(t===o){const t=n.closest(".menu"),i=t?.closest(".submenu");if(i){e.preventDefault(),e.stopPropagation();const n=SelectorEngine.findOne(".submenu > .menu-item",i);return this._closeSubmenu(t,i),n&&n.focus(),!0}}if(t===HOME_KEY$2||t===END_KEY$2){e.preventDefault(),e.stopPropagation();const i=n.closest(".menu"),s=SelectorEngine.find(`:scope > ${SELECTOR_VISIBLE_ITEMS$1}`,i).filter(e=>isVisible(e));return s.length&&(t===HOME_KEY$2?s[0]:s.at(-1)).focus(),!0}return!1}static clearMenus(e){if(2!==e.button&&("keyup"!==e.type||"Tab"===e.key))for(const t of Menu._openInstances){if(!1===t._config.autoClose)continue;const n=e.composedPath(),i=n.includes(t._menu);if(n.includes(t._element)||"inside"===t._config.autoClose&&!i||"outside"===t._config.autoClose&&i)continue;const s=e.target.closest?.("form"),o=Boolean(s)&&t._menu.contains(s);if(t._menu.contains(e.target)&&("keyup"===e.type&&"Tab"===e.key||/input|select|option|textarea|form/i.test(e.target.tagName)||o))continue;const a={relatedTarget:t._element};"click"===e.type&&(a.clickEvent=e),t._completeHide(a)}}static dataApiKeydownHandler(e){const t=/input|textarea/i.test(e.target.tagName)||e.target.isContentEditable,n="Escape"===e.key,i=[ARROW_UP_KEY$2,ARROW_DOWN_KEY$2].includes(e.key),s=[ARROW_LEFT_KEY$1,ARROW_RIGHT_KEY$1].includes(e.key),o=[HOME_KEY$2,END_KEY$2].includes(e.key),a=[ENTER_KEY$1,SPACE_KEY$1].includes(e.key),l=e.target.matches(".submenu > .menu-item");if(!(i||n||s||o||a&&l))return;if(t&&!n)return;const r=this.matches(SELECTOR_DATA_TOGGLE$8)?this:SelectorEngine.prev(this,SELECTOR_DATA_TOGGLE$8)[0]||SelectorEngine.next(this,SELECTOR_DATA_TOGGLE$8)[0]||SelectorEngine.findOne(SELECTOR_DATA_TOGGLE$8,e.delegateTarget.parentNode);if(!r)return;const c=Menu.getOrCreateInstance(r);if(!(s||o||a&&l)||!c._handleSubmenuKeydown(e)){if(i)return e.preventDefault(),e.stopPropagation(),c.show(),void c._selectMenuItem(e);if(n&&c._isShown()){e.preventDefault(),e.stopPropagation();const t=e.target.closest(".menu"),n=t?.closest(".submenu");if(n&&c._openSubmenus.size>0){const e=SelectorEngine.findOne(".submenu > .menu-item",n);return c._closeSubmenu(t,n),void(e&&e.focus())}c.hide(),r.focus()}}}}EventHandler.on(document,EVENT_KEYDOWN_DATA_API,SELECTOR_DATA_TOGGLE$8,Menu.dataApiKeydownHandler),EventHandler.on(document,EVENT_KEYDOWN_DATA_API,".menu",Menu.dataApiKeydownHandler),EventHandler.on(document,EVENT_CLICK_DATA_API$5,Menu.clearMenus),EventHandler.on(document,EVENT_KEYUP_DATA_API,Menu.clearMenus),EventHandler.on(document,EVENT_CLICK_DATA_API$5,SELECTOR_DATA_TOGGLE$8,function(e){e.preventDefault(),Menu.getOrCreateInstance(this).toggle()});const NAME$g="combobox",DATA_KEY$c="bs.combobox",EVENT_KEY$d=`.${DATA_KEY$c}`,DATA_API_KEY$8=".data-api",ESCAPE_KEY$1="Escape",TAB_KEY="Tab",ARROW_UP_KEY$1="ArrowUp",ARROW_DOWN_KEY$1="ArrowDown",HOME_KEY$1="Home",END_KEY$1="End",ENTER_KEY="Enter",SPACE_KEY=" ",EVENT_CHANGE$3=`change${EVENT_KEY$d}`,EVENT_SHOW$5=`show${EVENT_KEY$d}`,EVENT_SHOWN$4=`shown${EVENT_KEY$d}`,EVENT_HIDE$4=`hide${EVENT_KEY$d}`,EVENT_HIDDEN$6=`hidden${EVENT_KEY$d}`,EVENT_CLICK_DATA_API$4=`click${EVENT_KEY$d}.data-api`,CLASS_NAME_SHOW$3="show",CLASS_NAME_SELECTED="selected",CLASS_NAME_PLACEHOLDER="combobox-placeholder",SELECTOR_DATA_TOGGLE$7='[data-bs-toggle="combobox"]',SELECTOR_MENU$1=".menu",SELECTOR_MENU_ITEM=".menu-item[data-bs-value]",SELECTOR_VISIBLE_ITEMS=".menu-item[data-bs-value]:not(.disabled):not(:disabled)",SELECTOR_VALUE=".combobox-value",SELECTOR_SEARCH_INPUT=".combobox-search-input",SELECTOR_NO_RESULTS=".combobox-no-results",Default$f={boundary:"clippingParents",multiple:!1,name:null,offset:[0,2],placeholder:"",placement:"bottom-start",search:!1,searchNormalize:!1},DefaultType$f={boundary:"(string|element)",multiple:"boolean",name:"(string|null)",offset:"(array|string|function)",placeholder:"string",placement:"string",search:"boolean",searchNormalize:"boolean"};class Combobox extends BaseComponent{constructor(e,t){super(e,t),this._toggle=this._element,this._menu=SelectorEngine.next(this._toggle,".menu")[0],this._valueDisplay=SelectorEngine.findOne(SELECTOR_VALUE,this._toggle),this._searchInput=SelectorEngine.findOne(SELECTOR_SEARCH_INPUT,this._menu),this._noResults=SelectorEngine.findOne(SELECTOR_NO_RESULTS,this._menu),this._hiddenInput=null,this._menuInstance=null,this._createHiddenInput(),this._createMenuInstance(),this._syncInitialSelection(),this._addEventListeners()}static get Default(){return Default$f}static get DefaultType(){return DefaultType$f}static get NAME(){return NAME$g}toggle(){return this._isShown()?this.hide():this.show()}show(){isDisabled(this._toggle)||this._isShown()||EventHandler.trigger(this._toggle,EVENT_SHOW$5).defaultPrevented||(this._menuInstance.show(),this._searchInput&&(this._searchInput.value="",this._filterItems(""),requestAnimationFrame(()=>this._searchInput.focus())),EventHandler.trigger(this._toggle,EVENT_SHOWN$4))}hide(){this._isShown()&&(EventHandler.trigger(this._toggle,EVENT_HIDE$4).defaultPrevented||(this._menuInstance.hide(),EventHandler.trigger(this._toggle,EVENT_HIDDEN$6)))}dispose(){this._menuInstance&&(this._menuInstance.dispose(),this._menuInstance=null),this._hiddenInput&&(this._hiddenInput.remove(),this._hiddenInput=null),EventHandler.off(this._menu,EVENT_KEY$d),EventHandler.off(this._toggle,EVENT_KEY$d),super.dispose()}_isShown(){return this._menu.classList.contains("show")}_createHiddenInput(){const{name:e}=this._config;e&&(this._hiddenInput=document.createElement("input"),this._hiddenInput.type="hidden",this._hiddenInput.name=e,this._hiddenInput.value="",this._toggle.parentNode.insertBefore(this._hiddenInput,this._toggle))}_createMenuInstance(){this._menuInstance=new Menu(this._toggle,{menu:this._menu,autoClose:!this._config.multiple||"outside",boundary:this._config.boundary,offset:this._config.offset,placement:this._config.placement})}_syncInitialSelection(){this._getSelectedItems().length>0?(this._updateToggleText(),this._updateHiddenInput()):this._showPlaceholder()}_addEventListeners(){EventHandler.on(this._menu,"click",SELECTOR_MENU_ITEM,e=>{const t=e.target.closest(SELECTOR_MENU_ITEM);t&&!isDisabled(t)&&(e.preventDefault(),e.stopPropagation(),this._selectItem(t))}),EventHandler.on(this._toggle,"keydown",e=>{this._handleToggleKeydown(e)}),EventHandler.on(this._menu,"keydown",e=>{this._handleMenuKeydown(e)}),this._searchInput&&(EventHandler.on(this._searchInput,"input",()=>{this._filterItems(this._searchInput.value)}),EventHandler.on(this._searchInput,"keydown",e=>{if("ArrowDown"===e.key){e.preventDefault();const t=this._getVisibleItems();t.length>0&&t[0].focus()}"Escape"===e.key&&(this.hide(),this._toggle.focus())}))}_selectItem(e){if(this._config.multiple)e.classList.toggle("selected"),e.setAttribute("aria-selected",e.classList.contains("selected"));else{const t=SelectorEngine.find(".selected",this._menu);for(const e of t)e.classList.remove("selected"),e.setAttribute("aria-selected","false");e.classList.add("selected"),e.setAttribute("aria-selected","true")}this._updateToggleText(),this._updateHiddenInput();const t=this._config.multiple?this._getSelectedItems().map(e=>e.dataset.bsValue):e.dataset.bsValue;EventHandler.trigger(this._toggle,EVENT_CHANGE$3,{value:t,item:e}),this._config.multiple||(this.hide(),this._toggle.focus())}_updateToggleText(){const e=this._getSelectedItems();if(0!==e.length)if(this._valueDisplay.classList.remove("combobox-placeholder"),this._config.multiple&&e.length>1)this._valueDisplay.textContent=`${e.length} selected`;else{const t=e[0],n=SelectorEngine.findOne(".menu-item-content > span:first-child",t);this._valueDisplay.textContent=n?n.textContent:t.textContent.trim()}else this._showPlaceholder()}_showPlaceholder(){const{placeholder:e}=this._config;e&&(this._valueDisplay.textContent=e,this._valueDisplay.classList.add("combobox-placeholder"))}_updateHiddenInput(){if(!this._hiddenInput)return;const e=this._getSelectedItems().map(e=>e.dataset.bsValue);this._hiddenInput.value=this._config.multiple?e.join(","):e[0]||""}_getSelectedItems(){return SelectorEngine.find(".selected",this._menu)}_getVisibleItems(){return SelectorEngine.find(SELECTOR_VISIBLE_ITEMS,this._menu).filter(e=>isVisible(e))}_filterItems(e){const t=this._normalizeText(e.toLowerCase().trim()),n=SelectorEngine.find(SELECTOR_MENU_ITEM,this._menu);let i=0;for(const e of n){const n=this._normalizeText(e.textContent.toLowerCase().trim()),s=!t||n.includes(t);e.style.display=s?"":"none",s&&i++}this._noResults&&this._noResults.classList.toggle("d-none",i>0)}_normalizeText(e){return this._config.searchNormalize?e.normalize("NFD").replace(/[\u0300-\u036F]/g,""):e}_handleToggleKeydown(e){const{key:t}=e;if("ArrowDown"===t||"ArrowUp"===t){e.preventDefault(),this._isShown()||this.show();const n=this._getVisibleItems();return void(n.length>0&&("ArrowDown"===t?n[0]:n.at(-1)).focus())}"Enter"!==t&&" "!==t||this._isShown()||(e.preventDefault(),this.show())}_handleMenuKeydown(e){const{key:t,target:n}=e;if("Escape"===t)return e.preventDefault(),e.stopPropagation(),this.hide(),void this._toggle.focus();if("Tab"===t)return void this.hide();const i=n.matches("input");if("ArrowDown"===t||"ArrowUp"===t){e.preventDefault();const i=this._getVisibleItems();return void(i.length>0&&getNextActiveElement(i,n,"ArrowDown"===t,!i.includes(n)).focus())}if("Home"===t||"End"===t){e.preventDefault();const n=this._getVisibleItems();return void(n.length>0&&("Home"===t?n[0]:n.at(-1)).focus())}if(("Enter"===t||" "===t)&&!i){e.preventDefault();const t=n.closest(SELECTOR_MENU_ITEM);t&&!isDisabled(t)&&this._selectItem(t)}}static jQueryInterface(e){return this.each(function(){const t=Combobox.getOrCreateInstance(this,e);if("string"==typeof e){if(void 0===t[e])throw new TypeError(`No method named "${e}"`);t[e]()}})}}EventHandler.on(document,EVENT_CLICK_DATA_API$4,SELECTOR_DATA_TOGGLE$7,function(e){e.preventDefault(),Combobox.getOrCreateInstance(this).toggle()}),EventHandler.on(document,"DOMContentLoaded",()=>{for(const e of SelectorEngine.find(SELECTOR_DATA_TOGGLE$7))Combobox.getOrCreateInstance(e)});
+/*! name: vanilla-calendar-pro v3.1.0 | url: https://github.com/uvarov-frontend/vanilla-calendar-pro */
+var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,n)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,__spreadValues=(e,t)=>{for(var n in t||(t={}))__hasOwnProp.call(t,n)&&__defNormalProp(e,n,t[n]);if(__getOwnPropSymbols)for(var n of __getOwnPropSymbols(t))__propIsEnum.call(t,n)&&__defNormalProp(e,n,t[n]);return e},__spreadProps=(e,t)=>__defProps(e,__getOwnPropDescs(t)),__publicField=(e,t,n)=>(__defNormalProp(e,"symbol"!=typeof t?t+"":t,n),n);const errorMessages={notFoundSelector:e=>`${e} is not found, check the first argument passed to new Calendar.`,notInit:'The calendar has not been initialized, please initialize it using the "init()" method first.',notLocale:"You specified an incorrect language label or did not specify the required number of values ​​for «locale.weekdays» or «locale.months».",incorrectTime:"The value of the time property can be: false, 12 or 24.",incorrectMonthsCount:"For the «multiple» calendar type, the «displayMonthsCount» parameter can have a value from 2 to 12, and for all others it cannot be greater than 1."},setContext=(e,t,n)=>{e.context[t]=n},destroy=e=>{var t,n,i,s,o;if(!e.context.isInit)throw new Error(errorMessages.notInit);e.inputMode?(null==(t=e.context.mainElement.parentElement)||t.removeChild(e.context.mainElement),null==(i=null==(n=e.context.inputElement)?void 0:n.replaceWith)||i.call(n,e.context.originalElement),setContext(e,"inputElement",void 0)):null==(o=(s=e.context.mainElement).replaceWith)||o.call(s,e.context.originalElement),setContext(e,"mainElement",e.context.originalElement),e.onDestroy&&e.onDestroy(e)},skipOpenOnFocus=new WeakSet,shouldSkipOpenOnFocus=e=>skipOpenOnFocus.has(e),setSkipOpenOnFocus=e=>{skipOpenOnFocus.add(e)},clearSkipOpenOnFocus=e=>{skipOpenOnFocus.delete(e)},PREV_TABINDEX_ATTR="data-vc-prev-tabindex",isFocusable=e=>e.tabIndex>=0&&!e.hasAttribute("disabled")&&"true"!==e.getAttribute("aria-disabled"),storePrevTabIndex=e=>{if(e.hasAttribute(PREV_TABINDEX_ATTR))return;const t=e.getAttribute("tabindex");e.setAttribute(PREV_TABINDEX_ATTR,null!=t?t:"")},restorePrevTabIndex=e=>{if(!e.hasAttribute(PREV_TABINDEX_ATTR))return;const t=e.getAttribute(PREV_TABINDEX_ATTR);""===t||null===t?e.removeAttribute("tabindex"):e.setAttribute("tabindex",t),e.removeAttribute(PREV_TABINDEX_ATTR)},disableTabbing=e=>{isFocusable(e)&&(storePrevTabIndex(e),e.tabIndex=-1);const t=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:e=>isFocusable(e)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP});for(;t.nextNode();){const e=t.currentNode;storePrevTabIndex(e),e.tabIndex=-1}},restoreTabbing=e=>{restorePrevTabIndex(e),e.querySelectorAll(`[${PREV_TABINDEX_ATTR}]`).forEach(restorePrevTabIndex)},hide=e=>{e.context.isShowInInputMode&&e.context.currentType&&(e.context.mainElement.dataset.vcCalendarHidden="",setContext(e,"isShowInInputMode",!1),e.inputMode&&disableTabbing(e.context.mainElement),e.context.cleanupHandlers[0]&&(e.context.cleanupHandlers.forEach(e=>e()),setContext(e,"cleanupHandlers",[])),e.inputMode&&e.context.inputElement&&e.context.mainElement.contains(document.activeElement)&&(("function"==typeof e.openOnFocus||!0===e.openOnFocus)&&setSkipOpenOnFocus(e),e.context.inputElement.focus()),e.onHide&&e.onHide(e))};function getOffset(e){if(!e||!e.getBoundingClientRect)return{top:0,bottom:0,left:0,right:0};const t=e.getBoundingClientRect(),n=document.documentElement;return{bottom:t.bottom,right:t.right,top:t.top+window.scrollY-n.clientTop,left:t.left+window.scrollX-n.clientLeft}}function getViewportDimensions(){return{vw:Math.max(document.documentElement.clientWidth||0,window.innerWidth||0),vh:Math.max(document.documentElement.clientHeight||0,window.innerHeight||0)}}function getWindowScrollPosition(){return{left:window.scrollX||document.documentElement.scrollLeft||0,top:window.scrollY||document.documentElement.scrollTop||0}}function calculateAvailableSpace(e){const{top:t,left:n}=getWindowScrollPosition(),{top:i,left:s}=getOffset(e),{vh:o,vw:a}=getViewportDimensions(),l=i-t,r=s-n;return{top:l,bottom:o-(l+e.clientHeight),left:r,right:a-(r+e.clientWidth)}}function getAvailablePosition(e,t,n=5){const i={top:!0,bottom:!0,left:!0,right:!0},s=[];if(!t||!e)return{canShow:i,parentPositions:s};const{bottom:o,top:a}=calculateAvailableSpace(e),{top:l,left:r}=getOffset(e),{height:c,width:d}=t.getBoundingClientRect(),{vh:u,vw:h}=getViewportDimensions(),_=h/2,m=u/2;return[{condition:l<m,position:"top"},{condition:l>m,position:"bottom"},{condition:r<_,position:"left"},{condition:r>_,position:"right"}].forEach(({condition:e,position:t})=>{e&&s.push(t)}),Object.assign(i,{top:c<=a-n,bottom:c<=o-n,left:d<=r,right:d<=h-r}),{canShow:i,parentPositions:s}}const handleDay=(e,t,n,i)=>{var s;const o=i.querySelector(`[data-vc-date="${t}"]`),a=null==o?void 0:o.querySelector("[data-vc-date-btn]");if(!o||!a)return;if((null==n?void 0:n.modifier)&&a.classList.add(...n.modifier.trim().split(" ")),!(null==n?void 0:n.html))return;const l=document.createElement("div");l.className=e.styles.datePopup,l.dataset.vcDatePopup="",l.innerHTML=e.sanitizerHTML(n.html),a.ariaExpanded="true",a.ariaLabel=`${a.ariaLabel}, ${null==(s=null==l?void 0:l.textContent)?void 0:s.replace(/^\s+|\s+(?=\s)|\s+$/g,"").replace(/&nbsp;/g," ")}`,o.appendChild(l),requestAnimationFrame(()=>{if(!l)return;const{canShow:e}=getAvailablePosition(o,l),t=e.bottom?o.offsetHeight:-l.offsetHeight,n=e.left&&!e.right?o.offsetWidth-l.offsetWidth/2:!e.left&&e.right?l.offsetWidth/2:0;Object.assign(l.style,{left:`${n}px`,top:`${t}px`})})},createDatePopup=(e,t)=>{var n;e.popups&&(null==(n=Object.entries(e.popups))||n.forEach(([n,i])=>handleDay(e,n,i,t)))},getDate=e=>new Date(`${e}T00:00:00`),getDateString=e=>`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`,parseDates=e=>e.reduce((e,t)=>{if(t instanceof Date||"number"==typeof t){const n=t instanceof Date?t:new Date(t);e.push(n.toISOString().substring(0,10))}else t.match(/^(\d{4}-\d{2}-\d{2})$/g)?e.push(t):t.replace(/(\d{4}-\d{2}-\d{2}).*?(\d{4}-\d{2}-\d{2})/g,(t,n,i)=>{const s=getDate(n),o=getDate(i),a=new Date(s.getTime());for(;a<=o;a.setDate(a.getDate()+1))e.push(getDateString(a));return t});return e},[]),updateAttribute=(e,t,n,i="")=>{t?e.setAttribute(n,i):e.getAttribute(n)===i&&e.removeAttribute(n)},setDateModifier=(e,t,n,i,s,o,a)=>{var l,r,c,d;const u=getDate(e.context.displayDateMin)>getDate(o)||getDate(e.context.displayDateMax)<getDate(o)||(null==(l=e.context.disableDates)?void 0:l.includes(o))||!e.selectionMonthsMode&&"current"!==a||!e.selectionYearsMode&&getDate(o).getFullYear()!==t;updateAttribute(n,u,"data-vc-date-disabled"),i&&updateAttribute(i,u,"aria-disabled","true"),i&&updateAttribute(i,u,"tabindex","-1"),updateAttribute(n,!e.disableToday&&e.context.dateToday===o,"data-vc-date-today"),updateAttribute(n,!e.disableToday&&e.context.dateToday===o,"aria-current","date"),updateAttribute(n,null==(r=e.selectedWeekends)?void 0:r.includes(s),"data-vc-date-weekend");const h=(null==(c=e.selectedHolidays)?void 0:c[0])?parseDates(e.selectedHolidays):[];if(updateAttribute(n,h.includes(o),"data-vc-date-holiday"),(null==(d=e.context.selectedDates)?void 0:d.includes(o))?(n.setAttribute("data-vc-date-selected",""),i&&i.setAttribute("aria-selected","true"),e.context.selectedDates.length>1&&"multiple-ranged"===e.selectionDatesMode&&(e.context.selectedDates[0]===o&&e.context.selectedDates[e.context.selectedDates.length-1]===o?n.setAttribute("data-vc-date-selected","first-and-last"):e.context.selectedDates[0]===o?n.setAttribute("data-vc-date-selected","first"):e.context.selectedDates[e.context.selectedDates.length-1]===o&&n.setAttribute("data-vc-date-selected","last"),e.context.selectedDates[0]!==o&&e.context.selectedDates[e.context.selectedDates.length-1]!==o&&n.setAttribute("data-vc-date-selected","middle"))):n.hasAttribute("data-vc-date-selected")&&(n.removeAttribute("data-vc-date-selected"),i&&i.removeAttribute("aria-selected")),!e.context.disableDates.includes(o)&&e.enableEdgeDatesOnly&&e.context.selectedDates.length>1&&"multiple-ranged"===e.selectionDatesMode){const t=getDate(e.context.selectedDates[0]),i=getDate(e.context.selectedDates[e.context.selectedDates.length-1]),s=getDate(o);updateAttribute(n,s>t&&s<i,"data-vc-date-selected","middle")}},getLocaleString=(e,t,n)=>new Date(`${e}T00:00:00.000Z`).toLocaleString(t,n),getWeekNumber=(e,t)=>{const n=getDate(e),i=(n.getDay()-t+7)%7;n.setDate(n.getDate()+4-i);const s=new Date(n.getFullYear(),0,1),o=Math.ceil(((+n-+s)/864e5+1)/7);return{year:n.getFullYear(),week:o}},addWeekNumberForDate=(e,t,n)=>{const i=getWeekNumber(n,e.firstWeekday);i&&(t.dataset.vcDateWeekNumber=String(i.week))},setDaysAsDisabled=(e,t,n)=>{var i,s,o,a,l;const r=null==(i=e.disableWeekdays)?void 0:i.includes(n),c=e.disableAllDates&&!!(null==(s=e.context.enableDates)?void 0:s[0]);!r&&!c||(null==(o=e.context.enableDates)?void 0:o.includes(t))||(null==(a=e.context.disableDates)?void 0:a.includes(t))||(e.context.disableDates.push(t),null==(l=e.context.disableDates)||l.sort((e,t)=>+new Date(e)-+new Date(t)))},createDate=(e,t,n,i,s,o)=>{const a=getDate(s).getDay(),l="string"==typeof e.locale&&e.locale.length?e.locale:"en",r=document.createElement("div");let c;r.className=e.styles.date,r.dataset.vcDate=s,r.dataset.vcDateMonth=o,r.dataset.vcDateWeekDay=String(a),r.role="gridcell",("current"===o||e.displayDatesOutside)&&(c=document.createElement("button"),c.className=e.styles.dateBtn,c.type="button",c.ariaLabel=getLocaleString(s,l,{dateStyle:"long",timeZone:"UTC"}),c.dataset.vcDateBtn="",c.innerText=String(i),r.appendChild(c)),e.enableWeekNumbers&&addWeekNumberForDate(e,r,s),setDaysAsDisabled(e,s,a),setDateModifier(e,t,r,c,a,s,o),n.addDate(r),e.onCreateDateEls&&e.onCreateDateEls(e,r)},createDatesFromCurrentMonth=(e,t,n,i,s)=>{for(let o=1;o<=n;o++){const n=new Date(i,s,o);createDate(e,i,t,o,getDateString(n),"current")}},createDatesFromNextMonth=(e,t,n,i,s)=>{const o=s+1===12?i+1:i,a=s+1===12?"01":s+2<10?`0${s+2}`:s+2;for(let s=1;s<=n;s++){const n=s<10?`0${s}`:String(s);createDate(e,i,t,s,`${o}-${a}-${n}`,"next")}},createDatesFromPrevMonth=(e,t,n,i,s)=>{let o=new Date(n,i,0).getDate()-(s-1);const a=0===i?n-1:n,l=0===i?12:i<10?`0${i}`:i;for(let i=s;i>0;i--,o++)createDate(e,n,t,o,`${a}-${l}-${o}`,"prev")},createWeekNumbers=(e,t,n,i,s)=>{if(!e.enableWeekNumbers)return;i.textContent="";const o=document.createElement("b");o.className=e.styles.weekNumbersTitle,o.innerText="#",o.dataset.vcWeekNumbers="title",i.appendChild(o);const a=document.createElement("div");a.className=e.styles.weekNumbersContent,a.dataset.vcWeekNumbers="content",i.appendChild(a);const l=document.createElement("button");l.type="button",l.className=e.styles.weekNumber;const r=s.querySelectorAll("[data-vc-date]"),c=Math.ceil((t+n)/7);for(let t=0;t<c;t++){const n=r[0===t?6:7*t].dataset.vcDate,i=getWeekNumber(n,e.firstWeekday);if(!i)return;const s=l.cloneNode(!0);s.innerText=String(i.week),s.dataset.vcWeekNumber=String(i.week),s.dataset.vcWeekYear=String(i.year),s.role="rowheader",s.ariaLabel=`${i.week}`,a.appendChild(s)}},createDates=e=>{const t=new Date(e.context.selectedYear,e.context.selectedMonth,1),n=e.context.mainElement.querySelectorAll('[data-vc="dates"]'),i=e.context.mainElement.querySelectorAll('[data-vc-week="numbers"]');n.forEach((n,s)=>{e.selectionDatesMode||(n.dataset.vcDatesDisabled=""),n.textContent="";const o=new Date(t);o.setMonth(o.getMonth()+s);const a=o.getMonth(),l=o.getFullYear(),r=(new Date(l,a,1).getDay()-e.firstWeekday+7)%7,c=new Date(l,a+1,0).getDate(),d=r+c,u=Math.ceil(d/7),h=7*u-d,_=[];for(let t=0;t<u;t++){const t=document.createElement("div");t.className=e.styles.datesRow,t.setAttribute("data-vc-dates","row"),t.setAttribute("role","row"),_.push(t)}let m=0,g=0;const p={addDate:e=>{_[m].appendChild(e),g++,g>=7&&(m++,g=0)}};createDatesFromPrevMonth(e,p,l,a,r),createDatesFromCurrentMonth(e,p,c,l,a),createDatesFromNextMonth(e,p,h,l,a);for(const e of _)n.appendChild(e);createDatePopup(e,n),createWeekNumbers(e,r,c,i[s],n)})},layoutDefault=e=>`\n  <div class="${e.styles.header}" data-vc="header" role="toolbar" aria-label="${e.labels.navigation}">\n    <#ArrowPrev [month] />\n    <div class="${e.styles.headerContent}" data-vc-header="content">\n      <#Month />\n      <#Year />\n    </div>\n    <#ArrowNext [month] />\n  </div>\n  <div class="${e.styles.wrapper}" data-vc="wrapper">\n    <#WeekNumbers />\n    <div class="${e.styles.content}" data-vc="content" role="grid">\n      <#Week />\n      <#Dates />\n      <#DateRangeTooltip />\n    </div>\n  </div>\n  <#ControlTime />\n`,layoutMonths=e=>`\n  <div class="${e.styles.header}" data-vc="header" role="toolbar" aria-label="${e.labels.navigation}">\n    <div class="${e.styles.headerContent}" data-vc-header="content">\n      <#Month />\n      <#Year />\n    </div>\n  </div>\n  <div class="${e.styles.wrapper}" data-vc="wrapper">\n    <div class="${e.styles.content}" data-vc="content">\n      <#Months />\n    </div>\n  </div>\n`,layoutMultiple=e=>`\n  <div class="${e.styles.controls}" data-vc="controls" role="toolbar" aria-label="${e.labels.navigation}">\n    <#ArrowPrev [month] />\n    <#ArrowNext [month] />\n  </div>\n  <div class="${e.styles.grid}" data-vc="grid">\n    <#Multiple>\n      <div class="${e.styles.column}" data-vc="column" role="region">\n        <div class="${e.styles.header}" data-vc="header">\n          <div class="${e.styles.headerContent}" data-vc-header="content">\n            <#Month />\n            <#Year />\n          </div>\n        </div>\n        <div class="${e.styles.wrapper}" data-vc="wrapper">\n          <#WeekNumbers />\n          <div class="${e.styles.content}" data-vc="content" role="grid">\n            <#Week />\n            <#Dates />\n          </div>\n        </div>\n      </div>\n    <#/Multiple>\n    <#DateRangeTooltip />\n  </div>\n  <#ControlTime />\n`,layoutYears=e=>`\n  <div class="${e.styles.header}" data-vc="header" role="toolbar" aria-label="${e.labels.navigation}">\n    <#ArrowPrev [year] />\n    <div class="${e.styles.headerContent}" data-vc-header="content">\n      <#Month />\n      <#Year />\n    </div>\n    <#ArrowNext [year] />\n  </div>\n  <div class="${e.styles.wrapper}" data-vc="wrapper">\n    <div class="${e.styles.content}" data-vc="content">\n      <#Years />\n    </div>\n  </div>\n`,ArrowNext=(e,t)=>`<button type="button" class="${e.styles.arrowNext}" data-vc-arrow="next" aria-label="${e.labels.arrowNext[t]}"></button>`,ArrowPrev=(e,t)=>`<button type="button" class="${e.styles.arrowPrev}" data-vc-arrow="prev" aria-label="${e.labels.arrowPrev[t]}"></button>`,ControlTime=e=>e.selectionTimeMode?`<div class="${e.styles.time}" data-vc="time" role="group" aria-label="${e.labels.selectingTime}"></div>`:"",DateRangeTooltip=e=>e.onCreateDateRangeTooltip?`<div class="${e.styles.dateRangeTooltip}" data-vc-date-range-tooltip="hidden"></div>`:"",Dates=e=>`<div class="${e.styles.dates}" data-vc="dates" aria-live="assertive" aria-label="${e.labels.dates}" ${"multiple"===e.type?"aria-multiselectable":""}></div>`,Month=e=>`<button type="button" class="${e.styles.month}" data-vc="month"></button>`,Months=e=>`<div class="${e.styles.months}" data-vc="months" role="grid" aria-live="assertive" aria-label="${e.labels.months}"></div>`,Week=e=>`<div class="${e.styles.week}" data-vc="week" role="row" aria-label="${e.labels.week}"></div>`,WeekNumbers=e=>e.enableWeekNumbers?`<div class="${e.styles.weekNumbers}" data-vc-week="numbers" role="row" aria-label="${e.labels.weekNumber}"></div>`:"",Year=e=>`<button type="button" class="${e.styles.year}" data-vc="year"></button>`,Years=e=>`<div class="${e.styles.years}" data-vc="years" role="grid" aria-live="assertive" aria-label="${e.labels.years}"></div>`,components={ArrowNext:ArrowNext,ArrowPrev:ArrowPrev,ControlTime:ControlTime,Dates:Dates,DateRangeTooltip:DateRangeTooltip,Month:Month,Months:Months,Week:Week,WeekNumbers:WeekNumbers,Year:Year,Years:Years},getComponent=e=>components[e],parseLayout=(e,t)=>t.replace(/[\n\t]/g,"").replace(/<#(?!\/?Multiple)(.*?)>/g,(t,n)=>{const i=(n.match(/\[(.*?)\]/)||[])[1],s=n.replace(/[/\s\n\t]|\[(.*?)\]/g,""),o=getComponent(s),a=o?o(e,null!=i?i:null):"";return e.sanitizerHTML(a)}).replace(/[\n\t]/g,""),parseMultipleLayout=(e,t)=>t.replace(new RegExp("<#Multiple>(.*?)<#\\/Multiple>","gs"),(t,n)=>{const i=Array(e.context.displayMonthsCount).fill(n).join("");return e.sanitizerHTML(i)}).replace(/[\n\t]/g,""),createLayouts=(e,t)=>{const n={default:layoutDefault,month:layoutMonths,year:layoutYears,multiple:layoutMultiple};if(Object.keys(n).forEach(t=>{const i=t;e.layouts[i].length||(e.layouts[i]=n[i](e))}),e.context.mainElement.className=e.styles.calendar,e.context.mainElement.dataset.vc="calendar",e.context.mainElement.dataset.vcType=e.context.currentType,e.context.mainElement.role="application",e.context.mainElement.tabIndex=0,e.context.mainElement.ariaLabel=e.labels.application,"multiple"!==e.context.currentType){if("multiple"===e.type&&t){const n=e.context.mainElement.querySelector('[data-vc="controls"]'),i=e.context.mainElement.querySelector('[data-vc="grid"]'),s=t.closest('[data-vc="column"]');return n&&n.remove(),i&&(i.dataset.vcGrid="hidden"),s&&(s.dataset.vcColumn=e.context.currentType),void(s&&(s.innerHTML=e.sanitizerHTML(parseLayout(e,e.layouts[e.context.currentType]))))}e.context.mainElement.innerHTML=e.sanitizerHTML(parseLayout(e,e.layouts[e.context.currentType]))}else e.context.mainElement.innerHTML=e.sanitizerHTML(parseMultipleLayout(e,parseLayout(e,e.layouts[e.context.currentType])))},setVisibilityArrows=(e,t,n,i)=>{e.style.visibility=n?"hidden":"",t.style.visibility=i?"hidden":""},handleDefaultType=(e,t,n)=>{const i=getDate(getDateString(new Date(e.context.selectedYear,e.context.selectedMonth,1))),s=new Date(i.getTime()),o=new Date(i.getTime());s.setMonth(s.getMonth()-e.monthsToSwitch),o.setMonth(o.getMonth()+e.monthsToSwitch);const a=getDate(e.context.dateMin),l=getDate(e.context.dateMax);e.selectionYearsMode||(a.setFullYear(i.getFullYear()),l.setFullYear(i.getFullYear()));const r=!e.selectionMonthsMode||s.getFullYear()<a.getFullYear()||s.getFullYear()===a.getFullYear()&&s.getMonth()<a.getMonth(),c=!e.selectionMonthsMode||o.getFullYear()>l.getFullYear()||o.getFullYear()===l.getFullYear()&&o.getMonth()>l.getMonth()-(e.context.displayMonthsCount-1);setVisibilityArrows(t,n,r,c)},handleYearType=(e,t,n)=>{const i=getDate(e.context.dateMin),s=getDate(e.context.dateMax),o=!!(i.getFullYear()&&e.context.displayYear-7<=i.getFullYear()),a=!!(s.getFullYear()&&e.context.displayYear+7>=s.getFullYear());setVisibilityArrows(t,n,o,a)},visibilityArrows=e=>{if("month"===e.context.currentType)return;const t=e.context.mainElement.querySelector('[data-vc-arrow="prev"]'),n=e.context.mainElement.querySelector('[data-vc-arrow="next"]');t&&n&&{default:()=>handleDefaultType(e,t,n),year:()=>handleYearType(e,t,n)}["multiple"===e.context.currentType?"default":e.context.currentType]()},visibilityHandler=(e,t,n,i,s)=>{const o=new Date(i.setFullYear(e.context.selectedYear,e.context.selectedMonth+n)).getFullYear(),a=new Date(i.setMonth(e.context.selectedMonth+n)).getMonth(),l=e.context.locale.months.long[a],r=t.closest('[data-vc="column"]');r&&(r.ariaLabel=`${l} ${o}`);const c={month:{id:a,label:l},year:{id:o,label:o}};t.innerText=String(c[s].label),t.dataset[`vc${s.charAt(0).toUpperCase()+s.slice(1)}`]=String(c[s].id),t.ariaLabel=`${e.labels[s]} ${c[s].label}`;const d={month:e.selectionMonthsMode,year:e.selectionYearsMode},u=!1===d[s]||"only-arrows"===d[s];u&&(t.tabIndex=-1),t.disabled=u},visibilityTitle=e=>{const t=e.context.mainElement.querySelectorAll('[data-vc="month"]'),n=e.context.mainElement.querySelectorAll('[data-vc="year"]'),i=new Date(e.context.selectedYear,e.context.selectedMonth,1);[t,n].forEach(t=>null==t?void 0:t.forEach((t,n)=>visibilityHandler(e,t,n,i,t.dataset.vc)))},setYearModifier=(e,t,n,i,s)=>{var o;const a={month:{selected:"data-vc-months-month-selected",aria:"aria-selected",value:"vcMonthsMonth",selectedProperty:"selectedMonth"},year:{selected:"data-vc-years-year-selected",aria:"aria-selected",value:"vcYearsYear",selectedProperty:"selectedYear"}};s&&(null==(o=e.context.mainElement.querySelectorAll({month:"[data-vc-months-month]",year:"[data-vc-years-year]"}[n]))||o.forEach(e=>{e.removeAttribute(a[n].selected),e.removeAttribute(a[n].aria)}),setContext(e,a[n].selectedProperty,Number(t.dataset[a[n].value])),visibilityTitle(e),"year"===n&&visibilityArrows(e)),i&&(t.setAttribute(a[n].selected,""),t.setAttribute(a[n].aria,"true"))},getColumnID=(e,t)=>{var n;if("multiple"!==e.type)return{currentValue:null,columnID:0};const i=e.context.mainElement.querySelectorAll('[data-vc="column"]'),s=Array.from(i).findIndex(e=>e.closest(`[data-vc-column="${t}"]`));return{currentValue:s>=0?Number(null==(n=i[s].querySelector(`[data-vc="${t}"]`))?void 0:n.getAttribute(`data-vc-${t}`)):null,columnID:Math.max(s,0)}},createMonthEl=(e,t,n,i,s,o,a)=>{const l=t.cloneNode(!1);return l.className=e.styles.monthsMonth,l.innerText=i,l.ariaLabel=s,l.role="gridcell",l.dataset.vcMonthsMonth=`${a}`,o&&(l.ariaDisabled="true"),o&&(l.tabIndex=-1),l.disabled=o,setYearModifier(e,l,"month",n===a,!1),l},createMonths=(e,t)=>{var n,i;const s=null==(n=null==t?void 0:t.closest('[data-vc="header"]'))?void 0:n.querySelector('[data-vc="year"]'),o=s?Number(s.dataset.vcYear):e.context.selectedYear,a=(null==t?void 0:t.dataset.vcMonth)?Number(t.dataset.vcMonth):e.context.selectedMonth;setContext(e,"currentType","month"),createLayouts(e,t),visibilityTitle(e);const l=e.context.mainElement.querySelector('[data-vc="months"]');if(!e.selectionMonthsMode||!l)return;const r=e.monthsToSwitch>1?e.context.locale.months.long.map((t,n)=>a-e.monthsToSwitch*n).concat(e.context.locale.months.long.map((t,n)=>a+e.monthsToSwitch*n)).filter(e=>e>=0&&e<=12):Array.from(Array(12).keys()),c=document.createElement("button");c.type="button";for(let t=0;t<12;t++){const n=getDate(e.context.dateMin),i=getDate(e.context.dateMax),s=e.context.displayMonthsCount-1,{columnID:d}=getColumnID(e,"month"),u=o<=n.getFullYear()&&t<n.getMonth()+d||o>=i.getFullYear()&&t>i.getMonth()-s+d||o>i.getFullYear()||t!==a&&!r.includes(t),h=createMonthEl(e,c,a,e.context.locale.months.short[t],e.context.locale.months.long[t],u,t);l.appendChild(h),e.onCreateMonthEls&&e.onCreateMonthEls(e,h)}null==(i=e.context.mainElement.querySelector("[data-vc-months-month]:not([disabled])"))||i.focus()},TimeInput=(e,t,n,i,s)=>`\n  <label class="${t}" data-vc-time-input="${e}">\n    <input type="text" name="${e}" maxlength="2" aria-label="${n[`input${e.charAt(0).toUpperCase()+e.slice(1)}`]}" value="${i}" ${s?"disabled":""}>\n  </label>\n`,TimeRange=(e,t,n,i,s,o,a)=>`\n  <label class="${t}" data-vc-time-range="${e}">\n    <input type="range" name="${e}" min="${i}" max="${s}" step="${o}" aria-label="${n[`range${e.charAt(0).toUpperCase()+e.slice(1)}`]}" value="${a}">\n  </label>\n`,handleActions=(e,t,n,i)=>{({hour:()=>setContext(e,"selectedHours",n),minute:()=>setContext(e,"selectedMinutes",n)})[i](),setContext(e,"selectedTime",`${e.context.selectedHours}:${e.context.selectedMinutes}${e.context.selectedKeeping?` ${e.context.selectedKeeping}`:""}`),e.onChangeTime&&e.onChangeTime(e,t,!1),e.inputMode&&e.context.inputElement&&e.context.mainElement&&e.onChangeToInput&&e.onChangeToInput(e,t)},transformTime24=(e,t)=>{var n;return(null==(n={0:{AM:"00",PM:"12"},1:{AM:"01",PM:"13"},2:{AM:"02",PM:"14"},3:{AM:"03",PM:"15"},4:{AM:"04",PM:"16"},5:{AM:"05",PM:"17"},6:{AM:"06",PM:"18"},7:{AM:"07",PM:"19"},8:{AM:"08",PM:"20"},9:{AM:"09",PM:"21"},10:{AM:"10",PM:"22"},11:{AM:"11",PM:"23"},12:{AM:"00",PM:"12"}}[Number(e)])?void 0:n[t])||String(e)},handleClickKeepingTime=(e,t,n,i,s)=>{const o=o=>{const a="AM"===e.context.selectedKeeping?"PM":"AM",l=transformTime24(e.context.selectedHours,a);Number(l)<=i&&Number(l)>=s?(setContext(e,"selectedKeeping",a),n.value=l,handleActions(e,o,e.context.selectedHours,"hour"),t.ariaLabel=`${e.labels.btnKeeping} ${e.context.selectedKeeping}`,t.innerText=e.context.selectedKeeping):e.onChangeTime&&e.onChangeTime(e,o,!0)};return t.addEventListener("click",o),()=>{t.removeEventListener("click",o)}},transformTime12=e=>({0:"12",13:"01",14:"02",15:"03",16:"04",17:"05",18:"06",19:"07",20:"08",21:"09",22:"10",23:"11"}[Number(e)]||String(e)),updateInputAndRange=(e,t,n,i)=>{e.value=n,t.value=i},updateKeepingTime$1=(e,t,n)=>{t&&n&&(setContext(e,"selectedKeeping",n),t.innerText=n)},handleInput$1=(e,t,n,i,s,o,a)=>{const l={hour:(l,r,c)=>{e.selectionTimeMode&&{12:()=>{if(!e.context.selectedKeeping)return;const d=Number(transformTime24(r,e.context.selectedKeeping));if(!(d<=o&&d>=a))return updateInputAndRange(n,t,e.context.selectedHours,e.context.selectedHours),void(e.onChangeTime&&e.onChangeTime(e,c,!0));updateInputAndRange(n,t,transformTime12(r),transformTime24(r,e.context.selectedKeeping)),l>12&&updateKeepingTime$1(e,i,"PM"),handleActions(e,c,transformTime12(r),s)},24:()=>{if(!(l<=o&&l>=a))return updateInputAndRange(n,t,e.context.selectedHours,e.context.selectedHours),void(e.onChangeTime&&e.onChangeTime(e,c,!0));updateInputAndRange(n,t,r,r),handleActions(e,c,r,s)}}[e.selectionTimeMode]()},minute:(i,l,r)=>{if(!(i<=o&&i>=a))return n.value=e.context.selectedMinutes,void(e.onChangeTime&&e.onChangeTime(e,r,!0));n.value=l,t.value=l,handleActions(e,r,l,s)}},r=e=>{const t=Number(n.value),i=n.value.padStart(2,"0");l[s]&&l[s](t,i,e)};return n.addEventListener("change",r),()=>{n.removeEventListener("change",r)}},updateInputAndTime=(e,t,n,i,s)=>{t.value=s,handleActions(e,n,s,i)},updateKeepingTime=(e,t,n)=>{t&&(setContext(e,"selectedKeeping",n),t.innerText=n)},handleRange=(e,t,n,i,s)=>{const o=o=>{const a=Number(t.value),l=t.value.padStart(2,"0"),r="hour"===s,c=24===e.selectionTimeMode,d=a>0&&a<12;r&&!c&&updateKeepingTime(e,i,0===a||d?"AM":"PM"),updateInputAndTime(e,n,o,s,!r||c||d?l:transformTime12(t.value))};return t.addEventListener("input",o),()=>{t.removeEventListener("input",o)}},handleMouseOver=e=>e.setAttribute("data-vc-input-focus",""),handleMouseOut=e=>e.removeAttribute("data-vc-input-focus"),handleTime=(e,t)=>{const n=t.querySelector('[data-vc-time-range="hour"] input[name="hour"]'),i=t.querySelector('[data-vc-time-range="minute"] input[name="minute"]'),s=t.querySelector('[data-vc-time-input="hour"] input[name="hour"]'),o=t.querySelector('[data-vc-time-input="minute"] input[name="minute"]'),a=t.querySelector('[data-vc-time="keeping"]');if(!(n&&i&&s&&o))return;const l=e=>{e.target===n&&handleMouseOver(s),e.target===i&&handleMouseOver(o)},r=e=>{e.target===n&&handleMouseOut(s),e.target===i&&handleMouseOut(o)};return t.addEventListener("mouseover",l),t.addEventListener("mouseout",r),handleInput$1(e,n,s,a,"hour",e.timeMaxHour,e.timeMinHour),handleInput$1(e,i,o,a,"minute",e.timeMaxMinute,e.timeMinMinute),handleRange(e,n,s,a,"hour"),handleRange(e,i,o,a,"minute"),a&&handleClickKeepingTime(e,a,n,e.timeMaxHour,e.timeMinHour),()=>{t.removeEventListener("mouseover",l),t.removeEventListener("mouseout",r)}},createTime=e=>{const t=e.context.mainElement.querySelector('[data-vc="time"]');if(!e.selectionTimeMode||!t)return;const[n,i]=[e.timeMinHour,e.timeMaxHour],[s,o]=[e.timeMinMinute,e.timeMaxMinute],a=e.context.selectedKeeping?transformTime24(e.context.selectedHours,e.context.selectedKeeping):e.context.selectedHours,l="range"===e.timeControls;var r;t.innerHTML=e.sanitizerHTML(`\n    <div class="${e.styles.timeContent}" data-vc-time="content">\n      ${TimeInput("hour",e.styles.timeHour,e.labels,e.context.selectedHours,l)}\n      ${TimeInput("minute",e.styles.timeMinute,e.labels,e.context.selectedMinutes,l)}\n      ${12===e.selectionTimeMode?(r=e.context.selectedKeeping,`<button type="button" class="${e.styles.timeKeeping}" aria-label="${e.labels.btnKeeping} ${r}" data-vc-time="keeping" ${l?"disabled":""}>${r}</button>`):""}\n    </div>\n    <div class="${e.styles.timeRanges}" data-vc-time="ranges">\n      ${TimeRange("hour",e.styles.timeRange,e.labels,n,i,e.timeStepHour,a)}\n      ${TimeRange("minute",e.styles.timeRange,e.labels,s,o,e.timeStepMinute,e.context.selectedMinutes)}\n    </div>\n  `),handleTime(e,t)},createWeek=e=>{const t=e.selectedWeekends?[...e.selectedWeekends]:[],n=[...e.context.locale.weekdays.long].reduce((n,i,s)=>[...n,{id:s,titleShort:e.context.locale.weekdays.short[s],titleLong:i,isWeekend:t.includes(s)}],[]),i=[...n.slice(e.firstWeekday),...n.slice(0,e.firstWeekday)];e.context.mainElement.querySelectorAll('[data-vc="week"]').forEach(t=>{const n=e.onClickWeekDay?document.createElement("button"):document.createElement("b");e.onClickWeekDay&&(n.type="button"),i.forEach(i=>{const s=n.cloneNode(!0);s.innerText=i.titleShort,s.className=e.styles.weekDay,s.role="columnheader",s.ariaLabel=i.titleLong,s.dataset.vcWeekDay=String(i.id),i.isWeekend&&(s.dataset.vcWeekDayOff=""),t.appendChild(s)})})},createYearEl=(e,t,n,i,s)=>{const o=t.cloneNode(!1);return o.className=e.styles.yearsYear,o.innerText=String(s),o.ariaLabel=String(s),o.role="gridcell",o.dataset.vcYearsYear=`${s}`,i&&(o.ariaDisabled="true"),i&&(o.tabIndex=-1),o.disabled=i,setYearModifier(e,o,"year",n===s,!1),o},createYears=(e,t)=>{var n;const i=(null==t?void 0:t.dataset.vcYear)?Number(t.dataset.vcYear):e.context.selectedYear;setContext(e,"currentType","year"),createLayouts(e,t),visibilityTitle(e),visibilityArrows(e);const s=e.context.mainElement.querySelector('[data-vc="years"]');if(!e.selectionYearsMode||!s)return;const o="multiple"!==e.type||e.context.selectedYear===i?0:1,a=document.createElement("button");a.type="button";for(let t=e.context.displayYear-7;t<e.context.displayYear+8;t++){const n=t<getDate(e.context.dateMin).getFullYear()+o||t>getDate(e.context.dateMax).getFullYear(),l=createYearEl(e,a,i,n,t);s.appendChild(l),e.onCreateYearEls&&e.onCreateYearEls(e,l)}null==(n=e.context.mainElement.querySelector("[data-vc-years-year]:not([disabled])"))||n.focus()},trackChangesHTMLElement=(e,t,n)=>{new MutationObserver(e=>{for(let i=0;i<e.length;i++)if(e[i].attributeName===t){n();break}}).observe(e,{attributes:!0})},haveListener={value:!1,set:()=>haveListener.value=!0,check:()=>haveListener.value},setTheme=(e,t)=>e.dataset.vcTheme=t,trackChangesThemeInSystemSettings=(e,t)=>{if(setTheme(e.context.mainElement,t.matches?"dark":"light"),"system"!==e.selectedTheme||haveListener.check())return;const n=e=>{const t=document.querySelectorAll('[data-vc="calendar"]');null==t||t.forEach(t=>setTheme(t,e.matches?"dark":"light"))};t.addEventListener?t.addEventListener("change",n):t.addListener(n),haveListener.set()},detectTheme=(e,t)=>{const n=e.themeAttrDetect.length?document.querySelector(e.themeAttrDetect):null,i=e.themeAttrDetect.replace(/^.*\[(.+)\]/g,(e,t)=>t);if(!n||"system"===n.getAttribute(i))return void trackChangesThemeInSystemSettings(e,t);const s=n.getAttribute(i);s?(setTheme(e.context.mainElement,s),trackChangesHTMLElement(n,i,()=>{const t=n.getAttribute(i);t&&setTheme(e.context.mainElement,t)})):trackChangesThemeInSystemSettings(e,t)},handleTheme=e=>{"not all"!==window.matchMedia("(prefers-color-scheme)").media?"system"===e.selectedTheme?detectTheme(e,window.matchMedia("(prefers-color-scheme: dark)")):setTheme(e.context.mainElement,e.selectedTheme):setTheme(e.context.mainElement,"light")},capitalizeFirstLetter=e=>e.charAt(0).toUpperCase()+e.slice(1).replace(/\./,""),getLocaleWeekday=(e,t,n)=>{const i=new Date(`1978-01-0${t+1}T00:00:00.000Z`),s=i.toLocaleString(n,{weekday:"short",timeZone:"UTC"}),o=i.toLocaleString(n,{weekday:"long",timeZone:"UTC"});e.context.locale.weekdays.short.push(capitalizeFirstLetter(s)),e.context.locale.weekdays.long.push(capitalizeFirstLetter(o))},getLocaleMonth=(e,t,n)=>{const i=new Date(`1978-${String(t+1).padStart(2,"0")}-01T00:00:00.000Z`),s=i.toLocaleString(n,{month:"short",timeZone:"UTC"}),o=i.toLocaleString(n,{month:"long",timeZone:"UTC"});e.context.locale.months.short.push(capitalizeFirstLetter(s)),e.context.locale.months.long.push(capitalizeFirstLetter(o))},getLocale=e=>{var t,n,i,s,o,a,l,r;if(!(e.context.locale.weekdays.short[6]&&e.context.locale.weekdays.long[6]&&e.context.locale.months.short[11]&&e.context.locale.months.long[11]))if("string"==typeof e.locale){if("string"==typeof e.locale&&!e.locale.length)throw new Error(errorMessages.notLocale);Array.from({length:7},(t,n)=>getLocaleWeekday(e,n,e.locale)),Array.from({length:12},(t,n)=>getLocaleMonth(e,n,e.locale))}else{if(!((null==(n=null==(t=e.locale)?void 0:t.weekdays)?void 0:n.short[6])&&(null==(s=null==(i=e.locale)?void 0:i.weekdays)?void 0:s.long[6])&&(null==(a=null==(o=e.locale)?void 0:o.months)?void 0:a.short[11])&&(null==(r=null==(l=e.locale)?void 0:l.months)?void 0:r.long[11])))throw new Error(errorMessages.notLocale);setContext(e,"locale",__spreadValues({},e.locale))}},create=e=>{const t={default:()=>{createWeek(e),createDates(e)},multiple:()=>{createWeek(e),createDates(e)},month:()=>createMonths(e),year:()=>createYears(e)};handleTheme(e),getLocale(e),createLayouts(e),visibilityTitle(e),visibilityArrows(e),createTime(e),t[e.context.currentType]()},handleArrowKeys=e=>{const t=t=>{var n;const i=t.target;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key)||"button"!==i.localName)return;const s=Array.from(e.context.mainElement.querySelectorAll('[data-vc="calendar"] button')),o=s.indexOf(i);if(-1===o)return;const a=(l=s[o]).hasAttribute("data-vc-date-btn")?7:l.hasAttribute("data-vc-months-month")?4:l.hasAttribute("data-vc-years-year")?5:1;var l;const r=(0,{ArrowUp:()=>Math.max(0,o-a),ArrowDown:()=>Math.min(s.length-1,o+a),ArrowLeft:()=>Math.max(0,o-1),ArrowRight:()=>Math.min(s.length-1,o+1)}[t.key])();null==(n=s[r])||n.focus()};return e.context.mainElement.addEventListener("keydown",t),()=>e.context.mainElement.removeEventListener("keydown",t)},handleMonth=(e,t)=>{const n=getDate(getDateString(new Date(e.context.selectedYear,e.context.selectedMonth,1)));({prev:()=>n.setMonth(n.getMonth()-e.monthsToSwitch),next:()=>n.setMonth(n.getMonth()+e.monthsToSwitch)})[t](),setContext(e,"selectedMonth",n.getMonth()),setContext(e,"selectedYear",n.getFullYear()),visibilityTitle(e),visibilityArrows(e),createDates(e)},handleClickArrow=(e,t)=>{const n=t.target.closest("[data-vc-arrow]");if(n){if(["default","multiple"].includes(e.context.currentType))handleMonth(e,n.dataset.vcArrow);else if("year"===e.context.currentType&&void 0!==e.context.displayYear){const i={prev:-15,next:15}[n.dataset.vcArrow];setContext(e,"displayYear",e.context.displayYear+i),createYears(e,t.target)}e.onClickArrow&&e.onClickArrow(e,t)}},resolveToggle=(e,t)=>void 0===t||("function"==typeof t?t(e):t),canToggleSelection=e=>resolveToggle(e,e.enableDateToggle),handleSelectDate=(e,t,n)=>{const i=t.dataset.vcDate,s=t.closest("[data-vc-date][data-vc-date-selected]"),o=canToggleSelection(e);if(s&&!o)return;const a=s?e.context.selectedDates.filter(e=>e!==i):n?[...e.context.selectedDates,i]:[i];setContext(e,"selectedDates",a)},createDateRangeTooltip=(e,t,n)=>{if(!t)return;if(!n)return t.dataset.vcDateRangeTooltip="hidden",void(t.textContent="");const i=e.context.mainElement.getBoundingClientRect(),s=n.getBoundingClientRect();t.style.left=s.left-i.left+s.width/2+"px",t.style.top=s.bottom-i.top-s.height+"px",t.dataset.vcDateRangeTooltip="visible",t.innerHTML=e.sanitizerHTML(e.onCreateDateRangeTooltip(e,n,t,s,i))},state={self:null,lastDateEl:null,isHovering:!1,rangeMin:void 0,rangeMax:void 0,tooltipEl:null,timeoutId:null},addHoverEffect=(e,t,n)=>{var i,s,o;if(!(null==(s=null==(i=state.self)?void 0:i.context)?void 0:s.selectedDates[0]))return;const a=getDateString(e);(null==(o=state.self.context.disableDates)?void 0:o.includes(a))||(state.self.context.mainElement.querySelectorAll(`[data-vc-date="${a}"]`).forEach(e=>e.dataset.vcDateHover=""),t.forEach(e=>e.dataset.vcDateHover="first"),n.forEach(e=>{"first"===e.dataset.vcDateHover?e.dataset.vcDateHover="first-and-last":e.dataset.vcDateHover="last"}))},removeHoverEffect=()=>{var e,t;(null==(t=null==(e=state.self)?void 0:e.context)?void 0:t.mainElement)&&state.self.context.mainElement.querySelectorAll("[data-vc-date-hover]").forEach(e=>e.removeAttribute("data-vc-date-hover"))},handleHoverDatesEvent=e=>{var t,n;if(!e||!(null==(n=null==(t=state.self)?void 0:t.context)?void 0:n.selectedDates[0]))return;if(!e.closest('[data-vc="dates"]'))return state.lastDateEl=null,createDateRangeTooltip(state.self,state.tooltipEl,null),void removeHoverEffect();const i=e.closest("[data-vc-date]");if(!i||state.lastDateEl===i)return;state.lastDateEl=i,createDateRangeTooltip(state.self,state.tooltipEl,i),removeHoverEffect();const s=i.dataset.vcDate,o=getDate(state.self.context.selectedDates[0]),a=getDate(s),l=state.self.context.mainElement.querySelectorAll(`[data-vc-date="${state.self.context.selectedDates[0]}"]`),r=state.self.context.mainElement.querySelectorAll(`[data-vc-date="${s}"]`),[c,d]=o<a?[l,r]:[r,l],[u,h]=o<a?[o,a]:[a,o];for(let e=new Date(u);e<=h;e.setDate(e.getDate()+1))addHoverEffect(e,c,d)},handleHoverSelectedDatesRangeEvent=e=>{const t=null==e?void 0:e.closest("[data-vc-date-selected]");if(!t&&state.lastDateEl)return state.lastDateEl=null,void createDateRangeTooltip(state.self,state.tooltipEl,null);t&&state.lastDateEl!==t&&(state.lastDateEl=t,createDateRangeTooltip(state.self,state.tooltipEl,t))},optimizedHoverHandler=e=>t=>{const n=t.target;state.isHovering||(state.isHovering=!0,requestAnimationFrame(()=>{e(n),state.isHovering=!1}))},optimizedHandleHoverDatesEvent=optimizedHoverHandler(handleHoverDatesEvent),optimizedHandleHoverSelectedDatesRangeEvent=optimizedHoverHandler(handleHoverSelectedDatesRangeEvent),handleCancelSelectionDates=e=>{state.self&&"Escape"===e.key&&(state.lastDateEl=null,setContext(state.self,"selectedDates",[]),state.self.context.mainElement.removeEventListener("mousemove",optimizedHandleHoverDatesEvent),state.self.context.mainElement.removeEventListener("keydown",handleCancelSelectionDates),createDateRangeTooltip(state.self,state.tooltipEl,null),removeHoverEffect())},handleMouseLeave=()=>{null!==state.timeoutId&&clearTimeout(state.timeoutId),state.timeoutId=setTimeout(()=>{state.lastDateEl=null,createDateRangeTooltip(state.self,state.tooltipEl,null),removeHoverEffect()},50)},updateDisabledDates=()=>{var e,t,n,i;if(!(null==(n=null==(t=null==(e=state.self)?void 0:e.context)?void 0:t.selectedDates)?void 0:n[0])||!(null==(i=state.self.context.disableDates)?void 0:i[0]))return;const s=getDate(state.self.context.selectedDates[0]),[o,a]=state.self.context.disableDates.map(e=>getDate(e)).reduce(([e,t],n)=>[s>=n?n:e,s<n&&null===t?n:t],[null,null]);o&&setContext(state.self,"displayDateMin",getDateString(new Date(o.setDate(o.getDate()+1)))),a&&setContext(state.self,"displayDateMax",getDateString(new Date(a.setDate(a.getDate()-1)))),state.self.disableDatesPast&&!state.self.disableAllDates&&getDate(state.self.context.displayDateMin)<getDate(state.self.context.dateToday)&&setContext(state.self,"displayDateMin",state.self.context.dateToday)},handleSelectDateRange=(e,t)=>{state.self=e,state.lastDateEl=t,removeHoverEffect(),e.disableDatesGaps&&(state.rangeMin=state.rangeMin?state.rangeMin:e.context.displayDateMin,state.rangeMax=state.rangeMax?state.rangeMax:e.context.displayDateMax),e.onCreateDateRangeTooltip&&(state.tooltipEl=e.context.mainElement.querySelector("[data-vc-date-range-tooltip]"));const n=null==t?void 0:t.dataset.vcDate;if(n){const t=1===e.context.selectedDates.length&&e.context.selectedDates[0].includes(n),i=t&&!canToggleSelection(e)?[n,n]:t&&canToggleSelection(e)?[]:e.context.selectedDates.length>1?[n]:[...e.context.selectedDates,n];setContext(e,"selectedDates",i),e.context.selectedDates.length>1&&e.context.selectedDates.sort((e,t)=>+new Date(e)-+new Date(t))}({set:()=>(e.disableDatesGaps&&updateDisabledDates(),createDateRangeTooltip(state.self,state.tooltipEl,t),state.self.context.mainElement.removeEventListener("mousemove",optimizedHandleHoverSelectedDatesRangeEvent),state.self.context.mainElement.removeEventListener("mouseleave",handleMouseLeave),state.self.context.mainElement.removeEventListener("keydown",handleCancelSelectionDates),state.self.context.mainElement.addEventListener("mousemove",optimizedHandleHoverDatesEvent),state.self.context.mainElement.addEventListener("mouseleave",handleMouseLeave),state.self.context.mainElement.addEventListener("keydown",handleCancelSelectionDates),()=>{state.self.context.mainElement.removeEventListener("mousemove",optimizedHandleHoverDatesEvent),state.self.context.mainElement.removeEventListener("mouseleave",handleMouseLeave),state.self.context.mainElement.removeEventListener("keydown",handleCancelSelectionDates)}),reset:()=>{const[n,i]=[e.context.selectedDates[0],e.context.selectedDates[e.context.selectedDates.length-1]],s=e.context.selectedDates[0]!==e.context.selectedDates[e.context.selectedDates.length-1],o=parseDates([`${n}:${i}`]).filter(t=>!e.context.disableDates.includes(t)),a=s?e.enableEdgeDatesOnly?[n,i]:o:[e.context.selectedDates[0],e.context.selectedDates[0]];if(setContext(e,"selectedDates",a),e.disableDatesGaps&&(setContext(e,"displayDateMin",state.rangeMin),setContext(e,"displayDateMax",state.rangeMax)),state.self.context.mainElement.removeEventListener("mousemove",optimizedHandleHoverDatesEvent),state.self.context.mainElement.removeEventListener("mouseleave",handleMouseLeave),state.self.context.mainElement.removeEventListener("keydown",handleCancelSelectionDates),e.onCreateDateRangeTooltip)return e.context.selectedDates[0]||(state.self.context.mainElement.removeEventListener("mousemove",optimizedHandleHoverSelectedDatesRangeEvent),state.self.context.mainElement.removeEventListener("mouseleave",handleMouseLeave),createDateRangeTooltip(state.self,state.tooltipEl,null)),e.context.selectedDates[0]&&(state.self.context.mainElement.addEventListener("mousemove",optimizedHandleHoverSelectedDatesRangeEvent),state.self.context.mainElement.addEventListener("mouseleave",handleMouseLeave),createDateRangeTooltip(state.self,state.tooltipEl,t)),()=>{state.self.context.mainElement.removeEventListener("mousemove",optimizedHandleHoverSelectedDatesRangeEvent),state.self.context.mainElement.removeEventListener("mouseleave",handleMouseLeave)}}})[1===e.context.selectedDates.length?"set":"reset"]()},updateDateModifier=e=>{e.context.mainElement.querySelectorAll("[data-vc-date]").forEach(t=>{const n=t.querySelector("[data-vc-date-btn]"),i=t.dataset.vcDate,s=getDate(i).getDay();setDateModifier(e,e.context.selectedYear,t,n,s,i,"current")})},handleClickDate=(e,t)=>{var n;const i=t.target,s=i.closest("[data-vc-date-btn]");if(!e.selectionDatesMode||!["single","multiple","multiple-ranged"].includes(e.selectionDatesMode)||!s)return;const o=s.closest("[data-vc-date]");({single:()=>handleSelectDate(e,o,!1),multiple:()=>handleSelectDate(e,o,!0),"multiple-ranged":()=>handleSelectDateRange(e,o)})[e.selectionDatesMode](),null==(n=e.context.selectedDates)||n.sort((e,t)=>+new Date(e)-+new Date(t)),e.onClickDate&&e.onClickDate(e,t),e.inputMode&&e.context.inputElement&&e.context.mainElement&&e.onChangeToInput&&e.onChangeToInput(e,t);const a=i.closest('[data-vc-date-month="prev"]'),l=i.closest('[data-vc-date-month="next"]');({prev:()=>e.enableMonthChangeOnDayClick?handleMonth(e,"prev"):updateDateModifier(e),next:()=>e.enableMonthChangeOnDayClick?handleMonth(e,"next"):updateDateModifier(e),current:()=>updateDateModifier(e)})[a?"prev":l?"next":"current"]()},typeClick=["month","year"],getValue=(e,t,n)=>{const{currentValue:i,columnID:s}=getColumnID(e,t);return"month"===e.context.currentType&&s>=0?n-s:"year"===e.context.currentType&&e.context.selectedYear!==i?n-1:n},handleMultipleYearSelection=(e,t)=>{const n=getValue(e,"year",Number(t.dataset.vcYearsYear)),i=getDate(e.context.dateMin),s=getDate(e.context.dateMax),o=e.context.displayMonthsCount-1,{columnID:a}=getColumnID(e,"year"),l=e.context.selectedMonth<i.getMonth()&&n<=i.getFullYear(),r=e.context.selectedMonth>s.getMonth()-o+a&&n>=s.getFullYear(),c=n<i.getFullYear(),d=n>s.getFullYear(),u=l||c?i.getFullYear():r||d?s.getFullYear():n,h=l||c?i.getMonth():r||d?s.getMonth()-o+a:e.context.selectedMonth;setContext(e,"selectedYear",u),setContext(e,"selectedMonth",h)},handleMultipleMonthSelection=(e,t)=>{const n=t.closest('[data-vc-column="month"]').querySelector('[data-vc="year"]'),i=getValue(e,"month",Number(t.dataset.vcMonthsMonth)),s=Number(n.dataset.vcYear),o=getDate(e.context.dateMin),a=getDate(e.context.dateMax),l=i<o.getMonth()&&s<=o.getFullYear(),r=i>a.getMonth()&&s>=a.getFullYear();setContext(e,"selectedYear",s),setContext(e,"selectedMonth",l?o.getMonth():r?a.getMonth():i)},handleItemClick=(e,t,n,i)=>{var s;({year:()=>{if("multiple"===e.type)return handleMultipleYearSelection(e,i);setContext(e,"selectedYear",Number(i.dataset.vcYearsYear))},month:()=>{if("multiple"===e.type)return handleMultipleMonthSelection(e,i);setContext(e,"selectedMonth",Number(i.dataset.vcMonthsMonth))}})[n](),{year:()=>{var n;return null==(n=e.onClickYear)?void 0:n.call(e,e,t)},month:()=>{var n;return null==(n=e.onClickMonth)?void 0:n.call(e,e,t)}}[n](),e.context.currentType!==e.type?(setContext(e,"currentType",e.type),create(e),null==(s=e.context.mainElement.querySelector(`[data-vc="${n}"]`))||s.focus()):setYearModifier(e,i,n,!0,!0)},handleClickType=(e,t,n)=>{var i;const s=t.target,o=s.closest(`[data-vc="${n}"]`),a={year:()=>createYears(e,s),month:()=>createMonths(e,s)};if(o&&e.onClickTitle&&e.onClickTitle(e,t),o&&e.context.currentType!==n)return a[n]();const l=s.closest(`[data-vc-${n}s-${n}]`);if(l)return handleItemClick(e,t,n,l);const r=s.closest('[data-vc="grid"]'),c=s.closest('[data-vc="column"]');(e.context.currentType===n&&o||"multiple"===e.type&&e.context.currentType===n&&r&&!c)&&(setContext(e,"currentType",e.type),create(e),null==(i=e.context.mainElement.querySelector(`[data-vc="${n}"]`))||i.focus())},handleClickMonthOrYear=(e,t)=>{const n={month:e.selectionMonthsMode,year:e.selectionYearsMode};typeClick.forEach(i=>{n[i]&&t.target&&handleClickType(e,t,i)})},handleClickWeekNumber=(e,t)=>{if(!e.enableWeekNumbers||!e.onClickWeekNumber)return;const n=t.target.closest("[data-vc-week-number]"),i=e.context.mainElement.querySelectorAll("[data-vc-date-week-number]");if(!n||!i[0])return;const s=Number(n.innerText),o=Number(n.dataset.vcWeekYear),a=Array.from(i).filter(e=>Number(e.dataset.vcDateWeekNumber)===s);e.onClickWeekNumber(e,s,o,a,t)},handleClickWeekDay=(e,t)=>{if(!e.onClickWeekDay)return;const n=t.target.closest("[data-vc-week-day]"),i=t.target.closest('[data-vc="column"]'),s=i?i.querySelectorAll("[data-vc-date-week-day]"):e.context.mainElement.querySelectorAll("[data-vc-date-week-day]");if(!n||!s[0])return;const o=Number(n.dataset.vcWeekDay),a=Array.from(s).filter(e=>Number(e.dataset.vcDateWeekDay)===o);e.onClickWeekDay(e,o,a,t)},handleClick=e=>{const t=t=>{handleClickArrow(e,t),handleClickWeekDay(e,t),handleClickWeekNumber(e,t),handleClickDate(e,t),handleClickMonthOrYear(e,t)};return e.context.mainElement.addEventListener("click",t),()=>e.context.mainElement.removeEventListener("click",t)},initMonthsCount=e=>{if("multiple"===e.type&&(e.displayMonthsCount<=1||e.displayMonthsCount>12))throw new Error(errorMessages.incorrectMonthsCount);if("multiple"!==e.type&&e.displayMonthsCount>1)throw new Error(errorMessages.incorrectMonthsCount);setContext(e,"displayMonthsCount",e.displayMonthsCount?e.displayMonthsCount:"multiple"===e.type?2:1)},getLocalDate=()=>{const e=new Date;return new Date(e.getTime()-6e4*e.getTimezoneOffset()).toISOString().substring(0,10)},resolveDate=(e,t)=>"today"===e?getLocalDate():e instanceof Date||"number"==typeof e||"string"==typeof e?parseDates([e])[0]:t,initRange=e=>{var t,n,i;const s=resolveDate(e.dateMin,e.dateMin),o=resolveDate(e.dateMax,e.dateMax),a=resolveDate(e.displayDateMin,s),l=resolveDate(e.displayDateMax,o);setContext(e,"dateToday",resolveDate(e.dateToday,e.dateToday)),setContext(e,"displayDateMin",a?getDate(s)>=getDate(a)?s:a:s),setContext(e,"displayDateMax",l?getDate(o)<=getDate(l)?o:l:o);const r=e.disableDatesPast&&!e.disableAllDates&&getDate(a)<getDate(e.context.dateToday);setContext(e,"displayDateMin",r||e.disableAllDates?e.context.dateToday:a),setContext(e,"displayDateMax",e.disableAllDates?e.context.dateToday:l),setContext(e,"disableDates",e.disableDates[0]&&!e.disableAllDates?parseDates(e.disableDates):e.disableAllDates?[e.context.displayDateMin]:[]),e.context.disableDates.length>1&&e.context.disableDates.sort((e,t)=>+new Date(e)-+new Date(t)),setContext(e,"enableDates",e.enableDates[0]?parseDates(e.enableDates):[]),(null==(t=e.context.enableDates)?void 0:t[0])&&(null==(n=e.context.disableDates)?void 0:n[0])&&setContext(e,"disableDates",e.context.disableDates.filter(t=>!e.context.enableDates.includes(t))),e.context.enableDates.length>1&&e.context.enableDates.sort((e,t)=>+new Date(e)-+new Date(t)),(null==(i=e.context.enableDates)?void 0:i[0])&&e.disableAllDates&&(setContext(e,"displayDateMin",e.context.enableDates[0]),setContext(e,"displayDateMax",e.context.enableDates[e.context.enableDates.length-1])),setContext(e,"dateMin",e.displayDisabledDates?s:e.context.displayDateMin),setContext(e,"dateMax",e.displayDisabledDates?o:e.context.displayDateMax)},initSelectedDates=e=>{var t;setContext(e,"selectedDates",(null==(t=e.selectedDates)?void 0:t[0])?parseDates(e.selectedDates):[])},displayClosestValidDate=e=>{const t=t=>{const n=new Date(t);setInitialContext(e,n.getMonth(),n.getFullYear())};if(e.displayDateMin&&"today"!==e.displayDateMin&&(n=e.displayDateMin,i=new Date,new Date(n).getTime()>i.getTime())){const n=e.selectedDates.length&&e.selectedDates[0]?parseDates(e.selectedDates)[0]:e.displayDateMin;return t(getDate(resolveDate(n,e.displayDateMin))),!0}var n,i;if(e.displayDateMax&&"today"!==e.displayDateMax&&((e,t)=>new Date(e).getTime()<t.getTime())(e.displayDateMax,new Date)){const n=e.selectedDates.length&&e.selectedDates[0]?parseDates(e.selectedDates)[0]:e.displayDateMax;return t(getDate(resolveDate(n,e.displayDateMax))),!0}return!1},setInitialContext=(e,t,n)=>{setContext(e,"selectedMonth",t),setContext(e,"selectedYear",n),setContext(e,"displayYear",n)},initSelectedMonthYear=e=>{var t;if(e.enableJumpToSelectedDate&&(null==(t=e.selectedDates)?void 0:t[0])&&void 0===e.selectedMonth&&void 0===e.selectedYear){const t=getDate(parseDates(e.selectedDates)[0]);return void setInitialContext(e,t.getMonth(),t.getFullYear())}if(displayClosestValidDate(e))return;const n=void 0!==e.selectedMonth&&Number(e.selectedMonth)>=0&&Number(e.selectedMonth)<12,i=void 0!==e.selectedYear&&Number(e.selectedYear)>=0&&Number(e.selectedYear)<=9999;setInitialContext(e,n?Number(e.selectedMonth):getDate(e.context.dateToday).getMonth(),i?Number(e.selectedYear):getDate(e.context.dateToday).getFullYear())},initTime=e=>{var t,n,i;if(!e.selectionTimeMode)return;if(![12,24].includes(e.selectionTimeMode))throw new Error(errorMessages.incorrectTime);const s=12===e.selectionTimeMode,o=s?/^(0[1-9]|1[0-2]):([0-5][0-9]) ?(AM|PM)?$/i:/^([0-1]?[0-9]|2[0-3]):([0-5][0-9])$/;let[a,l,r]=null!=(i=null==(n=null==(t=e.selectedTime)?void 0:t.match(o))?void 0:n.slice(1))?i:[];a?s&&!r&&(r="AM"):(a=s?transformTime12(String(e.timeMinHour)):String(e.timeMinHour),l=String(e.timeMinMinute),r=s?Number(transformTime12(String(e.timeMinHour)))>=12?"PM":"AM":null),setContext(e,"selectedHours",a.padStart(2,"0")),setContext(e,"selectedMinutes",l.padStart(2,"0")),setContext(e,"selectedKeeping",r),setContext(e,"selectedTime",`${e.context.selectedHours}:${e.context.selectedMinutes}${r?` ${r}`:""}`)},initAllVariables=e=>{setContext(e,"currentType",e.type),initMonthsCount(e),initRange(e),initSelectedMonthYear(e),initSelectedDates(e),initTime(e)},reset=(e,{year:t,month:n,dates:i,time:s,locale:o},a=!0)=>{var l;const r={year:e.selectedYear,month:e.selectedMonth,dates:e.selectedDates,time:e.selectedTime};e.selectedYear=t?r.year:e.context.selectedYear,e.selectedMonth=n?r.month:e.context.selectedMonth,e.selectedTime=s?r.time:e.context.selectedTime,e.selectedDates="only-first"===i&&(null==(l=e.context.selectedDates)?void 0:l[0])?[e.context.selectedDates[0]]:!0===i?r.dates:e.context.selectedDates,o&&setContext(e,"locale",{months:{short:[],long:[]},weekdays:{short:[],long:[]}}),initAllVariables(e),a&&create(e),e.selectedYear=r.year,e.selectedMonth=r.month,e.selectedDates=r.dates,e.selectedTime=r.time,"multiple-ranged"===e.selectionDatesMode&&i&&handleSelectDateRange(e,null)},createToInput=e=>{const t=document.createElement("div");return t.className=e.styles.calendar,t.dataset.vc="calendar",t.dataset.vcInput="",t.dataset.vcCalendarHidden="",setContext(e,"inputModeInit",!0),setContext(e,"isShowInInputMode",!1),setContext(e,"mainElement",t),document.body.appendChild(e.context.mainElement),reset(e,{year:!0,month:!0,dates:!0,time:!0,locale:!0}),setTimeout(()=>show(e)),e.onInit&&e.onInit(e),handleArrowKeys(e),handleClick(e)},canOpenOnFocus=e=>resolveToggle(e,e.openOnFocus),handleInput=e=>{setContext(e,"inputElement",e.context.mainElement);const t=()=>{e.context.inputModeInit?setTimeout(()=>show(e)):createToInput(e)};e.context.inputElement.addEventListener("click",t);const n="function"==typeof e.openOnFocus||!0===e.openOnFocus,i=()=>{shouldSkipOpenOnFocus(e)?clearSkipOpenOnFocus(e):canOpenOnFocus(e)&&t()};n&&e.context.inputElement.addEventListener("focus",i);const s=t=>{const n="Tab"===t.key&&!t.shiftKey,i=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key);(n||i)&&(t=>{var n;if(!e.context.isShowInInputMode)return!1;if(document.activeElement!==e.context.inputElement)return!1;const i=e=>e.tabIndex>=0&&!e.hasAttribute("disabled")&&"true"!==e.getAttribute("aria-disabled"),s=null!=(n=document.createTreeWalker(e.context.mainElement,NodeFilter.SHOW_ELEMENT,{acceptNode:e=>i(e)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}).nextNode())?n:i(e.context.mainElement)?e.context.mainElement:null;!s||s.tabIndex<0||(t.preventDefault(),s.focus())})(t)};return e.context.inputElement.addEventListener("keydown",s),()=>{e.context.inputElement.removeEventListener("click",t),n&&e.context.inputElement.removeEventListener("focus",i),e.context.inputElement.removeEventListener("keydown",s)}},init=e=>(setContext(e,"originalElement",e.context.mainElement.cloneNode(!0)),setContext(e,"isInit",!0),e.inputMode?handleInput(e):(initAllVariables(e),create(e),e.onInit&&e.onInit(e),handleArrowKeys(e),handleClick(e))),update=(e,t)=>{if(!e.context.isInit)throw new Error(errorMessages.notInit);reset(e,__spreadValues(__spreadValues({},{year:!0,month:!0,dates:!0,time:!0,locale:!0}),t),!(e.inputMode&&!e.context.inputModeInit)),e.onUpdate&&e.onUpdate(e)},replaceProperties=(e,t)=>{const n=Object.keys(t);for(let i=0;i<n.length;i++){const s=n[i];"object"!=typeof e[s]||"object"!=typeof t[s]||t[s]instanceof Date||Array.isArray(t[s])?void 0!==t[s]&&(e[s]=t[s]):replaceProperties(e[s],t[s])}},set=(e,t,n)=>{replaceProperties(e,t),e.context.isInit&&update(e,n)};function findBestPickerPosition(e,t){const n="left";if(!t||!e)return n;const{canShow:i,parentPositions:s}=getAvailablePosition(e,t),o=i.left&&i.right;return(o&&i.bottom?"center":o&&i.top?["top","center"]:Array.isArray(s)?["bottom"===s[0]?"top":"bottom",...s.slice(1)]:s)||n}const setPosition=(e,t,n)=>{if(!e)return;const i="auto"===n?findBestPickerPosition(e,t):n,s={top:-t.offsetHeight,bottom:e.offsetHeight,left:0,center:e.offsetWidth/2-t.offsetWidth/2,right:e.offsetWidth-t.offsetWidth},o=Array.isArray(i)?i[0]:"bottom",a=Array.isArray(i)?i[1]:i;t.dataset.vcPosition=o;const{top:l,left:r}=getOffset(e),c=l+s[o];let d=r+s[a];const{vw:u}=getViewportDimensions();if(d+t.clientWidth>u){const e=window.innerWidth-document.body.clientWidth;d=u-t.clientWidth-e}else d<0&&(d=0);Object.assign(t.style,{left:`${d}px`,top:`${c}px`})},show=e=>{if(e.context.isShowInInputMode)return;if(!e.context.currentType)return void e.context.mainElement.click();setContext(e,"cleanupHandlers",[]),setContext(e,"isShowInInputMode",!0),e.inputMode&&restoreTabbing(e.context.mainElement),setPosition(e.context.inputElement,e.context.mainElement,e.positionToInput),e.context.mainElement.removeAttribute("data-vc-calendar-hidden");const t=()=>{setPosition(e.context.inputElement,e.context.mainElement,e.positionToInput)};window.addEventListener("resize",t),e.context.cleanupHandlers.push(()=>window.removeEventListener("resize",t));const n=t=>{"Escape"===t.key&&hide(e)};document.addEventListener("keydown",n),e.context.cleanupHandlers.push(()=>document.removeEventListener("keydown",n));const i=t=>{t.target===e.context.inputElement||e.context.mainElement.contains(t.target)||hide(e)};document.addEventListener("click",i,{capture:!0}),e.context.cleanupHandlers.push(()=>document.removeEventListener("click",i,{capture:!0})),e.onShow&&e.onShow(e)},labels={application:"Calendar",navigation:"Calendar Navigation",arrowNext:{month:"Next month",year:"Next list of years"},arrowPrev:{month:"Previous month",year:"Previous list of years"},month:"Select month, current selected month:",months:"List of months",year:"Select year, current selected year:",years:"List of years",week:"Days of the week",weekNumber:"Numbers of weeks in a year",dates:"Dates in the current month",selectingTime:"Selecting a time ",inputHour:"Hours",inputMinute:"Minutes",rangeHour:"Slider for selecting hours",rangeMinute:"Slider for selecting minutes",btnKeeping:"Switch AM/PM, current position:"},styles={calendar:"vc",controls:"vc-controls",grid:"vc-grid",column:"vc-column",header:"vc-header",headerContent:"vc-header__content",month:"vc-month",year:"vc-year",arrowPrev:"vc-arrow vc-arrow_prev",arrowNext:"vc-arrow vc-arrow_next",wrapper:"vc-wrapper",content:"vc-content",months:"vc-months",monthsMonth:"vc-months__month",years:"vc-years",yearsYear:"vc-years__year",week:"vc-week",weekDay:"vc-week__day",weekNumbers:"vc-week-numbers",weekNumbersTitle:"vc-week-numbers__title",weekNumbersContent:"vc-week-numbers__content",weekNumber:"vc-week-number",dates:"vc-dates",datesRow:"vc-dates__row",date:"vc-date",dateBtn:"vc-date__btn",datePopup:"vc-date__popup",dateRangeTooltip:"vc-date-range-tooltip",time:"vc-time",timeContent:"vc-time__content",timeHour:"vc-time__hour",timeMinute:"vc-time__minute",timeKeeping:"vc-time__keeping",timeRanges:"vc-time__ranges",timeRange:"vc-time__range"};class OptionsCalendar{constructor(){__publicField(this,"type","default"),__publicField(this,"inputMode",!1),__publicField(this,"openOnFocus",!0),__publicField(this,"positionToInput","left"),__publicField(this,"firstWeekday",1),__publicField(this,"monthsToSwitch",1),__publicField(this,"themeAttrDetect","html[data-theme]"),__publicField(this,"locale","en"),__publicField(this,"dateToday","today"),__publicField(this,"dateMin","1970-01-01"),__publicField(this,"dateMax","2470-12-31"),__publicField(this,"displayDateMin"),__publicField(this,"displayDateMax"),__publicField(this,"displayDatesOutside",!0),__publicField(this,"displayDisabledDates",!1),__publicField(this,"displayMonthsCount"),__publicField(this,"disableDates",[]),__publicField(this,"disableAllDates",!1),__publicField(this,"disableDatesPast",!1),__publicField(this,"disableDatesGaps",!1),__publicField(this,"disableWeekdays",[]),__publicField(this,"disableToday",!1),__publicField(this,"enableDates",[]),__publicField(this,"enableEdgeDatesOnly",!0),__publicField(this,"enableDateToggle",!0),__publicField(this,"enableWeekNumbers",!1),__publicField(this,"enableMonthChangeOnDayClick",!0),__publicField(this,"enableJumpToSelectedDate",!1),__publicField(this,"selectionDatesMode","single"),__publicField(this,"selectionMonthsMode",!0),__publicField(this,"selectionYearsMode",!0),__publicField(this,"selectionTimeMode",!1),__publicField(this,"selectedDates",[]),__publicField(this,"selectedMonth"),__publicField(this,"selectedYear"),__publicField(this,"selectedHolidays",[]),__publicField(this,"selectedWeekends",[0,6]),__publicField(this,"selectedTime"),__publicField(this,"selectedTheme","system"),__publicField(this,"timeMinHour",0),__publicField(this,"timeMaxHour",23),__publicField(this,"timeMinMinute",0),__publicField(this,"timeMaxMinute",59),__publicField(this,"timeControls","all"),__publicField(this,"timeStepHour",1),__publicField(this,"timeStepMinute",1),__publicField(this,"sanitizerHTML",e=>e),__publicField(this,"onClickDate"),__publicField(this,"onClickWeekDay"),__publicField(this,"onClickWeekNumber"),__publicField(this,"onClickTitle"),__publicField(this,"onClickMonth"),__publicField(this,"onClickYear"),__publicField(this,"onClickArrow"),__publicField(this,"onChangeTime"),__publicField(this,"onChangeToInput"),__publicField(this,"onCreateDateRangeTooltip"),__publicField(this,"onCreateDateEls"),__publicField(this,"onCreateMonthEls"),__publicField(this,"onCreateYearEls"),__publicField(this,"onInit"),__publicField(this,"onUpdate"),__publicField(this,"onDestroy"),__publicField(this,"onShow"),__publicField(this,"onHide"),__publicField(this,"popups",{}),__publicField(this,"labels",__spreadValues({},labels)),__publicField(this,"layouts",{default:"",multiple:"",month:"",year:""}),__publicField(this,"styles",__spreadValues({},styles))}}const _Calendar=class e extends OptionsCalendar{constructor(t,n){var i;super(),__publicField(this,"init",()=>init(this)),__publicField(this,"update",e=>update(this,e)),__publicField(this,"destroy",()=>destroy(this)),__publicField(this,"show",()=>show(this)),__publicField(this,"hide",()=>hide(this)),__publicField(this,"set",(e,t)=>set(this,e,t)),__publicField(this,"context"),this.context=__spreadProps(__spreadValues({},this.context),{locale:{months:{short:[],long:[]},weekdays:{short:[],long:[]}}}),setContext(this,"mainElement","string"==typeof t?null!=(i=e.memoizedElements.get(t))?i:this.queryAndMemoize(t):t),n&&replaceProperties(this,n)}queryAndMemoize(t){const n=document.querySelector(t);if(!n)throw new Error(errorMessages.notFoundSelector(t));return e.memoizedElements.set(t,n),n}};__publicField(_Calendar,"memoizedElements",new Map);let Calendar=_Calendar;const NAME$f="datepicker",DATA_KEY$b="bs.datepicker",EVENT_KEY$c=`.${DATA_KEY$b}`,DATA_API_KEY$7=".data-api",EVENT_CHANGE$2=`change${EVENT_KEY$c}`,EVENT_SHOW$4=`show${EVENT_KEY$c}`,EVENT_SHOWN$3=`shown${EVENT_KEY$c}`,EVENT_HIDE$3=`hide${EVENT_KEY$c}`,EVENT_HIDDEN$5=`hidden${EVENT_KEY$c}`,EVENT_CLICK_DATA_API$3=`click${EVENT_KEY$c}.data-api`,EVENT_FOCUSIN_DATA_API=`focusin${EVENT_KEY$c}.data-api`,SELECTOR_DATA_TOGGLE$6='[data-bs-toggle="datepicker"]',HIDE_DELAY=100,Default$e={datepickerTheme:null,dateMin:null,dateMax:null,dateFormat:null,displayElement:null,displayMonthsCount:1,firstWeekday:1,inline:!1,locale:"default",positionElement:null,selectedDates:[],selectionMode:"single",placement:"left",vcpOptions:{}},DefaultType$e={datepickerTheme:"(null|string)",dateMin:"(null|string|number|object)",dateMax:"(null|string|number|object)",dateFormat:"(null|object|function)",displayElement:"(null|string|element|boolean)",displayMonthsCount:"number",firstWeekday:"number",inline:"boolean",locale:"string",positionElement:"(null|string|element)",selectedDates:"array",selectionMode:"string",placement:"string",vcpOptions:"object"};class Datepicker extends BaseComponent{constructor(e,t){super(e,t),this._calendar=null,this._isShown=!1,this._initCalendar()}static get Default(){return Default$e}static get DefaultType(){return DefaultType$e}static get NAME(){return NAME$f}toggle(){if(!this._config.inline)return this._isShown?this.hide():this.show()}show(){this._config.inline||!this._calendar||isDisabled(this._element)||this._isShown||EventHandler.trigger(this._element,EVENT_SHOW$4).defaultPrevented||(this._calendar.show(),this._isShown=!0,EventHandler.trigger(this._element,EVENT_SHOWN$3))}hide(){this._config.inline||this._calendar&&this._isShown&&(EventHandler.trigger(this._element,EVENT_HIDE$3).defaultPrevented||(this._calendar.hide(),this._isShown=!1,EventHandler.trigger(this._element,EVENT_HIDDEN$5)))}dispose(){this._themeObserver&&(this._themeObserver.disconnect(),this._themeObserver=null),this._calendar&&this._calendar.destroy(),this._calendar=null,super.dispose()}getSelectedDates(){const e=this._calendar?.context?.selectedDates;return e?[...e]:[]}setSelectedDates(e){this._calendar&&this._calendar.set({selectedDates:e})}_initCalendar(){this._isInput="INPUT"===this._element.tagName,this._isInline=this._config.inline,this._isInline&&!this._isInput&&(this._boundInput=this._element.querySelector('input[type="hidden"], input[name]')),this._positionElement=this._resolvePositionElement(),this._displayElement=this._resolveDisplayElement();const e=this._buildCalendarOptions();this._calendar=new Calendar(this._positionElement,e),this._calendar.init(),this._setupThemeObserver(),this._isInput&&this._element.value&&this._parseInputValue(),this._updateDisplayWithSelectedDates()}_updateDisplayWithSelectedDates(){const{selectedDates:e}=this._config;if(!e||0===e.length)return;const t=this._formatDateForInput(e);this._isInput&&(this._element.value=t),this._boundInput&&(this._boundInput.value=e.join(",")),this._displayElement&&(this._displayElement.textContent=t)}_resolvePositionElement(){let{positionElement:e}=this._config;if("string"==typeof e&&(e=document.querySelector(e)),!e&&this._isInput&&!this._isInline){const t=this._element.closest(".form-adorn");t&&(e=t)}return e||this._element}_resolveDisplayElement(){const{displayElement:e}=this._config;return"string"==typeof e?document.querySelector(e):!0===e||null===e&&!this._isInput&&!this._isInline?this._element.querySelector("[data-bs-datepicker-display]")||this._element:e}_getThemeAncestor(){return this._element.closest("[data-bs-theme]")}_getEffectiveTheme(){const{datepickerTheme:e}=this._config;if(e)return e;const t=this._getThemeAncestor();return t?.getAttribute("data-bs-theme")||null}_syncThemeAttribute(e){if(!e)return;const t=this._getEffectiveTheme();t?e.setAttribute("data-bs-theme",t):e.removeAttribute("data-bs-theme")}_setupThemeObserver(){const e=this._getThemeAncestor();e&&!this._config.datepickerTheme&&(this._themeObserver=new MutationObserver(()=>{this._syncThemeAttribute(this._calendar?.context?.mainElement)}),this._themeObserver.observe(e,{attributes:!0,attributeFilter:["data-bs-theme"]}))}_buildCalendarOptions(){const e=this._getEffectiveTheme(),t=e&&"auto"!==e?e:"system",n={...this._config.vcpOptions,inputMode:!this._isInline,positionToInput:this._config.placement,firstWeekday:this._config.firstWeekday,locale:this._config.locale,selectionDatesMode:this._config.selectionMode,selectedDates:this._config.selectedDates,displayMonthsCount:this._config.displayMonthsCount,type:this._config.displayMonthsCount>1?"multiple":"default",selectedTheme:t,themeAttrDetect:"[data-bs-theme]",onClickDate:(e,t)=>this._handleDateClick(e,t),onInit:e=>{this._syncThemeAttribute(e.context.mainElement)},onShow:()=>{this._isShown=!0,this._syncThemeAttribute(this._calendar.context.mainElement)},onHide:()=>{this._isShown=!1}};if(this._config.selectedDates.length>0){const e=this._parseDate(this._config.selectedDates[0]);n.selectedMonth=e.getMonth(),n.selectedYear=e.getFullYear()}return this._config.dateMin&&(n.dateMin=this._config.dateMin),this._config.dateMax&&(n.dateMax=this._config.dateMax),n}_handleDateClick(e,t){const n=[...e.context.selectedDates];if(n.length>0){const e=this._formatDateForInput(n);this._isInput&&(this._element.value=e),this._boundInput&&(this._boundInput.value=n.join(",")),this._displayElement&&(this._displayElement.textContent=e)}EventHandler.trigger(this._element,EVENT_CHANGE$2,{dates:n,event:t}),this._maybeHideAfterSelection(n)}_maybeHideAfterSelection(e){this._isInline||("single"===this._config.selectionMode&&e.length>0||"multiple-ranged"===this._config.selectionMode&&e.length>=2)&&setTimeout(()=>this.hide(),100)}_parseDate(e){const[t,n,i]=e.split("-");return new Date(t,n-1,i)}_formatDate(e){const t=this._parseDate(e),n="default"===this._config.locale?void 0:this._config.locale,{dateFormat:i}=this._config;return"function"==typeof i?i(t,n):i&&"object"==typeof i?new Intl.DateTimeFormat(n,i).format(t):t.toLocaleDateString(n)}_formatDateForInput(e){if(0===e.length)return"";if(1===e.length)return this._formatDate(e[0]);const t="multiple-ranged"===this._config.selectionMode?" – ":", ";return e.map(e=>this._formatDate(e)).join(t)}_parseInputValue(){const e=this._element.value.trim();if(!e)return;const t=new Date(e);if(!Number.isNaN(t.getTime())){const e=`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`;this._calendar.set({selectedDates:[e]})}}}EventHandler.on(document,EVENT_CLICK_DATA_API$3,SELECTOR_DATA_TOGGLE$6,function(e){"INPUT"!==this.tagName&&"true"!==this.dataset.bsInline&&(e.preventDefault(),Datepicker.getOrCreateInstance(this).toggle())}),EventHandler.on(document,EVENT_FOCUSIN_DATA_API,SELECTOR_DATA_TOGGLE$6,function(){"INPUT"===this.tagName&&Datepicker.getOrCreateInstance(this).show()}),EventHandler.on(document,`DOMContentLoaded${EVENT_KEY$c}.data-api`,()=>{const e=`${SELECTOR_DATA_TOGGLE$6}[data-bs-inline="true"], ${SELECTOR_DATA_TOGGLE$6}[data-bs-selected-dates]`;for(const t of document.querySelectorAll(e))Datepicker.getOrCreateInstance(t)});const CLASS_NAME_OPEN="dialog-open";class DialogBase extends BaseComponent{constructor(e,t){super(e,t),this._isTransitioning=!1,this._openedAsModal=!1,this._addDialogListeners()}static get NAME(){return"dialogbase"}toggle(e){return this._element.open?this.hide():this.show(e)}show(e){if(this._element.open||this._isTransitioning)return;if(EventHandler.trigger(this._element,this.constructor.eventName("show"),{relatedTarget:e}).defaultPrevented)return;this._isTransitioning=!0,this._onBeforeShow();const{modal:t,preventBodyScroll:n}=this._getShowOptions();this._showElement({modal:t,preventBodyScroll:n}),this._queueCallback(()=>{this._isTransitioning=!1,EventHandler.trigger(this._element,this.constructor.eventName("shown"),{relatedTarget:e})},this._element,this._isAnimated())}hide(){this._element.open&&!this._isTransitioning&&(EventHandler.trigger(this._element,this.constructor.eventName("hide")).defaultPrevented||(this._isTransitioning=!0,this._hideElement(),this._queueCallback(()=>{this._element.open&&this._closeAndCleanup(),this._element.classList.remove("hiding"),this._onAfterHide(),this._isTransitioning=!1,EventHandler.trigger(this._element,this.constructor.eventName("hidden"))},this._element,this._isAnimated())))}dispose(){this._element.open&&this._closeAndCleanup(),super.dispose()}_getShowOptions(){return{modal:!0,preventBodyScroll:!0}}_onBeforeShow(){}_onAfterHide(){}_isAnimated(){return!this._element.classList.contains(this._getInstantClassName())}_getInstantClassName(){return"dialog-instant"}_getStaticClassName(){return"dialog-static"}_onCancel(){}_showElement({modal:e=!0,preventBodyScroll:t=!0}={}){this._openedAsModal=e,e?this._element.showModal():this._element.show(),t&&document.documentElement.classList.add("dialog-open")}_hideElement(){this._hideChildComponents(),this._element.classList.add("hiding"),this._shouldDeferClose()||this._closeAndCleanup()}_closeAndCleanup(){this._element.close(),this._openedAsModal=!1,document.querySelector("dialog[open]:modal")||document.documentElement.classList.remove("dialog-open")}_shouldDeferClose(){return!1}_triggerBackdropTransition(){if(EventHandler.trigger(this._element,this.constructor.eventName("hidePrevented")).defaultPrevented)return;const e=this._getStaticClassName();this._element.classList.add(e),this._queueCallback(()=>{this._element.classList.remove(e)},this._element)}_hideChildComponents(){for(const e of SelectorEngine.find('[data-bs-toggle="tooltip"], [data-bs-toggle="popover"]',this._element)){const t=Data.getAny(e);t&&"function"==typeof t.hide&&t.hide()}for(const e of SelectorEngine.find(".toast.show",this._element)){const t=Data.getAny(e);t&&"function"==typeof t.hide&&t.hide()}}_addDialogListeners(){const e=this.constructor.EVENT_KEY;EventHandler.on(this._element,"cancel",e=>{e.preventDefault(),this._config.keyboard?(this._onCancel(),this.hide()):this._triggerBackdropTransition()}),EventHandler.on(this._element,`keydown${e}`,e=>{"Escape"!==e.key||this._openedAsModal||(e.preventDefault(),this._config.keyboard&&(this._onCancel(),this.hide()))}),EventHandler.on(this._element,`click${e}`,e=>{e.target===this._element&&this._openedAsModal&&("static"!==this._config.backdrop?this.hide():this._triggerBackdropTransition())})}}const NAME$e="dialog",DATA_KEY$a="bs.dialog",EVENT_KEY$b=`.${DATA_KEY$a}`,DATA_API_KEY$6=".data-api",EVENT_SHOW$3=`show${EVENT_KEY$b}`,EVENT_HIDDEN$4=`hidden${EVENT_KEY$b}`,EVENT_CANCEL=`cancel${EVENT_KEY$b}`,EVENT_CLICK_DATA_API$2=`click${EVENT_KEY$b}.data-api`,CLASS_NAME_NONMODAL="dialog-nonmodal",CLASS_NAME_INSTANT="dialog-instant",CLASS_NAME_SWAP_IN="dialog-swap-in",SELECTOR_DATA_TOGGLE$5='[data-bs-toggle="dialog"]',Default$d={backdrop:!0,keyboard:!0,modal:!0},DefaultType$d={backdrop:"(boolean|string)",keyboard:"boolean",modal:"boolean"};class Dialog extends DialogBase{static get Default(){return Default$d}static get DefaultType(){return DefaultType$d}static get NAME(){return NAME$e}handleUpdate(){}_getShowOptions(){return{modal:this._config.modal,preventBodyScroll:this._config.modal}}_onBeforeShow(){this._config.modal||this._element.classList.add("dialog-nonmodal")}_onAfterHide(){this._element.classList.remove("dialog-nonmodal")}_shouldDeferClose(){return this._isAnimated()}_onCancel(){EventHandler.trigger(this._element,EVENT_CANCEL)}}EventHandler.on(document,EVENT_CLICK_DATA_API$2,SELECTOR_DATA_TOGGLE$5,function(e){const t=SelectorEngine.getElementFromSelector(this);["A","AREA"].includes(this.tagName)&&e.preventDefault(),EventHandler.one(t,EVENT_SHOW$3,e=>{e.defaultPrevented||EventHandler.one(t,EVENT_HIDDEN$4,()=>{isVisible(this)&&this.focus({preventScroll:!0})})});const n=Manipulator.getDataAttributes(this),i=this.closest("dialog[open]");if(i&&i!==t){const e=Dialog.getOrCreateInstance(t,n);t.classList.add("dialog-swap-in"),e.show(this),EventHandler.one(t,`shown${EVENT_KEY$b}`,()=>{t.classList.remove("dialog-swap-in")});const s=Dialog.getInstance(i);return void(s&&(i.classList.add("dialog-instant"),EventHandler.one(i,EVENT_HIDDEN$4,()=>{i.classList.remove("dialog-instant")}),s.hide()))}Dialog.getOrCreateInstance(t,n).toggle(this)}),enableDismissTrigger(Dialog);const NAME$d="navoverflow",DATA_KEY$9="bs.navoverflow",EVENT_KEY$a=`.${DATA_KEY$9}`,EVENT_UPDATE=`update${EVENT_KEY$a}`,EVENT_OVERFLOW=`overflow${EVENT_KEY$a}`,CLASS_NAME_OVERFLOW="nav-overflow",CLASS_NAME_OVERFLOW_MENU="nav-overflow-menu",CLASS_NAME_HIDDEN="d-none",SELECTOR_NAV_ITEM=".nav-item",SELECTOR_NAV_LINK=".nav-link",SELECTOR_OVERFLOW_TOGGLE=".nav-overflow-toggle",SELECTOR_OVERFLOW_MENU=".nav-overflow-menu",SELECTOR_CUSTOM_ICON="[data-bs-overflow-icon]",CLASS_NAME_KEEP="nav-overflow-keep",Default$c={collapseBelow:0,iconPlacement:"start",menuPlacement:"bottom-end",moreText:"More",moreIcon:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"/></svg>',threshold:0},DefaultType$c={collapseBelow:"(number|string)",iconPlacement:"string",menuPlacement:"string",moreText:"string",moreIcon:"string",threshold:"number"};class NavOverflow extends BaseComponent{constructor(e,t){super(e,t),this._items=[],this._overflowItems=[],this._overflowMenu=null,this._overflowToggle=null,this._resizeObserver=null,this._collapseBelow=0,this._isInitialized=!1,this._init()}static get Default(){return Default$c}static get DefaultType(){return DefaultType$c}static get NAME(){return NAME$d}update(){this._calculateOverflow(),EventHandler.trigger(this._element,EVENT_UPDATE)}dispose(){this._resizeObserver&&this._resizeObserver.disconnect(),this._restoreItems(),this._overflowToggle&&this._overflowToggle.parentElement&&this._overflowToggle.parentElement.remove(),super.dispose()}_init(){this._element.classList.add("nav-overflow"),this._items=[...SelectorEngine.find(".nav-item",this._element)];for(const[e,t]of this._items.entries())t.dataset.bsNavOrder=e;this._collapseBelow=this._resolveCollapseBelow(),this._createOverflowMenu(),this._setupResizeObserver(),this._calculateOverflow(),this._isInitialized=!0}_createOverflowMenu(){if(this._overflowToggle=SelectorEngine.findOne(".nav-overflow-toggle",this._element),this._overflowToggle)return void(this._overflowMenu=SelectorEngine.findOne(".nav-overflow-menu",this._element));const e=`<span class="nav-overflow-icon">${this._resolveIcon()}</span>`,t=`<span class="nav-overflow-text">${this._config.moreText}</span>`,n="end"===this._config.iconPlacement?`${t}${e}`:`${e}${t}`,i=document.createElement("li");i.className="nav-item nav-overflow-item",i.innerHTML=`\n      <button class="nav-link nav-overflow-toggle" type="button" data-bs-toggle="menu" data-bs-placement="${this._config.menuPlacement}" aria-expanded="false">\n        ${n}\n      </button>\n      <div class="nav-overflow-menu menu"></div>\n    `,this._element.append(i),this._overflowToggle=i.querySelector(".nav-overflow-toggle"),this._overflowMenu=i.querySelector(".nav-overflow-menu")}_resolveIcon(){const e=SelectorEngine.findOne(SELECTOR_CUSTOM_ICON,this._element);if(!e)return this._config.moreIcon;const t=e.cloneNode(!0);t.removeAttribute("data-bs-overflow-icon");const n=t.outerHTML;return e.remove(),n}_resolveCollapseBelow(){const e=this._config.collapseBelow;if("number"==typeof e)return e;if("string"==typeof e&&""!==e){const t=getComputedStyle(document.documentElement).getPropertyValue(`--bs-breakpoint-${e}`);return Number.parseFloat(t)||0}return 0}_setupResizeObserver(){"undefined"!=typeof ResizeObserver?(this._resizeObserver=new ResizeObserver(()=>{this._calculateOverflow()}),this._resizeObserver.observe(this._element)):EventHandler.on(window,"resize",()=>this._calculateOverflow())}_calculateOverflow(){this._restoreItems();const e=this._element.offsetWidth,t=this._overflowToggle?.closest(".nav-item");if(this._collapseBelow>0&&e<this._collapseBelow){const e=this._items.filter(e=>!e.classList.contains(CLASS_NAME_KEEP));return this._moveToOverflow(e),t&&(e.length>0?t.classList.remove("d-none"):t.classList.add("d-none")),void(e.length>0&&EventHandler.trigger(this._element,EVENT_OVERFLOW,{overflowCount:e.length,visibleCount:this._items.length-e.length}))}let n=0;const i=[],s=e-(t?.offsetWidth||0)-this._items.filter(e=>e.classList.contains(CLASS_NAME_KEEP)).reduce((e,t)=>e+t.offsetWidth,0)-10;for(const e of this._items)e.classList.contains(CLASS_NAME_KEEP)||(n+=e.offsetWidth,n>s&&i.push(e));if(this._items.length-i.length<this._config.threshold&&this._items.length>this._config.threshold){const e=this._items.slice(this._config.threshold).filter(e=>!e.classList.contains(CLASS_NAME_KEEP));i.length=0,i.push(...e)}this._moveToOverflow(i),t&&(i.length>0?t.classList.remove("d-none"):t.classList.add("d-none")),i.length>0&&EventHandler.trigger(this._element,EVENT_OVERFLOW,{overflowCount:i.length,visibleCount:this._items.length-i.length})}_moveToOverflow(e){if(this._overflowMenu){this._overflowMenu.innerHTML="",this._overflowItems=[];for(const t of e){const e=SelectorEngine.findOne(".nav-link",t);if(!e)continue;const n=e.cloneNode(!0);n.className="menu-item",e.classList.contains("active")&&n.classList.add("active"),(e.classList.contains("disabled")||e.hasAttribute("disabled"))&&n.classList.add("disabled"),this._overflowMenu.append(n),t.classList.add("d-none"),t.dataset.bsNavOverflow="true",this._overflowItems.push(t)}}}_restoreItems(){for(const e of this._items)e.classList.remove("d-none"),delete e.dataset.bsNavOverflow;this._overflowMenu&&(this._overflowMenu.innerHTML=""),this._overflowItems=[]}}EventHandler.on(document,"DOMContentLoaded",()=>{for(const e of SelectorEngine.find('[data-bs-toggle="nav-overflow"]'))NavOverflow.getOrCreateInstance(e)});const NAME$c="swipe",EVENT_KEY$9=".bs.swipe",EVENT_TOUCHSTART="touchstart.bs.swipe",EVENT_TOUCHMOVE="touchmove.bs.swipe",EVENT_TOUCHEND="touchend.bs.swipe",EVENT_POINTERDOWN="pointerdown.bs.swipe",EVENT_POINTERUP="pointerup.bs.swipe",POINTER_TYPE_TOUCH="touch",POINTER_TYPE_PEN="pen",CLASS_NAME_POINTER_EVENT="pointer-event",SWIPE_THRESHOLD=40,Default$b={endCallback:null,leftCallback:null,rightCallback:null,upCallback:null,downCallback:null},DefaultType$b={endCallback:"(function|null)",leftCallback:"(function|null)",rightCallback:"(function|null)",upCallback:"(function|null)",downCallback:"(function|null)"};class Swipe extends Config{constructor(e,t){super(),this._element=e,e&&Swipe.isSupported()&&(this._config=this._getConfig(t),this._deltaX=0,this._deltaY=0,this._supportPointerEvents=Boolean(window.PointerEvent),this._initEvents())}static get Default(){return Default$b}static get DefaultType(){return DefaultType$b}static get NAME(){return NAME$c}dispose(){EventHandler.off(this._element,".bs.swipe")}_start(e){if(!this._supportPointerEvents)return this._deltaX=e.touches[0].clientX,void(this._deltaY=e.touches[0].clientY);this._eventIsPointerPenTouch(e)&&(this._deltaX=e.clientX,this._deltaY=e.clientY)}_end(e){this._eventIsPointerPenTouch(e)&&(this._deltaX=e.clientX-this._deltaX,this._deltaY=e.clientY-this._deltaY),this._handleSwipe(),execute(this._config.endCallback)}_move(e){if(e.touches&&e.touches.length>1)return this._deltaX=0,void(this._deltaY=0);this._deltaX=e.touches[0].clientX-this._deltaX,this._deltaY=e.touches[0].clientY-this._deltaY}_handleSwipe(){const e=Math.abs(this._deltaX),t=Math.abs(this._deltaY);if(t>e&&t>40){const e=this._deltaY>0?"down":"up";return this._deltaX=0,this._deltaY=0,void execute("down"===e?this._config.downCallback:this._config.upCallback)}if(e>40){const t=e/this._deltaX;if(this._deltaX=0,this._deltaY=0,!t)return;return void execute(t>0?this._config.rightCallback:this._config.leftCallback)}this._deltaX=0,this._deltaY=0}_initEvents(){this._supportPointerEvents?(EventHandler.on(this._element,EVENT_POINTERDOWN,e=>this._start(e)),EventHandler.on(this._element,EVENT_POINTERUP,e=>this._end(e)),this._element.classList.add("pointer-event")):(EventHandler.on(this._element,EVENT_TOUCHSTART,e=>this._start(e)),EventHandler.on(this._element,EVENT_TOUCHMOVE,e=>this._move(e)),EventHandler.on(this._element,EVENT_TOUCHEND,e=>this._end(e)))}_eventIsPointerPenTouch(e){return this._supportPointerEvents&&("pen"===e.pointerType||"touch"===e.pointerType)}static isSupported(){return"ontouchstart"in document.documentElement||navigator.maxTouchPoints>0}}const NAME$b="drawer",DATA_KEY$8="bs.drawer",EVENT_KEY$8=`.${DATA_KEY$8}`,DATA_API_KEY$5=".data-api",EVENT_LOAD_DATA_API$2=`load${EVENT_KEY$8}.data-api`,EVENT_HIDDEN$3=`hidden${EVENT_KEY$8}`,EVENT_RESIZE$1=`resize${EVENT_KEY$8}`,EVENT_CLICK_DATA_API$1=`click${EVENT_KEY$8}.data-api`,SELECTOR_DATA_TOGGLE$4='[data-bs-toggle="drawer"]',Default$a={backdrop:!0,keyboard:!0,scroll:!1},DefaultType$a={backdrop:"(boolean|string)",keyboard:"boolean",scroll:"boolean"};class Drawer extends DialogBase{constructor(e,t){super(e,t),this._swipeHelper=null}static get Default(){return Default$a}static get DefaultType(){return DefaultType$a}static get NAME(){return NAME$b}dispose(){this._swipeHelper&&this._swipeHelper.dispose(),super.dispose()}_getShowOptions(){return{modal:Boolean(this._config.backdrop)||!this._config.scroll,preventBodyScroll:!this._config.scroll}}_onBeforeShow(){this._initSwipe()}_getInstantClassName(){return"drawer-instant"}_getStaticClassName(){return"drawer-static"}_initSwipe(){if(this._swipeHelper||!Swipe.isSupported())return;const e={},t=this._element;t.classList.contains("drawer-bottom")?e.downCallback=()=>this.hide():t.classList.contains("drawer-top")?e.upCallback=()=>this.hide():t.classList.contains("drawer-end")?isRTL$1()?e.leftCallback=()=>this.hide():e.rightCallback=()=>this.hide():isRTL$1()?e.rightCallback=()=>this.hide():e.leftCallback=()=>this.hide(),this._swipeHelper=new Swipe(t,e)}}EventHandler.on(document,EVENT_CLICK_DATA_API$1,SELECTOR_DATA_TOGGLE$4,function(e){const t=SelectorEngine.getElementFromSelector(this);if(["A","AREA"].includes(this.tagName)&&e.preventDefault(),isDisabled(this))return;EventHandler.one(t,EVENT_HIDDEN$3,()=>{isVisible(this)&&this.focus({preventScroll:!0})});const n=SelectorEngine.findOne("dialog.drawer[open]");n&&n!==t&&Drawer.getInstance(n).hide(),Drawer.getOrCreateInstance(t).toggle(this)}),EventHandler.on(window,EVENT_LOAD_DATA_API$2,()=>{for(const e of SelectorEngine.find("dialog.drawer[open]"))Drawer.getOrCreateInstance(e).show()}),EventHandler.on(window,EVENT_RESIZE$1,()=>{for(const e of SelectorEngine.find('dialog[open][class*="\\:drawer"]'))"fixed"!==getComputedStyle(e).position&&Drawer.getOrCreateInstance(e).hide()}),enableDismissTrigger(Drawer);const NAME$a="strength",DATA_KEY$7="bs.strength",EVENT_KEY$7=`.${DATA_KEY$7}`,DATA_API_KEY$4=".data-api",EVENT_STRENGTH_CHANGE=`strengthChange${EVENT_KEY$7}`,SELECTOR_DATA_STRENGTH="[data-bs-strength]",STRENGTH_LEVELS=["weak","fair","good","strong"],Default$9={input:null,minLength:8,messages:{weak:"Weak",fair:"Fair",good:"Good",strong:"Strong"},weights:{minLength:1,extraLength:1,lowercase:1,uppercase:1,numbers:1,special:1,multipleSpecial:1,longPassword:1},thresholds:[2,4,6],scorer:null},DefaultType$9={input:"(string|element|null)",minLength:"number",messages:"object",weights:"object",thresholds:"array",scorer:"(function|null)"};class Strength extends BaseComponent{constructor(e,t){super(e,t),this._input=this._getInput(),this._segments=SelectorEngine.find(".strength-segment",this._element),this._textElement=SelectorEngine.findOne(".strength-text",this._element.parentElement),this._currentStrength=null,this._input&&(this._addEventListeners(),this._evaluate())}static get Default(){return Default$9}static get DefaultType(){return DefaultType$9}static get NAME(){return NAME$a}getStrength(){return this._currentStrength}evaluate(){this._evaluate()}_getInput(){if(this._config.input)return"string"==typeof this._config.input?SelectorEngine.findOne(this._config.input):this._config.input;const e=this._element.parentElement;return SelectorEngine.findOne('input[type="password"]',e)}_addEventListeners(){EventHandler.on(this._input,"input",()=>this._evaluate()),EventHandler.on(this._input,"change",()=>this._evaluate())}_evaluate(){const e=this._input.value,t=this._calculateScore(e),n=this._scoreToStrength(t);n!==this._currentStrength&&(this._currentStrength=n,this._updateUI(n,t),EventHandler.trigger(this._element,EVENT_STRENGTH_CHANGE,{strength:n,score:t,password:e.length>0?"***":""}))}_calculateScore(e){if(!e)return 0;if("function"==typeof this._config.scorer)return this._config.scorer(e);const{weights:t}=this._config;let n=0;return e.length>=this._config.minLength&&(n+=t.minLength),e.length>=this._config.minLength+4&&(n+=t.extraLength),/[a-z]/.test(e)&&(n+=t.lowercase),/[A-Z]/.test(e)&&(n+=t.uppercase),/\d/.test(e)&&(n+=t.numbers),/[!@#$%^&*(),.?":{}|<>]/.test(e)&&(n+=t.special),/[!@#$%^&*(),.?":{}|<>].*[!@#$%^&*(),.?":{}|<>]/.test(e)&&(n+=t.multipleSpecial),e.length>=16&&(n+=t.longPassword),n}_scoreToStrength(e){if(0===e)return null;const[t,n,i]=this._config.thresholds;return e<=t?"weak":e<=n?"fair":e<=i?"good":"strong"}_updateUI(e){e?this._element.dataset.bsStrength=e:delete this._element.dataset.bsStrength;const t=e?STRENGTH_LEVELS.indexOf(e):-1;for(const[e,n]of this._segments.entries())e<=t?n.classList.add("active"):n.classList.remove("active");if(this._textElement)if(e&&this._config.messages[e]){this._textElement.textContent=this._config.messages[e],this._textElement.dataset.bsStrength=e;const t={weak:"danger",fair:"warning",good:"info",strong:"success"};this._textElement.style.setProperty("--strength-color",`var(--${t[e]}-text)`)}else this._textElement.textContent="",delete this._textElement.dataset.bsStrength}}EventHandler.on(document,`DOMContentLoaded${EVENT_KEY$7}.data-api`,()=>{for(const e of SelectorEngine.find("[data-bs-strength]"))Strength.getOrCreateInstance(e)});const NAME$9="otpInput",DATA_KEY$6="bs.otpInput",EVENT_KEY$6=`.${DATA_KEY$6}`,DATA_API_KEY$3=".data-api",EVENT_COMPLETE=`complete${EVENT_KEY$6}`,EVENT_INPUT$1=`input${EVENT_KEY$6}`,EVENT_DOMCONTENT_LOADED=`DOMContentLoaded${EVENT_KEY$6}.data-api`,SELECTOR_DATA_OTP="[data-bs-otp]",SELECTOR_INPUT$1="input",SYNC_EVENTS=["blur","keyup","select"],CLASS_NAME_INPUT="otp-input",CLASS_NAME_RENDERED="otp-rendered",CLASS_NAME_SLOTS="otp-slots",CLASS_NAME_SLOT="otp-slot",CLASS_NAME_SLOT_FILLED="otp-slot-filled",CLASS_NAME_SLOT_ACTIVE="otp-slot-active",CLASS_NAME_SEPARATOR="otp-separator",MASK_CHARACTER="•",TYPES={numeric:{inputmode:"numeric",pattern:"[0-9]*",filter:/[^0-9]/g},alphanumeric:{inputmode:"text",pattern:"[A-Za-z0-9]*",filter:/[^A-Za-z0-9]/g},alpha:{inputmode:"text",pattern:"[A-Za-z]*",filter:/[^A-Za-z]/g}},Default$8={groups:null,length:null,mask:!1,separator:"·",type:"numeric"},DefaultType$8={groups:"(array|null)",length:"(number|null)",mask:"boolean",separator:"string",type:"string"};class OtpInput extends BaseComponent{constructor(e,t){super(e,t),this._input=SelectorEngine.findOne("input",this._element),this._input&&(this._type=TYPES[this._config.type]||TYPES.numeric,this._length=this._resolveLength(),this._slots=[],this._pointerActive=!1,this._pointerIndex=0,this._setupInput(),this._renderSlots(),this._addEventListeners(),this._render())}static get Default(){return Default$8}static get DefaultType(){return DefaultType$8}static get NAME(){return NAME$9}getValue(){return this._input.value}setValue(e){this._input.value=this._sanitize(String(e)),this._render(),this._checkComplete()}clear(){this._input.value="",this._render(),this._input.focus()}focus(){this._input.focus(),this._selectSlot(this._firstEmptyIndex()),this._render()}dispose(){EventHandler.off(this._input,"input",this._onInput),EventHandler.off(this._input,"beforeinput",this._onBeforeInput),EventHandler.off(this._input,"focus",this._onFocus),EventHandler.off(this._input,"pointerdown",this._onPointerDown),EventHandler.off(document,"selectionchange",this._onSelectionChange);for(const e of SYNC_EVENTS)EventHandler.off(this._input,e,this._onSync);this._slotsContainer?.remove(),this._element.classList.remove("otp-rendered"),super.dispose()}_resolveLength(){if(this._config.length)return this._config.length;const e=Number.parseInt(this._input.getAttribute("maxlength"),10);return Number.isNaN(e)||e<1?6:e}_setupInput(){const e=this._input;"number"!==e.type&&"password"!==e.type||(e.type="text"),e.classList.add("otp-input"),e.setAttribute("maxlength",String(this._length)),e.setAttribute("inputmode",this._type.inputmode),e.setAttribute("pattern",this._type.pattern),e.getAttribute("autocomplete")||e.setAttribute("autocomplete","one-time-code"),e.value&&(e.value=this._sanitize(e.value))}_renderSlots(){const e=document.createElement("div");e.className="otp-slots",e.setAttribute("aria-hidden","true");const{groups:t}=this._config;let n=0,i=0;for(let s=0;s<this._length;s++){const o=document.createElement("div");if(o.className="otp-slot",e.append(o),this._slots.push(o),Array.isArray(t)&&t.length>0&&(i++,i===t[n]&&s<this._length-1)){const s=document.createElement("div");s.className="otp-separator",s.textContent=this._config.separator,e.append(s),n=Math.min(n+1,t.length-1),i=0}}this._slotsContainer=e,this._element.append(e),this._element.classList.add("otp-rendered")}_addEventListeners(){this._onInput=()=>this._handleInput(),this._onBeforeInput=e=>this._handleBeforeInput(e),this._onPointerDown=e=>this._handlePointerDown(e),this._onFocus=()=>{if(this._pointerActive)return this._pointerActive=!1,this._selectSlot(this._pointerIndex),void this._render();this._selectSlot(this._firstEmptyIndex()),this._render()},this._onSync=()=>this._render(),this._onSelectionChange=()=>{document.activeElement===this._input&&this._render()},EventHandler.on(this._input,"input",this._onInput),EventHandler.on(this._input,"beforeinput",this._onBeforeInput),EventHandler.on(this._input,"focus",this._onFocus),EventHandler.on(this._input,"pointerdown",this._onPointerDown),EventHandler.on(document,"selectionchange",this._onSelectionChange);for(const e of SYNC_EVENTS)EventHandler.on(this._input,e,this._onSync)}_handleInput(){const e=this._sanitize(this._input.value);e!==this._input.value&&(this._input.value=e),document.activeElement===this._input&&this._selectSlot(this._firstEmptyIndex()),this._afterValueChange()}_handleBeforeInput(e){const{inputType:t,data:n}=e;if("insertText"===t&&n&&1===n.length){e.preventDefault();const t=this._sanitize(n);if(!t)return;const i=Math.min(this._input.selectionStart??0,this._length-1),s=[...this._input.value];return s[i]=t,this._input.value=s.join("").slice(0,this._length),this._selectSlot(i+1),void this._afterValueChange()}if("deleteContentBackward"===t){e.preventDefault();const t=this._input.selectionStart??0,n=this._input.selectionEnd??t,i=[...this._input.value];n>t?(i.splice(t,n-t),this._input.value=i.join(""),this._selectSlot(t)):t>0&&(i.splice(t-1,1),this._input.value=i.join(""),this._selectSlot(t-1)),this._afterValueChange()}}_handlePointerDown(e){const t=this._slotIndexFromPoint(e.clientX);if(null===t)return;const n=Math.min(t,this._firstEmptyIndex());if(document.activeElement===this._input)return e.preventDefault(),this._selectSlot(n),void this._render();this._pointerActive=!0,this._pointerIndex=n}_slotIndexFromPoint(e){for(const[t,n]of this._slots.entries())if(e<=n.getBoundingClientRect().right||t===this._slots.length-1)return t;return null}_afterValueChange(){this._render(),EventHandler.trigger(this._element,EVENT_INPUT$1,{value:this._input.value}),this._checkComplete()}_firstEmptyIndex(){return Math.min(this._input.value.length,this._length-1)}_selectSlot(e){const t=Math.max(0,Math.min(e,this._length-1)),n=t<this._input.value.length?t+1:t;this._input.setSelectionRange(t,n)}_sanitize(e){return e.replace(this._type.filter,"").slice(0,this._length)}_render(){const{value:e}=this._input,t=document.activeElement===this._input,n=Math.min(this._input.selectionStart??e.length,this._length-1);for(const[i,s]of this._slots.entries()){const o=e[i]??"";s.textContent=o&&this._config.mask?"•":o,s.classList.toggle("otp-slot-filled",Boolean(o)),s.classList.toggle("otp-slot-active",t&&i===n)}}_checkComplete(){const{value:e}=this._input;e.length===this._length&&EventHandler.trigger(this._element,EVENT_COMPLETE,{value:e})}}EventHandler.on(document,EVENT_DOMCONTENT_LOADED,()=>{for(const e of SelectorEngine.find("[data-bs-otp]"))OtpInput.getOrCreateInstance(e)});const NAME$8="chips",DATA_KEY$5="bs.chips",EVENT_KEY$5=".bs.chips",DATA_API_KEY$2=".data-api",EVENT_ADD="add.bs.chips",EVENT_REMOVE="remove.bs.chips",EVENT_CHANGE$1="change.bs.chips",EVENT_SELECT="select.bs.chips",SELECTOR_DATA_CHIPS="[data-bs-chips]",SELECTOR_GHOST_INPUT=".form-ghost",SELECTOR_CHIP=".chip",SELECTOR_CHIP_DISMISS=".chip-dismiss",CLASS_NAME_CHIP="chip",CLASS_NAME_CHIP_DISMISS="chip-dismiss",CLASS_NAME_ACTIVE$2="active",DEFAULT_DISMISS_ICON='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>',Default$7={separator:",",allowDuplicates:!1,maxChips:null,placeholder:"",dismissible:!0,dismissIcon:DEFAULT_DISMISS_ICON,createOnBlur:!0},DefaultType$7={separator:"(string|null)",allowDuplicates:"boolean",maxChips:"(number|null)",placeholder:"string",dismissible:"boolean",dismissIcon:"string",createOnBlur:"boolean"};class Chips extends BaseComponent{constructor(e,t){super(e,t),this._input=SelectorEngine.findOne(".form-ghost",this._element),this._chips=[],this._selectedChips=new Set,this._anchorChip=null,this._input||this._createInput(),this._initializeExistingChips(),this._addEventListeners()}static get Default(){return Default$7}static get DefaultType(){return DefaultType$7}static get NAME(){return NAME$8}add(e){const t=String(e).trim();if(!t)return null;if(!this._config.allowDuplicates&&this._chips.includes(t))return null;if(null!==this._config.maxChips&&this._chips.length>=this._config.maxChips)return null;if(EventHandler.trigger(this._element,EVENT_ADD,{value:t,relatedTarget:this._input}).defaultPrevented)return null;const n=this._createChip(t);return this._element.insertBefore(n,this._input),this._chips.push(t),EventHandler.trigger(this._element,EVENT_CHANGE$1,{values:this.getValues()}),n}remove(e){let t,n;return"string"==typeof e?(n=e,t=this._findChipByValue(n)):(t=e,n=this._getChipValue(t)),!(!t||!n)&&(!EventHandler.trigger(this._element,EVENT_REMOVE,{value:n,chip:t,relatedTarget:this._input}).defaultPrevented&&(this._selectedChips.delete(t),this._anchorChip===t&&(this._anchorChip=null),t.remove(),this._chips=this._chips.filter(e=>e!==n),EventHandler.trigger(this._element,EVENT_CHANGE$1,{values:this.getValues()}),!0))}removeSelected(){const e=[...this._selectedChips];for(const t of e)this.remove(t);this._input?.focus()}getValues(){return[...this._chips]}getSelectedValues(){return[...this._selectedChips].map(e=>this._getChipValue(e))}clear(){const e=SelectorEngine.find(".chip",this._element);for(const t of e)t.remove();this._chips=[],this._selectedChips.clear(),this._anchorChip=null,EventHandler.trigger(this._element,EVENT_CHANGE$1,{values:[]})}clearSelection(){for(const e of this._selectedChips)e.classList.remove("active");this._selectedChips.clear(),this._anchorChip=null,EventHandler.trigger(this._element,EVENT_SELECT,{selected:[]})}selectChip(e,t={}){const{addToSelection:n=!1,rangeSelect:i=!1}=t,s=this._getChipElements();if(s.includes(e)){if(i&&this._anchorChip){const t=s.indexOf(this._anchorChip),i=s.indexOf(e),o=Math.min(t,i),a=Math.max(t,i);n||this.clearSelection();for(let e=o;e<=a;e++)this._selectedChips.add(s[e]),s[e].classList.add("active")}else n?this._selectedChips.has(e)?(this._selectedChips.delete(e),e.classList.remove("active")):(this._selectedChips.add(e),e.classList.add("active"),this._anchorChip=e):(this.clearSelection(),this._selectedChips.add(e),e.classList.add("active"),this._anchorChip=e);EventHandler.trigger(this._element,EVENT_SELECT,{selected:this.getSelectedValues()})}}focus(){this._input?.focus()}_getChipElements(){return SelectorEngine.find(".chip",this._element)}_createInput(){const e=document.createElement("input");e.type="text",e.className="form-ghost",this._config.placeholder&&(e.placeholder=this._config.placeholder),this._element.append(e),this._input=e}_initializeExistingChips(){const e=SelectorEngine.find(".chip",this._element);for(const t of e){const e=this._getChipValue(t);e&&(this._chips.push(e),this._setupChip(t))}}_setupChip(e){e.setAttribute("tabindex","0"),this._config.dismissible&&!SelectorEngine.findOne(".chip-dismiss",e)&&e.append(this._createDismissButton())}_createChip(e){const t=document.createElement("span");return t.className="chip",t.dataset.bsChipValue=e,t.append(document.createTextNode(e)),this._setupChip(t),t}_createDismissButton(){const e=document.createElement("button");return e.type="button",e.className="chip-dismiss",e.setAttribute("aria-label","Remove"),e.setAttribute("tabindex","-1"),e.innerHTML=this._config.dismissIcon,e}_findChipByValue(e){return this._getChipElements().find(t=>this._getChipValue(t)===e)}_getChipValue(e){if(e.dataset.bsChipValue)return e.dataset.bsChipValue;const t=e.cloneNode(!0),n=SelectorEngine.findOne(".chip-dismiss",t);return n&&n.remove(),t.textContent?.trim()||""}_addEventListeners(){EventHandler.on(this._input,"keydown",e=>this._handleInputKeydown(e)),EventHandler.on(this._input,"input",e=>this._handleInput(e)),EventHandler.on(this._input,"paste",e=>this._handlePaste(e)),EventHandler.on(this._input,"focus",()=>this.clearSelection()),this._config.createOnBlur&&EventHandler.on(this._input,"blur",e=>{e.relatedTarget?.closest(".chip")||this._createChipFromInput()}),EventHandler.on(this._element,"click",".chip",e=>{if(e.target.closest(".chip-dismiss"))return;const t=e.target.closest(".chip");t&&(e.preventDefault(),this.selectChip(t,{addToSelection:e.metaKey||e.ctrlKey,rangeSelect:e.shiftKey}),t.focus())}),EventHandler.on(this._element,"click",".chip-dismiss",e=>{e.stopPropagation();const t=e.target.closest(".chip");t&&(this.remove(t),this._input?.focus())}),EventHandler.on(this._element,"keydown",".chip",e=>{this._handleChipKeydown(e)}),EventHandler.on(this._element,"click",e=>{e.target===this._element&&(this.clearSelection(),this._input?.focus())})}_handleInputKeydown(e){const{key:t}=e;switch(t){case"Enter":e.preventDefault(),this._createChipFromInput();break;case"Backspace":case"Delete":if(""===this._input.value){e.preventDefault();const t=this._getChipElements();if(t.length>0){const e=t.at(-1);this.selectChip(e),e.focus()}}break;case"ArrowLeft":if(0===this._input.selectionStart&&0===this._input.selectionEnd){e.preventDefault();const t=this._getChipElements();if(t.length>0){const n=t.at(-1);e.shiftKey?this.selectChip(n,{addToSelection:!0}):this.selectChip(n),n.focus()}}break;case"Escape":this._input.value="",this.clearSelection(),this._input.blur()}}_handleChipKeydown(e){const{key:t}=e,n=e.target.closest(".chip");if(!n)return;const i=this._getChipElements(),s=i.indexOf(n);switch(t){case"Backspace":case"Delete":e.preventDefault(),this._handleChipDelete(s,i);break;case"ArrowLeft":e.preventDefault(),this._navigateChip(i,s,-1,e.shiftKey);break;case"ArrowRight":e.preventDefault(),this._navigateChip(i,s,1,e.shiftKey);break;case"Home":e.preventDefault(),this._navigateToEdge(i,0,e.shiftKey);break;case"End":case"Escape":e.preventDefault(),this.clearSelection(),this._input?.focus();break;case"a":this._handleSelectAll(e,i)}}_handleChipDelete(e,t){if(0===this._selectedChips.size)return;const n=Math.min(e,t.length-this._selectedChips.size-1);this.removeSelected();const i=this._getChipElements();if(i.length>0){const e=Math.max(0,Math.min(n,i.length-1));i[e].focus(),this.selectChip(i[e])}else this._input?.focus()}_navigateChip(e,t,n,i){const s=t+n;if(n<0&&s>=0){const t=e[s];this.selectChip(t,i?{addToSelection:!0,rangeSelect:!0}:{}),t.focus()}else if(n>0&&s<e.length){const t=e[s];this.selectChip(t,i?{addToSelection:!0,rangeSelect:!0}:{}),t.focus()}else n>0&&(this.clearSelection(),this._input?.focus())}_navigateToEdge(e,t,n){if(0===e.length)return;const i=e[t];this.selectChip(i,n?{rangeSelect:!0}:{}),i.focus()}_handleSelectAll(e,t){if(e.metaKey||e.ctrlKey){e.preventDefault();for(const e of t)this._selectedChips.add(e),e.classList.add("active");EventHandler.trigger(this._element,EVENT_SELECT,{selected:this.getSelectedValues()})}}_handleInput(e){const{value:t}=e.target,{separator:n}=this._config;if(n&&t.includes(n)){const e=t.split(n);for(const t of e.slice(0,-1))this.add(t.trim());this._input.value=e.at(-1)}}_handlePaste(e){const{separator:t}=this._config;if(!t)return;const n=(e.clipboardData||window.clipboardData).getData("text");if(n.includes(t)){e.preventDefault();const i=n.split(t);for(const e of i)this.add(e.trim())}}_createChipFromInput(){const e=this._input.value.trim();e&&(this.add(e),this._input.value="")}}EventHandler.on(document,"DOMContentLoaded.bs.chips.data-api",()=>{for(const e of SelectorEngine.find("[data-bs-chips]"))Chips.getOrCreateInstance(e)});const ARIA_ATTRIBUTE_PATTERN=/^aria-[\w-]*$/i,DefaultAllowlist={"*":["class","dir","id","lang","role",ARIA_ATTRIBUTE_PATTERN],a:["target","href","title","rel"],area:[],b:[],br:[],col:[],code:[],dd:[],div:[],dl:[],dt:[],em:[],hr:[],h1:[],h2:[],h3:[],h4:[],h5:[],h6:[],i:[],img:["src","srcset","alt","title","width","height"],li:[],ol:[],p:[],pre:[],s:[],small:[],span:[],sub:[],sup:[],strong:[],u:[],ul:[]},uriAttributes=new Set(["background","cite","href","itemtype","longdesc","poster","src","xlink:href"]),SAFE_URL_PATTERN=/^(?!(?:javascript|data|vbscript):)(?:[a-z0-9+.-]+:|[^&:/?#]*(?:[/?#]|$))/i,DATA_URL_PATTERN=/^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[\d+/a-z=]+$/i,allowedAttribute=(e,t)=>{const n=e.nodeName.toLowerCase();return t.includes(n)?!uriAttributes.has(n)||Boolean(SAFE_URL_PATTERN.test(e.nodeValue)||DATA_URL_PATTERN.test(e.nodeValue)):t.filter(e=>e instanceof RegExp).some(e=>e.test(n))};function sanitizeHtml(e,t,n){if(!e.length)return e;if(n&&"function"==typeof n)return n(e);const i=(new window.DOMParser).parseFromString(e,"text/html"),s=[...i.body.querySelectorAll("*")];for(const e of s){const n=e.nodeName.toLowerCase();if(!Object.keys(t).includes(n)){e.remove();continue}const i=[...e.attributes],s=[...t["*"]||[],...t[n]||[]];for(const t of i)allowedAttribute(t,s)||e.removeAttribute(t.nodeName)}return i.body.innerHTML}const NAME$7="TemplateFactory",Default$6={allowList:DefaultAllowlist,content:{},extraClass:"",html:!1,sanitize:!0,sanitizeFn:null,template:"<div></div>"},DefaultType$6={allowList:"object",content:"object",extraClass:"(string|function)",html:"boolean",sanitize:"boolean",sanitizeFn:"(null|function)",template:"string"},DefaultContentType={entry:"(string|element|function|null)",selector:"(string|element)"};class TemplateFactory extends Config{constructor(e){super(),this._config=this._getConfig(e)}static get Default(){return Default$6}static get DefaultType(){return DefaultType$6}static get NAME(){return NAME$7}getContent(){return Object.values(this._config.content).map(e=>this._resolvePossibleFunction(e)).filter(Boolean)}hasContent(){return this.getContent().length>0}changeContent(e){return this._checkContent(e),this._config.content={...this._config.content,...e},this}toHtml(){const e=document.createElement("div");e.innerHTML=this._maybeSanitize(this._config.template);for(const[t,n]of Object.entries(this._config.content))this._setContent(e,n,t);const t=e.children[0],n=this._resolvePossibleFunction(this._config.extraClass);return n&&t.classList.add(...n.split(" ")),t}_typeCheckConfig(e){super._typeCheckConfig(e),this._checkContent(e.content)}_checkContent(e){for(const[t,n]of Object.entries(e))super._typeCheckConfig({selector:t,entry:n},DefaultContentType)}_setContent(e,t,n){const i=SelectorEngine.findOne(n,e);i&&((t=this._resolvePossibleFunction(t))?isElement$1(t)?this._putElementInTemplate(getElement(t),i):this._config.html?i.innerHTML=this._maybeSanitize(t):i.textContent=t:i.remove())}_maybeSanitize(e){return this._config.sanitize?sanitizeHtml(e,this._config.allowList,this._config.sanitizeFn):e}_resolvePossibleFunction(e){return execute(e,[void 0,this])}_putElementInTemplate(e,t){if(this._config.html)return t.innerHTML="",void t.append(e);t.textContent=e.textContent}}const NAME$6="tooltip",DISALLOWED_ATTRIBUTES=new Set(["sanitize","allowList","sanitizeFn"]),ESCAPE_KEY="Escape",CLASS_NAME_FADE$2="fade",CLASS_NAME_MODAL="modal",CLASS_NAME_SHOW$2="show",SELECTOR_TOOLTIP_INNER=".tooltip-inner",SELECTOR_MODAL=".modal",SELECTOR_DATA_TOGGLE$3='[data-bs-toggle="tooltip"]',EVENT_MODAL_HIDE="hide.bs.modal",TRIGGER_HOVER="hover",TRIGGER_FOCUS="focus",TRIGGER_CLICK="click",TRIGGER_MANUAL="manual",EVENT_HIDE$2="hide",EVENT_HIDDEN$2="hidden",EVENT_SHOW$2="show",EVENT_SHOWN$2="shown",EVENT_INSERTED="inserted",EVENT_CLICK$3="click",EVENT_FOCUSIN$2="focusin",EVENT_FOCUSOUT$1="focusout",EVENT_MOUSEENTER$1="mouseenter",EVENT_MOUSELEAVE="mouseleave",EVENT_KEYDOWN$1="keydown",AttachmentMap={AUTO:"auto",TOP:"top",RIGHT:isRTL$1()?"left":"right",BOTTOM:"bottom",LEFT:isRTL$1()?"right":"left"},Default$5={allowList:DefaultAllowlist,animation:!0,boundary:"clippingParents",container:!1,customClass:"",delay:0,fallbackPlacements:["top","right","bottom","left"],html:!1,offset:[0,6],placement:"top",floatingConfig:null,sanitize:!0,sanitizeFn:null,selector:!1,template:'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',title:"",trigger:"hover focus"},DefaultType$5={allowList:"object",animation:"boolean",boundary:"(string|element)",container:"(string|element|boolean)",customClass:"(string|function)",delay:"(number|object)",fallbackPlacements:"array",html:"boolean",offset:"(array|string|function)",placement:"(string|function)",floatingConfig:"(null|object|function)",sanitize:"boolean",sanitizeFn:"(null|function)",selector:"(string|boolean)",template:"string",title:"(string|element|function)",trigger:"string"};class Tooltip extends BaseComponent{constructor(e,t){super(e,t),this._isEnabled=!0,this._timeout=0,this._isHovered=null,this._activeTrigger={},this._floatingCleanup=null,this._keydownHandler=null,this._templateFactory=null,this._newContent=null,this._mediaQueryListeners=[],this._responsivePlacements=null,this.tip=null,this._parseResponsivePlacements(),this._setListeners(),this._config.selector||this._fixTitle()}static get Default(){return Default$5}static get DefaultType(){return DefaultType$5}static get NAME(){return NAME$6}enable(){this._isEnabled=!0}disable(){this._isEnabled=!1}toggleEnabled(){this._isEnabled=!this._isEnabled}toggle(){this._isEnabled&&(this._isShown()?this._leave():this._enter())}dispose(){clearTimeout(this._timeout),this._removeEscapeListener(),EventHandler.off(this._element.closest(".modal"),"hide.bs.modal",this._hideModalHandler),this._element.getAttribute("data-bs-original-title")&&this._element.setAttribute("title",this._element.getAttribute("data-bs-original-title")),this._disposeFloating(),this._disposeMediaQueryListeners(),super.dispose()}async show(){if("none"===this._element.style.display)throw new Error("Please use show on visible elements");if(!this._isWithContent()||!this._isEnabled)return;const e=EventHandler.trigger(this._element,this.constructor.eventName("show")),t=(findShadowRoot(this._element)||this._element.ownerDocument.documentElement).contains(this._element);if(e.defaultPrevented||!t)return void(this._isHovered=!1);this._disposeFloating();const n=this._getTipElement();this._element.setAttribute("aria-describedby",n.getAttribute("id"));let{container:i}=this._config;const s=this._element.closest("dialog[open]");if(s&&i===document.body&&(i=s),this._element.ownerDocument.documentElement.contains(this.tip)||(i.append(n),EventHandler.trigger(this._element,this.constructor.eventName("inserted"))),await this._createFloating(n),n.classList.add("show"),this._setEscapeListener(),"ontouchstart"in document.documentElement)for(const e of document.body.children)EventHandler.on(e,"mouseover",noop);this._queueCallback(()=>{EventHandler.trigger(this._element,this.constructor.eventName("shown")),!1===this._isHovered&&this._leave(),this._isHovered=!1},this.tip,this._isAnimated())}hide(){if(this._isShown()&&!EventHandler.trigger(this._element,this.constructor.eventName("hide")).defaultPrevented){if(this._removeEscapeListener(),this._getTipElement().classList.remove("show"),"ontouchstart"in document.documentElement)for(const e of document.body.children)EventHandler.off(e,"mouseover",noop);this._activeTrigger.click=!1,this._activeTrigger.focus=!1,this._activeTrigger.hover=!1,this._isHovered=null,this._queueCallback(()=>{this._isWithActiveTrigger()||(this._isHovered||this._disposeFloating(),this._element.removeAttribute("aria-describedby"),EventHandler.trigger(this._element,this.constructor.eventName("hidden")))},this.tip,this._isAnimated())}}update(){this._floatingCleanup&&this.tip&&this._updateFloatingPosition()}_isWithContent(){return Boolean(this._getTitle())||this._hasNewContent()}_hasNewContent(){return Boolean(this._newContent)&&Object.values(this._newContent).some(Boolean)}_getTipElement(){return this.tip||(this.tip=this._createTipElement(this._newContent||this._getContentForTemplate())),this.tip}_createTipElement(e){const t=this._getTemplateFactory(e).toHtml();t.classList.remove("fade","show"),t.classList.add(`bs-${this.constructor.NAME}-auto`);const n=getUID(this.constructor.NAME).toString();return t.setAttribute("id",n),this._isAnimated()&&t.classList.add("fade"),t}setContent(e){this._newContent=e,this._isShown()&&(this._disposeFloating(),this.show())}_getTemplateFactory(e){return this._templateFactory?this._templateFactory.changeContent(e):this._templateFactory=new TemplateFactory({...this._config,content:e,extraClass:this._resolvePossibleFunction(this._config.customClass)}),this._templateFactory}_getContentForTemplate(){return{[SELECTOR_TOOLTIP_INNER]:this._getTitle()}}_getTitle(){return this._resolvePossibleFunction(this._config.title)||this._element.getAttribute("data-bs-original-title")}_initializeOnDelegatedTarget(e){return this.constructor.getOrCreateInstance(e.delegateTarget,this._getDelegateConfig())}_isAnimated(){return this._config.animation||this.tip&&this.tip.classList.contains("fade")}_isShown(){return this.tip&&this.tip.classList.contains("show")}_getPlacement(e){if(this._responsivePlacements){const e=getResponsivePlacement(this._responsivePlacements,"top");return AttachmentMap[e.toUpperCase()]||e}const t=execute(this._config.placement,[this,e,this._element]);return AttachmentMap[t.toUpperCase()]||t}_parseResponsivePlacements(){"string"==typeof this._config.placement?(this._responsivePlacements=parseResponsivePlacement(this._config.placement,"top"),this._responsivePlacements&&this._setupMediaQueryListeners()):this._responsivePlacements=null}_setupMediaQueryListeners(){this._disposeMediaQueryListeners(),this._mediaQueryListeners=createBreakpointListeners(()=>{this._isShown()&&this._updateFloatingPosition()})}_disposeMediaQueryListeners(){disposeBreakpointListeners(this._mediaQueryListeners),this._mediaQueryListeners=[]}async _createFloating(e){const t=this._getPlacement(e),n=e.querySelector(`.${this.constructor.NAME}-arrow`);await this._updateFloatingPosition(e,t,n),this._floatingCleanup=autoUpdate(this._element,e,()=>this._updateFloatingPosition(e,null,n))}async _updateFloatingPosition(e=this.tip,t=null,n=null){if(!e)return;t||(t=this._getPlacement(e)),n||(n=e.querySelector(`.${this.constructor.NAME}-arrow`));const i=this._getFloatingMiddleware(n),s=this._getFloatingConfig(t,i),{x:o,y:a,placement:l,middlewareData:r}=await computePosition(this._element,e,s);if(Object.assign(e.style,{position:"absolute",left:`${o}px`,top:`${a}px`}),n&&(n.style.position="absolute"),Manipulator.setDataAttribute(e,"placement",l),n&&r.arrow){const{x:e,y:t}=r.arrow,i=l.startsWith("top")||l.startsWith("bottom");Object.assign(n.style,{left:i&&null!==e?`${e}px`:"",top:i||null===t?"":`${t}px`,right:"",bottom:""})}}_getOffset(){const{offset:e}=this._config;return"string"==typeof e?e.split(",").map(e=>Number.parseInt(e,10)):"function"==typeof e?({placement:t,rects:n})=>e({placement:t,reference:n.reference,floating:n.floating},this._element):e}_resolvePossibleFunction(e){return execute(e,[this._element,this._element])}_getFloatingMiddleware(e){const t=this._getOffset(),n=[offset("function"==typeof t?t:{mainAxis:t[1]||0,crossAxis:t[0]||0}),flip({fallbackPlacements:this._config.fallbackPlacements}),shift({boundary:"clippingParents"===this._config.boundary?"clippingAncestors":this._config.boundary})];return e&&n.push(arrow({element:e})),n}_getFloatingConfig(e,t){const n={placement:e,middleware:t};return{...n,...execute(this._config.floatingConfig,[void 0,n])}}_setListeners(){const e=this._config.trigger.split(" ");for(const t of e)if("click"===t)EventHandler.on(this._element,this.constructor.eventName("click"),this._config.selector,e=>{const t=this._initializeOnDelegatedTarget(e);t._activeTrigger.click=!(t._isShown()&&t._activeTrigger.click),t.toggle()});else if("manual"!==t){const e="hover"===t?this.constructor.eventName("mouseenter"):this.constructor.eventName("focusin"),n="hover"===t?this.constructor.eventName("mouseleave"):this.constructor.eventName("focusout");EventHandler.on(this._element,e,this._config.selector,e=>{const t=this._initializeOnDelegatedTarget(e);t._activeTrigger["focusin"===e.type?"focus":"hover"]=!0,t._enter()}),EventHandler.on(this._element,n,this._config.selector,e=>{const t=this._initializeOnDelegatedTarget(e);t._activeTrigger["focusout"===e.type?"focus":"hover"]=t._element.contains(e.relatedTarget),t._leave()})}this._hideModalHandler=()=>{this._element&&this.hide()},EventHandler.on(this._element.closest(".modal"),"hide.bs.modal",this._hideModalHandler)}_setEscapeListener(){this._keydownHandler||(this._keydownHandler=e=>{"Escape"===e.key&&this._isShown()&&this.tip.isConnected&&(e.preventDefault(),e.stopPropagation(),this.hide())},this._element.ownerDocument.addEventListener("keydown",this._keydownHandler,!0))}_removeEscapeListener(){this._keydownHandler&&(this._element.ownerDocument.removeEventListener("keydown",this._keydownHandler,!0),this._keydownHandler=null)}_fixTitle(){const e=this._element.getAttribute("title");e&&(this._element.getAttribute("aria-label")||this._element.textContent.trim()||this._element.setAttribute("aria-label",e),this._element.setAttribute("data-bs-original-title",e),this._element.removeAttribute("title"))}_enter(){this._isShown()||this._isHovered?this._isHovered=!0:(this._isHovered=!0,this._setTimeout(()=>{this._isHovered&&this.show()},this._config.delay.show))}_leave(){this._isWithActiveTrigger()||(this._isHovered=!1,this._setTimeout(()=>{this._isHovered||this.hide()},this._config.delay.hide))}_setTimeout(e,t){clearTimeout(this._timeout),this._timeout=setTimeout(e,t)}_isWithActiveTrigger(){return Object.values(this._activeTrigger).includes(!0)}_getConfig(e){const t=Manipulator.getDataAttributes(this._element);for(const e of Object.keys(t))DISALLOWED_ATTRIBUTES.has(e)&&delete t[e];return e={...t,..."object"==typeof e&&e?e:{}},e=this._mergeConfigObj(e),e=this._configAfterMerge(e),this._typeCheckConfig(e),e}_configAfterMerge(e){return e.container=!1===e.container?document.body:getElement(e.container),"number"==typeof e.delay&&(e.delay={show:e.delay,hide:e.delay}),"number"!=typeof e.title&&"boolean"!=typeof e.title||(e.title=e.title.toString()),"number"!=typeof e.content&&"boolean"!=typeof e.content||(e.content=e.content.toString()),e}_getDelegateConfig(){const e={};for(const[t,n]of Object.entries(this._config))this.constructor.Default[t]!==n&&(e[t]=n);return e.selector=!1,e.trigger="manual",e}_disposeFloating(){this._floatingCleanup&&(this._floatingCleanup(),this._floatingCleanup=null),this.tip&&(this.tip.remove(),this.tip=null)}}const initTooltip=e=>{const t=e.target.closest(SELECTOR_DATA_TOGGLE$3);t&&Tooltip.getOrCreateInstance(t)};EventHandler.on(document,"focusin",SELECTOR_DATA_TOGGLE$3,initTooltip),EventHandler.on(document,"mouseenter",SELECTOR_DATA_TOGGLE$3,initTooltip);const NAME$5="popover",SELECTOR_TITLE=".popover-header",SELECTOR_CONTENT=".popover-body",SELECTOR_DATA_TOGGLE$2='[data-bs-toggle="popover"]',EVENT_CLICK$2="click",EVENT_FOCUSIN$1="focusin",EVENT_MOUSEENTER="mouseenter",Default$4={...Tooltip.Default,content:"",offset:[0,8],placement:"right",template:'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',trigger:"click"},DefaultType$4={...Tooltip.DefaultType,content:"(null|string|element|function)"};class Popover extends Tooltip{static get Default(){return Default$4}static get DefaultType(){return DefaultType$4}static get NAME(){return NAME$5}_isWithContent(){return Boolean(this._getTitle()||this._getContent())||this._hasNewContent()}_getContentForTemplate(){return{[SELECTOR_TITLE]:this._getTitle(),[SELECTOR_CONTENT]:this._getContent()}}_getContent(){return this._resolvePossibleFunction(this._config.content)}}const initPopover=e=>{const t=e.target.closest(SELECTOR_DATA_TOGGLE$2);t&&("click"===e.type&&e.preventDefault(),Popover.getOrCreateInstance(t))};EventHandler.on(document,"click",SELECTOR_DATA_TOGGLE$2,initPopover),EventHandler.on(document,"focusin",SELECTOR_DATA_TOGGLE$2,initPopover),EventHandler.on(document,"mouseenter",SELECTOR_DATA_TOGGLE$2,initPopover);const NAME$4="range",DATA_KEY$4="bs.range",EVENT_KEY$4=".bs.range",DATA_API_KEY$1=".data-api",EVENT_CHANGED="changed.bs.range",EVENT_DOM_CONTENT_LOADED="DOMContentLoaded.bs.range.data-api",EVENT_INPUT="input",EVENT_CHANGE="change",SELECTOR_RANGE=".form-range",SELECTOR_INPUT=".form-range-input",CLASS_NAME_BUBBLE="form-range-bubble",CLASS_NAME_TICKS="form-range-ticks",CLASS_NAME_TICK="form-range-tick",CLASS_NAME_TICK_LABEL="form-range-tick-label",PROPERTY_FILL="--bs-range-fill",Default$3={bubble:!1,formatter:null},DefaultType$3={bubble:"(boolean|null)",formatter:"(function|null)"};class Range extends BaseComponent{constructor(e,t){super(e,t),this._element&&(this._input=SelectorEngine.findOne(SELECTOR_INPUT,this._element),this._input&&(this._bubble=null,this._bubbleText=null,this._ticks=null,this._updateHandler=()=>this._update(),this._config.bubble&&this._createBubble(),this._createTicks(),this._addEventListeners(),this._update()))}static get Default(){return Default$3}static get DefaultType(){return DefaultType$3}static get NAME(){return NAME$4}update(){this._update()}dispose(){EventHandler.off(this._input,"input",this._updateHandler),EventHandler.off(this._input,"change",this._updateHandler),this._bubble?.remove(),this._ticks?.remove(),super.dispose()}_configAfterMerge(e){return null===e.bubble&&(e.bubble=!0),e}_addEventListeners(){EventHandler.on(this._input,"input",this._updateHandler),EventHandler.on(this._input,"change",this._updateHandler)}_min(){return""===this._input.min?0:Number.parseFloat(this._input.min)}_max(){return""===this._input.max?100:Number.parseFloat(this._input.max)}_value(){return Number.parseFloat(this._input.value)}_ratio(){const e=this._max()-this._min();return e>0?(this._value()-this._min())/e:0}_update(){this._element.style.setProperty(PROPERTY_FILL,`${this._ratio()}`),this._bubbleText&&(this._bubbleText.textContent=this._format(this._value())),EventHandler.trigger(this._input,EVENT_CHANGED,{value:this._value()})}_format(e){return"function"==typeof this._config.formatter?this._config.formatter(e):String(e)}_createBubble(){this._bubble=document.createElement("output"),this._bubble.className=`${CLASS_NAME_BUBBLE} tooltip bs-tooltip-top show`,this._bubble.setAttribute("aria-hidden","true");const e=document.createElement("div");e.className="tooltip-arrow",this._bubbleText=document.createElement("div"),this._bubbleText.className="tooltip-inner",this._bubble.append(e,this._bubbleText),this._input.insertAdjacentElement("afterend",this._bubble)}_createTicks(){const e=this._input.getAttribute("list"),t=e?document.getElementById(e):null;if(!t)return;const n=this._min(),i=this._max()-n||1,s=[];for(const e of SelectorEngine.find("option",t)){const t=Number.parseFloat(e.value);if(!Number.isNaN(t)){const o=Math.min(Math.max((t-n)/i,0),1);s.push({ratio:o,label:e.label})}}if(0===s.length)return;s.sort((e,t)=>e.ratio-t.ratio),this._ticks=document.createElement("div"),this._ticks.className=CLASS_NAME_TICKS,this._ticks.setAttribute("aria-hidden","true");const o=[0,...s.map(e=>e.ratio),1];this._ticks.style.gridTemplateColumns=o.slice(1).map((e,t)=>e-o[t]+"fr").join(" ");for(const[e,t]of s.entries()){const n=document.createElement("span");if(n.className=CLASS_NAME_TICK,n.style.gridColumnStart=`${e+2}`,t.label){const e=document.createElement("span");e.className=CLASS_NAME_TICK_LABEL,e.textContent=t.label,n.append(e)}this._ticks.append(n)}this._element.append(this._ticks)}}EventHandler.on(document,EVENT_DOM_CONTENT_LOADED,()=>{for(const e of SelectorEngine.find(".form-range"))Range.getOrCreateInstance(e)});const NAME$3="scrollspy",DATA_KEY$3="bs.scrollspy",EVENT_KEY$3=`.${DATA_KEY$3}`,DATA_API_KEY=".data-api",EVENT_ACTIVATE=`activate${EVENT_KEY$3}`,EVENT_CLICK$1=`click${EVENT_KEY$3}`,EVENT_SCROLL=`scroll${EVENT_KEY$3}`,EVENT_SCROLLEND=`scrollend${EVENT_KEY$3}`,EVENT_RESIZE=`resize${EVENT_KEY$3}`,EVENT_LOAD_DATA_API$1=`load${EVENT_KEY$3}.data-api`,CLASS_NAME_MENU_ITEM="menu-item",CLASS_NAME_ACTIVE$1="active",SELECTOR_DATA_SPY='[data-bs-spy="scroll"]',SELECTOR_TARGET_LINKS="[href]",SELECTOR_NAV_LIST_GROUP=".nav, .list-group",SELECTOR_NAV_LINKS=".nav-link",SELECTOR_NAV_ITEMS=".nav-item",SELECTOR_LIST_ITEMS=".list-group-item",SELECTOR_LINK_ITEMS=".nav-link, .nav-item > .nav-link, .list-group-item",SELECTOR_MENU_TOGGLE$1='[data-bs-toggle="menu"]',SCROLL_IDLE_TIMEOUT=100,RESIZE_DEBOUNCE=100,Default$2={rootMargin:null,smoothScroll:!1,target:null,threshold:[0],topMargin:"12%"},DefaultType$2={rootMargin:"(string|null)",smoothScroll:"boolean",target:"element",threshold:"array",topMargin:"string"};class ScrollSpy extends BaseComponent{constructor(e,t){super(e,t),this._sections=[],this._linkBySection=new Map,this._sectionByLink=new Map,this._intersecting=new Set,this._activeTarget=null,this._lastActive=null,this._atBottom=!1,this._rootElement="visible"===getComputedStyle(this._element).overflowY?null:this._element,this._observer=null,this._sentinel=null,this._sentinelObserver=null,this._pendingNavigation=null,this._settleTimeout=null,this._settleHandler=null,this._scrollIdleHandler=null,this._resizeHandler=null,this._resizeTimeout=null,this.refresh()}static get Default(){return Default$2}static get DefaultType(){return DefaultType$2}static get NAME(){return NAME$3}refresh(){this._initializeTargetsAndObservables(),this._maybeEnableSmoothScroll(),this._observer?.disconnect(),this._intersecting.clear(),this._observer=this._getNewObserver();for(const e of this._sections)this._observer.observe(e);this._setUpSentinel(),this._maybeAddResizeListener()}dispose(){this._observer?.disconnect(),this._teardownSentinel(),this._disarmSettle(),this._removeResizeListener(),EventHandler.off(this._config.target,EVENT_CLICK$1),super.dispose()}_configAfterMerge(e){return e.target=getElement(e.target)||document.body,"string"==typeof e.threshold&&(e.threshold=e.threshold.split(",").map(e=>Number.parseFloat(e))),e}_getNewObserver(){const e={root:this._rootElement,threshold:this._config.threshold,rootMargin:this._config.rootMargin??this._getDerivedRootMargin()};return new IntersectionObserver(e=>this._onIntersect(e),e)}_onIntersect(e){for(const t of e)t.isIntersecting?this._intersecting.add(t.target):this._intersecting.delete(t.target);this._computeActive()}_computeActive(){if(!this._element?.isConnected||0===this._sections.length)return;let e=null;if(this._atBottom)e=this._sections.at(-1);else{for(const t of this._sections)this._intersecting.has(t)&&(e=t);e||=this._lastActive??this._sections.at(0)}if(!e)return;this._lastActive=e;const t=this._linkBySection.get(e);t&&this._process(t)}_parseTopMargin(){const e=String(this._config.topMargin);return{value:Number.parseFloat(e)||0,unit:e.endsWith("%")?"%":"px"}}_getDerivedRootMargin(){const{value:e,unit:t}=this._parseTopMargin();let n=e;if("px"===t){const t=this._rootElement?this._rootElement.clientHeight:document.documentElement.clientHeight||window.innerHeight;n=t?e/t*100:12}return`0px 0px -${Math.min(Math.max(100-n,0),100)}% 0px`}_usesPixelMargin(){return!this._config.rootMargin&&"px"===this._parseTopMargin().unit}_setUpSentinel(){if(this._teardownSentinel(),0===this._sections.length)return;const e=document.createElement("div");e.setAttribute("aria-hidden","true"),e.style.cssText="position:relative;width:0;height:0;margin:0;padding:0;border:0;visibility:hidden;",this._element.append(e),this._sentinel=e,this._sentinelObserver=new IntersectionObserver(e=>this._onSentinel(e),{root:this._rootElement,threshold:[0]}),this._sentinelObserver.observe(e)}_onSentinel(e){const t=e.at(-1);this._atBottom=Boolean(t?.isIntersecting)&&this._isOverflowing(),this._computeActive()}_isOverflowing(){const e=this._rootElement||document.scrollingElement||document.documentElement;return e.scrollHeight>e.clientHeight}_teardownSentinel(){this._sentinelObserver?.disconnect(),this._sentinelObserver=null,this._sentinel?.remove(),this._sentinel=null,this._atBottom=!1}_maybeAddResizeListener(){this._removeResizeListener(),this._usesPixelMargin()&&(this._resizeHandler=()=>{clearTimeout(this._resizeTimeout),this._resizeTimeout=setTimeout(()=>this._rebuildObserver(),100)},EventHandler.on(window,EVENT_RESIZE,this._resizeHandler))}_removeResizeListener(){clearTimeout(this._resizeTimeout),this._resizeTimeout=null,this._resizeHandler&&(EventHandler.off(window,EVENT_RESIZE,this._resizeHandler),this._resizeHandler=null)}_rebuildObserver(){if(this._observer){this._observer.disconnect(),this._intersecting.clear(),this._observer=this._getNewObserver();for(const e of this._sections)this._observer.observe(e)}}_maybeEnableSmoothScroll(){this._config.smoothScroll&&(EventHandler.off(this._config.target,EVENT_CLICK$1),EventHandler.on(this._config.target,EVENT_CLICK$1,"[href]",e=>{const t=e.target.closest("[href]"),n=t&&this._sectionByLink.get(t);if(!n||!this._element)return;e.preventDefault();const i=this._rootElement||window,s=n.offsetTop-this._element.offsetTop,o=this._rootElement?this._rootElement.scrollTop:window.scrollY??window.pageYOffset;if(matchMedia("(prefers-reduced-motion: reduce)").matches||Math.abs(o-s)<=2)return i.scrollTo?i.scrollTo({top:s,behavior:"auto"}):i.scrollTop=s,void this._settleNavigation(t.hash,n);this._pendingNavigation={hash:t.hash,section:n},this._armSettle(),i.scrollTo?i.scrollTo({top:s,behavior:"smooth"}):i.scrollTop=s}))}_armSettle(){this._disarmSettle();const e=this._getSettleTarget();this._settleHandler=()=>this._onSettle(),this._scrollIdleHandler=()=>{clearTimeout(this._settleTimeout),this._settleTimeout=setTimeout(()=>this._onSettle(),100)},EventHandler.on(e,EVENT_SCROLLEND,this._settleHandler),EventHandler.on(e,EVENT_SCROLL,this._scrollIdleHandler)}_disarmSettle(){clearTimeout(this._settleTimeout),this._settleTimeout=null;const e=this._getSettleTarget();this._settleHandler&&(EventHandler.off(e,EVENT_SCROLLEND,this._settleHandler),this._settleHandler=null),this._scrollIdleHandler&&(EventHandler.off(e,EVENT_SCROLL,this._scrollIdleHandler),this._scrollIdleHandler=null)}_getSettleTarget(){return this._rootElement||document}_onSettle(){if(this._disarmSettle(),!this._pendingNavigation)return;const{hash:e,section:t}=this._pendingNavigation;this._settleNavigation(e,t)}_settleNavigation(e,t){this._pendingNavigation=null,window.history?.replaceState&&window.history.replaceState(null,"",e),t.hasAttribute("tabindex")||t.setAttribute("tabindex","-1"),t.focus({preventScroll:!0})}_initializeTargetsAndObservables(){this._sections=[],this._linkBySection=new Map,this._sectionByLink=new Map;const e=SelectorEngine.find("[href]",this._config.target),t=new Set;for(const n of e){if(!n.hash||isDisabled(n))continue;const e=decodeFragment(n.hash.slice(1));if(!e)continue;const i=document.getElementById(e);i&&this._element.contains(i)&&isVisible(i)&&(this._sectionByLink.set(n,i),this._linkBySection.set(i,n),t.has(i)||(t.add(i),this._sections.push(i)))}this._sections.sort((e,t)=>e.getBoundingClientRect().top-t.getBoundingClientRect().top)}_process(e){this._activeTarget!==e&&(this._clearActiveClass(this._config.target),this._activeTarget=e,e.classList.add("active"),this._activateParents(e),EventHandler.trigger(this._element,EVENT_ACTIVATE,{relatedTarget:e}))}_activateParents(e){if(e.classList.contains("menu-item")){const t=e.closest(".menu")?.previousElementSibling;return void(t?.matches(SELECTOR_MENU_TOGGLE$1)&&t.classList.add("active"))}for(const t of SelectorEngine.parents(e,".nav, .list-group"))for(const e of SelectorEngine.prev(t,SELECTOR_LINK_ITEMS))e.classList.add("active")}_clearActiveClass(e){e.classList.remove("active");const t=SelectorEngine.find("[href].active",e);for(const e of t)e.classList.remove("active")}}function decodeFragment(e){try{return decodeURIComponent(e)}catch{return e}}EventHandler.on(window,EVENT_LOAD_DATA_API$1,()=>{for(const e of SelectorEngine.find(SELECTOR_DATA_SPY))ScrollSpy.getOrCreateInstance(e)});const NAME$2="tab",DATA_KEY$2="bs.tab",EVENT_KEY$2=".bs.tab",EVENT_HIDE$1="hide.bs.tab",EVENT_HIDDEN$1="hidden.bs.tab",EVENT_SHOW$1="show.bs.tab",EVENT_SHOWN$1="shown.bs.tab",EVENT_CLICK_DATA_API="click.bs.tab",EVENT_KEYDOWN="keydown.bs.tab",EVENT_LOAD_DATA_API="load.bs.tab",ARROW_LEFT_KEY="ArrowLeft",ARROW_RIGHT_KEY="ArrowRight",ARROW_UP_KEY="ArrowUp",ARROW_DOWN_KEY="ArrowDown",HOME_KEY="Home",END_KEY="End",CLASS_NAME_ACTIVE="active",CLASS_NAME_FADE$1="fade",CLASS_NAME_SHOW$1="show",SELECTOR_MENU_TOGGLE='[data-bs-toggle="menu"]',SELECTOR_MENU=".menu",NOT_SELECTOR_MENU_TOGGLE=`:not(${SELECTOR_MENU_TOGGLE})`,SELECTOR_TAB_PANEL='.list-group, .nav, [role="tablist"]',SELECTOR_OUTER=".nav-item, .list-group-item",SELECTOR_INNER=`.nav-link${NOT_SELECTOR_MENU_TOGGLE}, .list-group-item${NOT_SELECTOR_MENU_TOGGLE}, [role="tab"]${NOT_SELECTOR_MENU_TOGGLE}`,SELECTOR_DATA_TOGGLE$1='[data-bs-toggle="tab"]',SELECTOR_INNER_ELEM=`${SELECTOR_INNER}, ${SELECTOR_DATA_TOGGLE$1}`,SELECTOR_DATA_TOGGLE_ACTIVE='.active[data-bs-toggle="tab"]';class Tab extends BaseComponent{constructor(e){super(e),this._parent=this._element.closest(SELECTOR_TAB_PANEL),this._parent&&(this._setInitialAttributes(this._parent,this._getChildren()),EventHandler.on(this._element,EVENT_KEYDOWN,e=>this._keydown(e)))}static get NAME(){return"tab"}show(){const e=this._element;if(this._elemIsActive(e))return;const t=this._getActiveElem(),n=t?EventHandler.trigger(t,EVENT_HIDE$1,{relatedTarget:e}):null;EventHandler.trigger(e,EVENT_SHOW$1,{relatedTarget:t}).defaultPrevented||n&&n.defaultPrevented||(this._deactivate(t,e),this._activate(e,t))}_activate(e,t){e&&(e.classList.add("active"),this._activate(SelectorEngine.getElementFromSelector(e)),this._queueCallback(()=>{"tab"===e.getAttribute("role")?(e.removeAttribute("tabindex"),e.setAttribute("aria-selected",!0),this._toggleMenu(e,!0),EventHandler.trigger(e,EVENT_SHOWN$1,{relatedTarget:t})):e.classList.add("show")},e,e.classList.contains("fade")))}_deactivate(e,t){e&&(e.classList.remove("active"),e.blur(),this._deactivate(SelectorEngine.getElementFromSelector(e)),this._queueCallback(()=>{"tab"===e.getAttribute("role")?(e.setAttribute("aria-selected",!1),e.setAttribute("tabindex","-1"),this._toggleMenu(e,!1),EventHandler.trigger(e,EVENT_HIDDEN$1,{relatedTarget:t})):e.classList.remove("show")},e,e.classList.contains("fade")))}_keydown(e){if(![ARROW_LEFT_KEY,ARROW_RIGHT_KEY,ARROW_UP_KEY,ARROW_DOWN_KEY,HOME_KEY,END_KEY].includes(e.key))return;if(e.altKey||e.ctrlKey||e.metaKey)return;e.stopPropagation(),e.preventDefault();const t=this._getChildren().filter(e=>!isDisabled(e));let n;if([HOME_KEY,END_KEY].includes(e.key))n=e.key===HOME_KEY?t[0]:t.at(-1);else{const i=[ARROW_RIGHT_KEY,ARROW_DOWN_KEY].includes(e.key);n=getNextActiveElement(t,e.target,i,!0)}n&&(n.focus({preventScroll:!0}),Tab.getOrCreateInstance(n).show())}_getChildren(){return SelectorEngine.find(SELECTOR_INNER_ELEM,this._parent)}_getActiveElem(){return this._getChildren().find(e=>this._elemIsActive(e))||null}_setInitialAttributes(e,t){this._setAttributeIfNotExists(e,"role","tablist");for(const e of t)this._setInitialAttributesOnChild(e)}_setInitialAttributesOnChild(e){e=this._getInnerElement(e);const t=this._elemIsActive(e),n=this._getOuterElement(e);e.setAttribute("aria-selected",t),n!==e&&this._setAttributeIfNotExists(n,"role","presentation"),t||e.setAttribute("tabindex","-1"),this._setAttributeIfNotExists(e,"role","tab"),this._setInitialAttributesOnTargetPanel(e)}_setInitialAttributesOnTargetPanel(e){const t=SelectorEngine.getElementFromSelector(e);t&&(this._setAttributeIfNotExists(t,"role","tabpanel"),e.id&&this._setAttributeIfNotExists(t,"aria-labelledby",`${e.id}`))}_toggleMenu(e,t){const n=this._getOuterElement(e),i=SelectorEngine.findOne(SELECTOR_MENU_TOGGLE,n);if(!i)return;const s=SelectorEngine.findOne(".menu",n);i.classList.toggle("active",t),s&&s.classList.toggle("show",t),i.setAttribute("aria-expanded",t)}_setAttributeIfNotExists(e,t,n){e.hasAttribute(t)||e.setAttribute(t,n)}_elemIsActive(e){return e.classList.contains("active")}_getInnerElement(e){return e.matches(SELECTOR_INNER_ELEM)?e:SelectorEngine.findOne(SELECTOR_INNER_ELEM,e)}_getOuterElement(e){return e.closest(SELECTOR_OUTER)||e}}EventHandler.on(document,"click.bs.tab",SELECTOR_DATA_TOGGLE$1,function(e){["A","AREA"].includes(this.tagName)&&e.preventDefault(),isDisabled(this)||Tab.getOrCreateInstance(this).show()}),EventHandler.on(window,"load.bs.tab",()=>{for(const e of SelectorEngine.find(SELECTOR_DATA_TOGGLE_ACTIVE))Tab.getOrCreateInstance(e)});const NAME$1="toast",DATA_KEY$1="bs.toast",EVENT_KEY$1=".bs.toast",EVENT_MOUSEOVER="mouseover.bs.toast",EVENT_MOUSEOUT="mouseout.bs.toast",EVENT_FOCUSIN="focusin.bs.toast",EVENT_FOCUSOUT="focusout.bs.toast",EVENT_HIDE="hide.bs.toast",EVENT_HIDDEN="hidden.bs.toast",EVENT_SHOW="show.bs.toast",EVENT_SHOWN="shown.bs.toast",CLASS_NAME_FADE="fade",CLASS_NAME_HIDE="hide",CLASS_NAME_SHOW="show",CLASS_NAME_SHOWING="showing",DefaultType$1={animation:"boolean",autohide:"boolean",delay:"number"},Default$1={animation:!0,autohide:!0,delay:5e3};class Toast extends BaseComponent{constructor(e,t){super(e,t),this._timeout=null,this._hasMouseInteraction=!1,this._hasKeyboardInteraction=!1,this._setListeners()}static get Default(){return Default$1}static get DefaultType(){return DefaultType$1}static get NAME(){return NAME$1}show(){EventHandler.trigger(this._element,EVENT_SHOW).defaultPrevented||(this._clearTimeout(),this._config.animation&&this._element.classList.add("fade"),this._element.classList.remove("hide"),reflow(this._element),this._element.classList.add("show","showing"),this._queueCallback(()=>{this._element.classList.remove("showing"),EventHandler.trigger(this._element,EVENT_SHOWN),this._maybeScheduleHide()},this._element,this._config.animation))}hide(){this.isShown()&&(EventHandler.trigger(this._element,EVENT_HIDE).defaultPrevented||(this._element.classList.add("showing"),this._queueCallback(()=>{this._element.classList.add("hide"),this._element.classList.remove("showing","show"),EventHandler.trigger(this._element,EVENT_HIDDEN)},this._element,this._config.animation)))}dispose(){this._clearTimeout(),this.isShown()&&this._element.classList.remove("show"),super.dispose()}isShown(){return this._element.classList.contains("show")}_maybeScheduleHide(){this._config.autohide&&(this._hasMouseInteraction||this._hasKeyboardInteraction||(this._timeout=setTimeout(()=>{this.hide()},this._config.delay)))}_onInteraction(e,t){switch(e.type){case"mouseover":case"mouseout":this._hasMouseInteraction=t;break;case"focusin":case"focusout":this._hasKeyboardInteraction=t}if(t)return void this._clearTimeout();const n=e.relatedTarget;this._element===n||this._element.contains(n)||this._maybeScheduleHide()}_setListeners(){EventHandler.on(this._element,EVENT_MOUSEOVER,e=>this._onInteraction(e,!0)),EventHandler.on(this._element,EVENT_MOUSEOUT,e=>this._onInteraction(e,!1)),EventHandler.on(this._element,EVENT_FOCUSIN,e=>this._onInteraction(e,!0)),EventHandler.on(this._element,EVENT_FOCUSOUT,e=>this._onInteraction(e,!1))}_clearTimeout(){clearTimeout(this._timeout),this._timeout=null}}enableDismissTrigger(Toast);const NAME="toggler",DATA_KEY="bs.toggler",EVENT_KEY=`.${DATA_KEY}`,EVENT_TOGGLE=`toggle${EVENT_KEY}`,EVENT_TOGGLED=`toggled${EVENT_KEY}`,EVENT_CLICK="click",SELECTOR_DATA_TOGGLE='[data-bs-toggle="toggler"]',DefaultType={attribute:"string",value:"(string|number|boolean)"},Default={attribute:"class",value:null};class Toggler extends BaseComponent{static get Default(){return Default}static get DefaultType(){return DefaultType}static get NAME(){return NAME}toggle(){EventHandler.trigger(this._element,EVENT_TOGGLE).defaultPrevented||(this._execute(),EventHandler.trigger(this._element,EVENT_TOGGLED))}_execute(){const{attribute:e,value:t}=this._config;"id"!==e&&("class"!==e?this._element.getAttribute(e)!==String(t)?this._element.setAttribute(e,t):this._element.removeAttribute(e):this._element.classList.toggle(t))}}eventActionOnPlugin(Toggler,"click",SELECTOR_DATA_TOGGLE,"toggle");export{Alert,Button,Carousel,Chips,Collapse,Combobox,Datepicker,Dialog,Drawer,Menu,NavOverflow,OtpInput,Popover,Range,ScrollSpy,Strength,Tab,Toast,Toggler,Tooltip};
+//# sourceMappingURL=bootstrap.bundle.min.js.map
+//]]>
+  </script>
 </div>
diff --git a/includes/ftr.sidebar.example.xml b/includes/ftr.sidebar.example.xml
index 95268b4d..90828772 100644
--- a/includes/ftr.sidebar.example.xml
+++ b/includes/ftr.sidebar.example.xml
@@ -1,7 +1,7 @@
-<div class="alert alert-success d-flex justify-content-center p-1">
+<div class="alert theme-success d-flex justify-content-center p-1">
   <div class="align-self-center">
     <p class="text-center mb-0">
-      <button type="button" class="btn btn-success btn-sm">FOOTER</button>
+      <button type="button" class="btn theme-success btn-sm">FOOTER</button>
     </p>
   </div>
 </div>
diff --git a/sample/alerts.dita b/sample/alerts.dita
index 9ffc442a..e08181d5 100644
--- a/sample/alerts.dita
+++ b/sample/alerts.dita
@@ -30,71 +30,71 @@
       <title>Example</title>
       <p>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 <xmlatt>outputclass</xmlatt> to
-          <codeph>alert-success</codeph>).</p>
+          <codeph>alert theme-success</codeph>).</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section outputclass="alert alert-primary">A simple primary alert—check it out!</section>
-      <section outputclass="alert alert-secondary">A simple secondary alert—check it out!</section>
-      <section outputclass="alert alert-success">A simple success alert—check it out!</section>
-      <section outputclass="alert alert-danger">A simple danger alert—check it out!</section>
-      <section outputclass="alert alert-warning">A simple warning alert—check it out!</section>
-      <section outputclass="alert alert-info">A simple info alert—check it out!</section>
-      <section outputclass="alert alert-light">A simple light alert—check it out!</section>
-      <section outputclass="alert alert-dark">A simple dark alert—check it out!</section>
+      <section outputclass="alert theme-primary">A simple primary alert — check it out!</section>
+      <section outputclass="alert theme-secondary">A simple secondary alert — check it out!</section>
+      <section outputclass="alert theme-success">A simple success alert — check it out!</section>
+      <section outputclass="alert theme-danger">A simple danger alert — check it out!</section>
+      <section outputclass="alert theme-warning">A simple warning alert — check it out!</section>
+      <section outputclass="alert theme-info">A simple info alert — check it out!</section>
+      <section outputclass="alert theme-accent">A simple accent alert — check it out!</section>
+      <section outputclass="alert theme-inverse">A simple inverse alert — check it out!</section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-            <codeblock>&lt;section outputclass="alert-primary"&gt;
-  A simple primary alert—check it out!
+            <codeblock>&lt;section outputclass="alert theme-primary"&gt;
+  A simple primary alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert-secondary"&gt;
-  A simple secondary alert—check it out!
+&lt;section outputclass="alert theme-secondary"&gt;
+  A simple secondary alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert-success"&gt;
-  A simple success alert—check it out!
+&lt;section outputclass="alert theme-success"&gt;
+  A simple success alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert-danger"&gt;
-  A simple danger alert—check it out!
+&lt;section outputclass="alert theme-danger"&gt;
+  A simple danger alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert-warning"&gt;
-  A simple warning alert—check it out!
+&lt;section outputclass="alert theme-warning"&gt;
+  A simple warning alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert-info"&gt;
-  A simple info alert—check it out!
+&lt;section outputclass="alert theme-info"&gt;
+  A simple info alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert-light"&gt;
-  A simple light alert—check it out!
+&lt;section outputclass="alert theme-accent"&gt;
+  A simple accent alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert-dark"&gt;
-  A simple dark alert—check it out!
+&lt;section outputclass="alert theme-inverse"&gt;
+  A simple inverse alert — check it out!
 &lt;/section&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
         <codeblock>&lt;alert color="primary"&gt;
-  A simple primary alert—check it out!
+  A simple primary alert — check it out!
 &lt;/alert&gt;
 &lt;alert color="secondary"&gt;
-  A simple secondary alert—check it out!
+  A simple secondary alert — check it out!
 &lt;/alert&gt;
 &lt;alert color="success"&gt;
-  A simple success alert—check it out!
+  A simple success alert — check it out!
 &lt;/alert&gt;
 &lt;alert color="danger"&gt;
-  A simple danger alert—check it out!
+  A simple danger alert — check it out!
 &lt;/alert&gt;
 &lt;alert color="warning"&gt;
-  A simple warning alert—check it out!
+  A simple warning alert — check it out!
 &lt;/alert&gt;
 &lt;alert color="info"&gt;
-  A simple info alert—check it out!
+  A simple info alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="light"&gt;
-  A simple light alert—check it out!
+&lt;alert color="accent"&gt;
+  A simple accent alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="dark"&gt;
-  A simple dark alert—check it out!
+&lt;alert color="inverse"&gt;
+  A simple inverse alert — check it out!
 &lt;/alert&gt;</codeblock>
       </section>
     </bodydiv>
@@ -104,7 +104,7 @@
       <p>Alerts can also contain additional HTML elements like headings, paragraphs, icons and links.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section outputclass="alert alert-success">
+      <section outputclass="alert theme-success vstack">
         <title><ph 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
           <xref href="#">link</xref> is going to run a bit longer so that you can see how spacing within an alert works
@@ -115,7 +115,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;section outputclass="alert alert-success"&gt;
+        <codeblock>&lt;section outputclass="alert theme-success vstack"&gt;
   &lt;title&gt;&lt;i outputclass="bi bi-emoji-smile pe-2"/&gt;Well done!&lt;/title&gt;
   &lt;p&gt;
     Aww yeah, you successfully read this important alert message. This example text with a
@@ -129,7 +129,7 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;alert color="success"&gt;
+        <codeblock>&lt;alert color="success" outputclass="vstack"&gt;
   &lt;title&gt;&lt;icon outputclass="bi-emoji-smile" padding="e2"/&gt;Well done!&lt;/title&gt;
   &lt;p&gt;
     Aww yeah, you successfully read this important alert message. This example text with a
@@ -198,23 +198,23 @@
     <p>The default colors can be overridden by using a <xmlatt>color</xmlatt> attribute or an <xmlatt
       >outputclass</xmlatt>.</p>
     <bodydiv outputclass="p-3 border">
-      <note outputclass="text-bg-primary">This is a primary note.</note>
-      <note outputclass="text-bg-secondary">This is a secondary note.</note>
-      <note outputclass="text-bg-light">This is light note.</note>
-      <note outputclass="text-bg-dark">This is dark note.</note>
+      <note outputclass="theme-primary">This is a primary note.</note>
+      <note outputclass="theme-secondary">This is a secondary note.</note>
+      <note outputclass="theme-accent">This is accent note.</note>
+      <note outputclass="theme-inverse">This is inverse note.</note>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;note type="note" outputclass="alert-primary"&gt;
+        <codeblock>&lt;note type="note" outputclass="theme-primary"&gt;
   This is a primary note.&lt;/note&gt;
-&lt;note type="note" outputclass="alert-secondary"&gt;
+&lt;note type="note" outputclass="theme-secondary"&gt;
   This is a secondary note.&lt;/note&gt;
-&lt;note type="note" outputclass="alert-light"&gt;
-  This is light note.
+&lt;note type="note" outputclass="theme-accent"&gt;
+  This is accent note.
 &lt;/note&gt;
-&lt;note type="note" outputclass="alert-dark"&gt;
-  This is dark note.
+&lt;note type="note" outputclass="theme-inverse"&gt;
+  This is inverse note.
 &lt;/note&gt;</codeblock>
       </section>
       <section>
@@ -225,11 +225,11 @@
 &lt;note color="secondary"&gt;
   This is a secondary note.
 &lt;/note&gt;
-&lt;note color="light"&gt;
-  This is light note.
+&lt;note color="accent"&gt;
+  This is accent note.
 &lt;/note&gt;
-&lt;note color="dark"&gt;
-  This is dark note.
+&lt;note color="inverse"&gt;
+  This is inverse note.
 &lt;/note&gt;</codeblock>
       </section>
     </bodydiv>
diff --git a/sample/document.ditamap b/sample/document.ditamap
index 0c8db616..e648033f 100644
--- a/sample/document.ditamap
+++ b/sample/document.ditamap
@@ -11,7 +11,7 @@
     <topicmeta>
       <navtitle>Getting Started</navtitle>
       <othermeta name="icon" content="bi-book-half"/>
-      <othermeta name="icon-style" content="color: var(--bs-indigo)"/>
+      <othermeta name="icon-style" content="color: var(--bs-indigo-400)"/>
     </topicmeta>
     <topicref navtitle="Introduction" href="index.dita" locktitle="yes"/>
   </chapter>
@@ -19,7 +19,7 @@
     <topicmeta>
       <navtitle>Layout</navtitle>
       <othermeta name="icon" content="bi-grid-fill"/>
-      <othermeta name="icon-style" content="color: var(--bs-teal)"/>
+      <othermeta name="icon-style" content="color: var(--bs-teal-400)"/>
     </topicmeta>
     <topicref href="nav.dita"/>
     <topicref href="containers.dita"/>
@@ -30,7 +30,7 @@
     <topicmeta>
       <navtitle>Content</navtitle>
       <othermeta name="icon" content="bi-file-earmark-richtext"/>
-      <othermeta name="icon-style" content="color: var(--bs-gray)"/>
+      <othermeta name="icon-style" content="color: var(--bs-gray-400)"/>
     </topicmeta>
     <topicref href="typography.dita"/>
     <topicref href="images.dita"/>
@@ -41,7 +41,7 @@
     <topicmeta>
       <navtitle>Components</navtitle>
       <othermeta name="icon" content="bi-menu-button-wide-fill"/>
-      <othermeta name="icon-style" content="color: var(--bs-cyan)"/>
+      <othermeta name="icon-style" content="color: var(--bs-cyan-400)"/>
     </topicmeta>
     <topicref href="accordion.dita"/>
     <topicref href="alerts.dita"/>
@@ -64,7 +64,7 @@
     <topicmeta>
       <navtitle>Utilities</navtitle>
       <othermeta name="icon" content="bi-braces-asterisk"/>
-      <othermeta name="icon-style" content="color: var(--bs-pink)"/>
+      <othermeta name="icon-style" content="color: var(--bs-pink-400)"/>
     </topicmeta>
     <topicref href="borders.dita"/>
     <topicref href="color.dita"/>
@@ -75,7 +75,7 @@
     <topicmeta>
       <navtitle>Extend</navtitle>
       <othermeta name="icon" content="bi-tools"/>
-      <othermeta name="icon-style" content="color: var(--bs-blue)"/>
+      <othermeta name="icon-style" content="color: var(--bs-blue-400)"/>
     </topicmeta>
     <topicref navtitle="Icons" href="icons.dita">
       <topicmeta>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 358c4f9a..48d04636 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -11,14 +11,14 @@
   exclude-result-prefixes="xs dita-ot"
 >
   <xsl:param name="BOOTSTRAP_CSS_SHORTDESC" select="'text-body-secondary lead'"/>
-  <xsl:param name="BOOTSTRAP_CSS_CODEBLOCK" select="'alert alert-secondary'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CODEBLOCK" select="'alert theme-secondary'"/>
   <xsl:param name="BOOTSTRAP_CSS_TOPIC_TITLE" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_SECTION_TITLE" select="'h4'"/>
   <xsl:param name="BOOTSTRAP_CSS_CARD_TITLE" select="'h5'"/>
   <xsl:param name="BOOTSTRAP_CSS_CARD" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_CARD_WIDTH" select="'w-50'"/>
   <xsl:param name="BOOTSTRAP_CSS_CAROUSEL" select="''"/>
-  <xsl:param name="BOOTSTRAP_CSS_CAPTION" select="'alert alert-secondary p-1'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CAPTION" select="'alert theme-secondary p-1'"/>
   <xsl:param name="BOOTSTRAP_CSS_TABS" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_TABS_VERTICAL" select="'me-3'"/>
   <xsl:param name="BOOTSTRAP_CSS_ACCORDION" select="''"/>
@@ -51,7 +51,7 @@
   <xsl:template match="*[contains(@class, ' topic/pre ')]" mode="get-output-class">
     <xsl:choose>
        <xsl:when test="@color">
-          <xsl:text>alert alert-</xsl:text>
+          <xsl:text>alert theme-</xsl:text>
           <xsl:value-of select="@color"/>
        </xsl:when>
        <xsl:otherwise>
@@ -123,7 +123,7 @@
        <xsl:value-of select="$BOOTSTRAP_CSS_CARD_WIDTH"/>
     </xsl:if>
     <xsl:if test="@color">
-       <xsl:text> alert p-0 alert-</xsl:text>
+       <xsl:text> alert p-0 theme-</xsl:text>
        <xsl:value-of select="@color"/>
     </xsl:if>
     <xsl:next-match/>
@@ -329,7 +329,7 @@
   <!-- Change the default Bootstrap CSS classes of cards -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/card ')]" mode="bootstrap-class" priority="10">
     <xsl:if test="@color">
-      <xsl:text>alert alert-</xsl:text>
+      <xsl:text>card theme-</xsl:text>
       <xsl:value-of select="@color"/>
       <xsl:text> </xsl:text>
     </xsl:if>
@@ -477,11 +477,6 @@
             else if (contains(@outputclass, 'btn-group-vertical')) then ''
             else if (contains(@outputclass, 'btn-group')) then ''
             else if (contains(@outputclass, 'btn-toolbar')) then ''
-            else if (contains(@outputclass, 'accordion-')) then 'accordion'
-            else if (contains(@outputclass, 'btn-')) then 'btn'
-            else if (contains(@outputclass, 'collapse-')) then 'collapse'
-            else if (contains(@outputclass, 'alert-')) then 'alert'
-            else if (contains(@outputclass, 'list-group-')) then 'list-group'
             else if (contains(@class, ' topic/fig ')) then ' figure ' || $BOOTSTRAP_CSS_FIGURE
             else if (contains(@class, ' topic/lq ')) then ' blockquote '
             else if (contains(@class, ' topic/dl ')) then $BOOTSTRAP_CSS_DL
@@ -597,26 +592,26 @@
     <xsl:text>alert </xsl:text>
     <xsl:choose>
        <xsl:when test="@color">
-          <xsl:text>alert-</xsl:text>
+          <xsl:text>theme-</xsl:text>
           <xsl:value-of select="@color"/>
        </xsl:when>
        <xsl:otherwise>
           <xsl:value-of
           select="
-              if (@type='tip') then 'alert-success'
-              else if (@type='fastpath') then 'alert-success'
-              else if (@type='remember') then 'alert-success'
-              else if (@type='restriction') then 'alert-warning'
-              else if (@type='important') then 'alert-warning'
-              else if (@type='attention') then 'alert-warning'
-              else if (@type='caution') then 'alert-warning'
-              else if (@type='warning') then 'alert-warning'
-              else if (@type='trouble') then 'alert-warning'
-              else if (@type='danger') then 'alert-danger'
-              else if (@type='notice') then 'alert-info'
-              else if (@type='note' or (contains(@class, ' topic/note ') and not(contains(@class, ' bootstrap-d/alert ')) and not(contains(@class, ' topic/section ')) and empty(@type))) then 'alert-primary'
-              else if (@type='other') then 'alert-dark'
-              else 'alert-info'"
+              if (@type='tip') then 'theme-success'
+              else if (@type='fastpath') then 'theme-success'
+              else if (@type='remember') then 'theme-success'
+              else if (@type='restriction') then 'theme-warning'
+              else if (@type='important') then 'theme-warning'
+              else if (@type='attention') then 'theme-warning'
+              else if (@type='caution') then 'theme-warning'
+              else if (@type='warning') then 'theme-warning'
+              else if (@type='trouble') then 'theme-warning'
+              else if (@type='danger') then 'theme-danger'
+              else if (@type='notice') then 'theme-info'
+              else if (@type='note' or (contains(@class, ' topic/note ') and not(contains(@class, ' bootstrap-d/alert ')) and not(contains(@class, ' topic/section ')) and empty(@type))) then 'theme-primary'
+              else if (@type='other') then ''
+              else 'theme-info'"
         />
        </xsl:otherwise>
     </xsl:choose>

From ce3e74aeed9eeea9ba43de3fe68f3174cf018279 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 28 Jul 2026 13:05:44 +0200
Subject: [PATCH 02/87] Fix badge

---
 Customization/xsl/topic.xsl |  8 +++---
 css/bootswatch-colors.css   |  2 +-
 css/common-bootstrap.css    |  4 +--
 includes/bootstrap.hdf.xml  |  5 +++-
 sample/badge.dita           | 50 ++++++++++++++++++-------------------
 xsl/utility-classes.xsl     |  4 +--
 6 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl
index 961add5b..72410d42 100644
--- a/Customization/xsl/topic.xsl
+++ b/Customization/xsl/topic.xsl
@@ -307,6 +307,7 @@
       <xsl:call-template name="setidaname"/>
       <!-- Normal flags go before the generated title; revision flags only go on the content. -->
       <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]/prop" mode="ditaval-outputflag"/>
+      <div>
       <span class="note__title">
         <!-- ↓ Add Bootstrap icon ↓ -->
         <xsl:if test="$BOOTSTRAP_ICONS_INCLUDE = 'yes'">
@@ -320,13 +321,14 @@
       </span>
       <xsl:text> </xsl:text>
       <xsl:apply-templates
-        select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]/revprop"
-        mode="ditaval-outputflag"
-      />
+          select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]/revprop"
+          mode="ditaval-outputflag"
+        />
       <xsl:apply-templates/>
       <!-- Normal end flags and revision end flags both go out after the content. -->
       <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
     </div>
+    </div>
   </xsl:template>
 
   <xsl:template
diff --git a/css/bootswatch-colors.css b/css/bootswatch-colors.css
index 958325a7..9f4246fe 100644
--- a/css/bootswatch-colors.css
+++ b/css/bootswatch-colors.css
@@ -6,6 +6,6 @@
 :root {
   --dita-prussian-blue: var(--bs-primary-text-emphasis);
   --dita-maroon: var(--bs-danger-text-emphasis);
-  --dita-violet: var(--bs-purple);
+  --dita-violet: var(--bs-purple-400);
   --bs-code-color: rgb(from var(--bs-danger) r g calc(b + 63));
 }
diff --git a/css/common-bootstrap.css b/css/common-bootstrap.css
index a8e95852..b4ad8af4 100644
--- a/css/common-bootstrap.css
+++ b/css/common-bootstrap.css
@@ -96,11 +96,11 @@
 }
 
 .boolean {
-  color: var(--bs-green);
+  color: var(--bs-green-400);
 }
 
 .state {
-  color: var(--bs-red);
+  color: var(--bs-red-400);
 }
 
 .navbar-brand > svg {
diff --git a/includes/bootstrap.hdf.xml b/includes/bootstrap.hdf.xml
index e19a37d4..9045fc03 100644
--- a/includes/bootstrap.hdf.xml
+++ b/includes/bootstrap.hdf.xml
@@ -8,7 +8,10 @@
     src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-Z+5YElvegGtTorgF5XlhCRkdTbU6SmOE+vvqYkVzGctueilwTIsac8hLXOvDlX3B" crossorigin="anonymous"
   /-->
-  <link href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
+  <link
+    href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/dist/css/bootstrap.min.css"
+    rel="stylesheet"
+  />
   <script type="module">
 //<![CDATA[
 
diff --git a/sample/badge.dita b/sample/badge.dita
index c71d4b21..bdd462bf 100644
--- a/sample/badge.dita
+++ b/sample/badge.dita
@@ -30,12 +30,12 @@
     </section>
     <bodydiv outputclass="p-3 border">
       <section>
-        <p outputclass="h1">Example heading <ph outputclass="badge text-bg-primary">New</ph></p>
-        <p outputclass="h2">Example heading <ph outputclass="badge text-bg-primary">New</ph></p>
-        <p outputclass="h3">Example heading <ph outputclass="badge text-bg-primary">New</ph></p>
-        <p outputclass="h4">Example heading <ph outputclass="badge text-bg-primary">New</ph></p>
-        <p outputclass="h5">Example heading <ph outputclass="badge text-bg-primary">New</ph></p>
-        <p outputclass="h6">Example heading <ph outputclass="badge text-bg-primary">New</ph></p>
+        <p outputclass="h1">Example heading <ph outputclass="badge theme-primary">New</ph></p>
+        <p outputclass="h2">Example heading <ph outputclass="badge theme-primary">New</ph></p>
+        <p outputclass="h3">Example heading <ph outputclass="badge theme-primary">New</ph></p>
+        <p outputclass="h4">Example heading <ph outputclass="badge theme-primary">New</ph></p>
+        <p outputclass="h5">Example heading <ph outputclass="badge theme-primary">New</ph></p>
+        <p outputclass="h6">Example heading <ph outputclass="badge theme-primary">New</ph></p>
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
@@ -53,33 +53,33 @@
     <section>
       <title>Background colors</title>
       <p>Set a background-color with contrasting foreground color with Bootstrap’s <codeph
-        >text-bg-{color}</codeph> helpers. Previously it was required to manually pair your choice of <xmlatt
+        >theme-{color}</codeph> helpers. Previously it was required to manually pair your choice of <xmlatt
         >outputclass</xmlatt> <codeph>text-{color}</codeph> and <codeph
         >bg-{color}</codeph> utilities for styling, which you still may use if you prefer.</p>
     </section>
     <bodydiv outputclass="p-3 border">
       <p>
-        <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>
       </p>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;ph outputclass="badge text-bg-primary"&gt;Primary&lt;/ph&gt;
-&lt;ph outputclass="badge text-bg-secondary"&gt;Secondary&lt;/ph&gt;
-&lt;ph outputclass="badge text-bg-success"&gt;Success&lt;/ph&gt;
-&lt;ph outputclass="badge text-bg-danger"&gt;Danger&lt;/ph&gt;
-&lt;ph outputclass="badge text-bg-warning"&gt;Warning&lt;/ph&gt;
-&lt;ph outputclass="badge text-bg-info"&gt;Info&lt;/ph&gt;
-&lt;ph outputclass="badge text-bg-light"&gt;Light&lt;/ph&gt;
-&lt;ph outputclass="badge text-bg-dark"&gt;Dark&lt;/ph&gt;</codeblock>
+          <codeblock>&lt;ph outputclass="badge theme-primary"&gt;Primary&lt;/ph&gt;
+&lt;ph outputclass="badge theme-secondary"&gt;Secondary&lt;/ph&gt;
+&lt;ph outputclass="badge theme-success"&gt;Success&lt;/ph&gt;
+&lt;ph outputclass="badge theme-danger"&gt;Danger&lt;/ph&gt;
+&lt;ph outputclass="badge theme-warning"&gt;Warning&lt;/ph&gt;
+&lt;ph outputclass="badge theme-info"&gt;Info&lt;/ph&gt;
+&lt;ph outputclass="badge theme-accent"&gt;Accent&lt;/ph&gt;
+&lt;ph outputclass="badge theme-inverse"&gt;Inverse&lt;/ph&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
@@ -89,8 +89,8 @@
 &lt;badge color="danger"&gt;Danger&lt;/badge&gt;
 &lt;badge color="warning"&gt;Warning&lt;/badge&gt;
 &lt;badge color="info"&gt;Info&lt;/badge&gt;
-&lt;badge color="light"&gt;Light&lt;/badge&gt;
-&lt;badge color="dark"&gt;Dark&lt;/badge&gt;</codeblock>
+&lt;badge color="accent"&gt;Accent&lt;/badge&gt;
+&lt;badge color="inverse"&gt;Inverse&lt;/badge&gt;</codeblock>
         </section>
       </bodydiv>
   </body>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 48d04636..475666fc 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -11,14 +11,14 @@
   exclude-result-prefixes="xs dita-ot"
 >
   <xsl:param name="BOOTSTRAP_CSS_SHORTDESC" select="'text-body-secondary lead'"/>
-  <xsl:param name="BOOTSTRAP_CSS_CODEBLOCK" select="'alert theme-secondary'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CODEBLOCK" select="'theme-secondary border rounded p-1'"/>
   <xsl:param name="BOOTSTRAP_CSS_TOPIC_TITLE" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_SECTION_TITLE" select="'h4'"/>
   <xsl:param name="BOOTSTRAP_CSS_CARD_TITLE" select="'h5'"/>
   <xsl:param name="BOOTSTRAP_CSS_CARD" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_CARD_WIDTH" select="'w-50'"/>
   <xsl:param name="BOOTSTRAP_CSS_CAROUSEL" select="''"/>
-  <xsl:param name="BOOTSTRAP_CSS_CAPTION" select="'alert theme-secondary p-1'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CAPTION" select="'theme-secondary border rounded p-1'"/>
   <xsl:param name="BOOTSTRAP_CSS_TABS" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_TABS_VERTICAL" select="'me-3'"/>
   <xsl:param name="BOOTSTRAP_CSS_ACCORDION" select="''"/>

From 3ccd769eca1a4c307326d91379bbe3585f2d4077 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 28 Jul 2026 13:47:11 +0200
Subject: [PATCH 03/87] Fix Shadow

---
 Customization/xsl/nav.xsl |  4 ++--
 css/common-bootstrap.css  |  4 ++--
 sample/shadows.dita       | 36 ++++++++++++++++++------------------
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/Customization/xsl/nav.xsl b/Customization/xsl/nav.xsl
index ad115e29..1f89b0cd 100644
--- a/Customization/xsl/nav.xsl
+++ b/Customization/xsl/nav.xsl
@@ -265,7 +265,7 @@
             <xsl:text> bs-fixed-sidetoc</xsl:text>
           </xsl:if>
           <xsl:if test="$nav-toc = ('nav-pill-partial', 'nav-pill-full')">
-            <xsl:text> alert alert-light</xsl:text>
+            <xsl:text> alert theme-secondary</xsl:text>
           </xsl:if>
         </xsl:attribute>
 
@@ -299,7 +299,7 @@
           </xsl:when>
           <xsl:when test="$nav-toc = ('nav-pill-partial', 'nav-pill-full')">
             <!-- ↓ Remove <ul> and add nested <nav> element with Bootstrap classes ↓ -->
-            <nav class="nav nav-pills flex-column navbar-light">
+            <nav class="nav nav-pills flex-column navbar-secondary">
               <!-- ↑ End customization · Continue with DITA-OT defaults ↓ -->
               <xsl:choose>
                 <xsl:when test="$nav-toc = 'nav-pill-partial'">
diff --git a/css/common-bootstrap.css b/css/common-bootstrap.css
index b4ad8af4..f29a1c89 100644
--- a/css/common-bootstrap.css
+++ b/css/common-bootstrap.css
@@ -59,7 +59,7 @@
 .xmlelement,
 .xmlnsname,
 .xmlpi {
-  font-family: var(--bs-font-monospace);
+  font-family: var(--bs-font-mono);
   color: var(--dita-violet);
   overflow-wrap: break-word;
 }
@@ -69,7 +69,7 @@
 .filepath,
 .option,
 .parmname {
-  font-family: var(--bs-font-monospace);
+  font-family: var(--bs-font-mono);
   color: var(--bs-code-color);
   overflow-wrap: break-word;
 }
diff --git a/sample/shadows.dita b/sample/shadows.dita
index 28eaded9..46890b93 100644
--- a/sample/shadows.dita
+++ b/sample/shadows.dita
@@ -27,26 +27,26 @@
     </section>
 
     <bodydiv outputclass="p-3 border">
-      <div outputclass="m-3 p-3 shadow-none text-bg-light">No shadow</div>
-      <div outputclass="m-3 p-3 shadow-sm text-bg-light">Small shadow</div>
-      <div outputclass="m-3 p-3 shadow text-bg-light">Regular shadow</div>
-      <div outputclass="m-3 p-3 shadow-lg text-bg-light">Larger shadow</div>
+      <div outputclass="m-3 p-3 shadow-none border">No shadow</div>
+      <div outputclass="m-3 p-3 shadow-sm border">Small shadow</div>
+      <div outputclass="m-3 p-3 shadow border">Regular shadow</div>
+      <div outputclass="m-3 p-3 shadow-lg border">Larger shadow</div>
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="shadow-none m-3 p-3 text-bg-light"&gt;No shadow&lt;/div&gt;
-&lt;div outputclass="shadow-sm m-3 p-3 text-bg-light"&gt;Small shadow&lt;/div&gt;
-&lt;div outputclass="shadow m-3 p-3 text-bg-light"&gt;Regular shadow&lt;/div&gt;
-&lt;div outputclass="shadow-lg m-3 p-3 text-bg-light"&gt;Larger shadow&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="shadow-none m-3 p-3 border"&gt;No shadow&lt;/div&gt;
+&lt;div outputclass="shadow-sm m-3 p-3 border"&gt;Small shadow&lt;/div&gt;
+&lt;div outputclass="shadow m-3 p-3 border"&gt;Regular shadow&lt;/div&gt;
+&lt;div outputclass="shadow-lg m-3 p-3 border"&gt;Larger shadow&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;div shadow="none" margin="3" padding="3" color="light"&gt;No shadow&lt;/div&gt;
-&lt;div shadow="sm" margin="3" padding="3" color="light"&gt;Small shadow&lt;/div&gt;
-&lt;div shadow="yes" margin="3" padding="3" color="light"&gt;Regular shadow&lt;/div&gt;
-&lt;div shadow="lg" margin="3" padding="3" color="light"&gt;Larger shadow&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div shadow="none" margin="3" padding="3" border="1"&gt;No shadow&lt;/div&gt;
+&lt;div shadow="sm" margin="3" padding="3" border="1"&gt;Small shadow&lt;/div&gt;
+&lt;div shadow="yes" margin="3" padding="3" border="1"&gt;Regular shadow&lt;/div&gt;
+&lt;div shadow="lg" margin="3" padding="3" border="1"&gt;Larger shadow&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -56,33 +56,33 @@
     </section>
 
     <bodydiv outputclass="p-3 border">
-      <section outputclass="card text-bg-light m-3 shadow-lg">
+      <section outputclass="card bg-subtle-accent m-3 shadow-lg">
         <title>Shadowed Card</title>
         <p>This card has a large shadow.</p>
       </section>
-      <section outputclass="alert alert-light shadow-sm">Alert with small shadow</section>
+      <section outputclass="alert theme-accent m-3 shadow-sm">Alert with small shadow</section>
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;section outputclass="card shadow-lg m-3 text-bg-light"&gt;
+        <codeblock>&lt;section outputclass="card shadow-lg m-3 bg-subtle-accent"&gt;
   &lt;div outputclass="card-body"&gt;
     &lt;div outputclass="card-title h5"&gt;Shadowed Card&lt;/div&gt;
     &lt;p outputclass="card-text"&gt;This card has a large shadow.&lt;/p&gt;
   &lt;/div&gt;
 &lt;/section&gt;
 
-&lt;div outputclass="alert alert-light shadow-sm"&gt;Alert with small shadow&lt;/div&gt;</codeblock>
+&lt;div outputclass="alert theme-accent m-3 shadow-sm"&gt;Alert with small shadow&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;card shadow="lg" margin="3" color="light"&gt;
+        <codeblock>&lt;card shadow="lg" margin="3" color="accent"&gt;
   &lt;title&gt;Shadowed Card&lt;/title&gt;
   &lt;p&gt;This card has a large shadow.&lt;/p&gt;
 &lt;/card&gt;
 
-&lt;alert shadow="sm" color="light"&gt;Alert with small shadow&lt;/alert&gt;</codeblock>
+&lt;alert shadow="sm" color="accent"&gt;Alert with small shadow&lt;/alert&gt;</codeblock>
       </section>
     </bodydiv>
   </body>

From bc5b79f7843fbadfe79a390dd6137659852f067c Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 28 Jul 2026 19:24:54 +0200
Subject: [PATCH 04/87] Fixing buttons

---
 sample/badge.dita        |   6 +--
 sample/button-group.dita | 106 +++++++++++++++++++--------------------
 sample/buttons.dita      |  90 ++++++++++++++++-----------------
 xsl/utility-classes.xsl  |  20 +++++---
 4 files changed, 115 insertions(+), 107 deletions(-)

diff --git a/sample/badge.dita b/sample/badge.dita
index bdd462bf..e13cd105 100644
--- a/sample/badge.dita
+++ b/sample/badge.dita
@@ -41,8 +41,8 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;title&gt;Example Heading &lt;ph outputclass="bg-secondary"&gt;New&lt;/ph&gt;&lt;/title&gt;
-&lt;p&gt;Example Text &lt;ph outputclass="bg-secondary"&gt;New&lt;/ph&gt;&lt;/p&gt;</codeblock>
+          <codeblock>&lt;title&gt;Example Heading &lt;ph outputclass="badge theme-primary"&gt;New&lt;/ph&gt;&lt;/title&gt;
+&lt;p&gt;Example Text &lt;ph outputclass="badge theme-primary"&gt;New&lt;/ph&gt;&lt;/p&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
@@ -83,7 +83,7 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;badge&gt;Primary&lt;/badge&gt;
+          <codeblock>&lt;badge color="primary"&gt;Primary&lt;/badge&gt;
 &lt;badge color="secondary"&gt;Secondary&lt;/badge&gt;
 &lt;badge color="success"&gt;Success&lt;/badge&gt;
 &lt;badge color="danger"&gt;Danger&lt;/badge&gt;
diff --git a/sample/button-group.dita b/sample/button-group.dita
index 2de1e732..406b96c9 100644
--- a/sample/button-group.dita
+++ b/sample/button-group.dita
@@ -31,26 +31,26 @@
     </section>
     <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="btn-group">
-        <xref href="#" outputclass="btn-primary">Left</xref>
-        <xref href="#" outputclass="btn-primary">Middle</xref>
-        <xref href="#" outputclass="btn-primary">Right</xref>
+        <xref href="#" outputclass="btn theme-primary">Left</xref>
+        <xref href="#" outputclass="btn theme-primary">Middle</xref>
+        <xref href="#" outputclass="btn theme-primary">Right</xref>
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-group"&gt;
-  &lt;xref outputclass="btn-primary" href="#"&gt;Left&lt;/xref&gt;
-  &lt;xref outputclass="btn-primary" href="#"&gt;Middle&lt;/xref&gt;
-  &lt;xref outputclass="btn-primary" href="#"&gt;Right&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-primary" href="#"&gt;Left&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-primary" href="#"&gt;Middle&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-primary" href="#"&gt;Right&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
           <codeblock>&lt;button-group&gt;
-  &lt;button href="#"&gt;Left&lt;/button&gt;
-  &lt;button href="#"&gt;Middle&lt;/button&gt;
-  &lt;button href="#"&gt;Right&lt;/button&gt;
+  &lt;button color="primary" href="#"&gt;Left&lt;/button&gt;
+  &lt;button color="primary" href="#"&gt;Middle&lt;/button&gt;
+  &lt;button color="primary" href="#"&gt;Right&lt;/button&gt;
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
@@ -59,18 +59,18 @@
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
       <bodydiv outputclass="btn-group">
-        <xref href="#" outputclass="btn-danger">Left</xref>
-        <xref href="#" outputclass="btn-warning">Middle</xref>
-        <xref href="#" outputclass="btn-success">Right</xref>
+        <xref href="#" outputclass="btn theme-danger">Left</xref>
+        <xref href="#" outputclass="btn theme-warning">Middle</xref>
+        <xref href="#" outputclass="btn theme-success">Right</xref>
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-group"&gt;
-  &lt;xref outputclass="btn-danger" href="#"&gt;Left&lt;/xref&gt;
-  &lt;xref outputclass="btn-warning" href="#"&gt;Middle&lt;/xref&gt;
-  &lt;xref outputclass="btn-success" href="#"&gt;Right&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-danger" href="#"&gt;Left&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-warning" href="#"&gt;Middle&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-success" href="#"&gt;Right&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
         </section>
          <section>
@@ -87,26 +87,26 @@
     </section>
     <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="btn-group">
-        <xref href="#" outputclass="btn-outline-primary">Left</xref>
-        <xref href="#" outputclass="btn-outline-primary">Middle</xref>
-        <xref href="#" outputclass="btn-outline-primary">Right</xref>
+        <xref href="#" outputclass="btn-outline theme-primary">Left</xref>
+        <xref href="#" outputclass="btn-outline theme-primary">Middle</xref>
+        <xref href="#" outputclass="btn-outline theme-primary">Right</xref>
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-group"&gt;
-  &lt;xref outputclass="btn-outline-primary" href="#"&gt;Left&lt;/xref&gt;
-  &lt;xref outputclass="btn-outline-primary" href="#"&gt;Middle&lt;/xref&gt;
-  &lt;xref outputclass="btn-outline-primary" href="#"&gt;Right&lt;/xref&gt;
+  &lt;xref outputclass="btn-outline theme-primary" href="#"&gt;Left&lt;/xref&gt;
+  &lt;xref outputclass="btn-outline theme-primary" href="#"&gt;Middle&lt;/xref&gt;
+  &lt;xref outputclass="btn-outline theme-primary" href="#"&gt;Right&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
           <codeblock>&lt;button-group&gt;
-  &lt;button outline="yes" href="#"&gt;Left&lt;/button&gt;
-  &lt;button outline="yes" href="#"&gt;Middle&lt;/button&gt;
-  &lt;button outline="yes" href="#"&gt;Right&lt;/button&gt;
+  &lt;button color="primary" outline="yes" href="#"&gt;Left&lt;/button&gt;
+  &lt;button color="primary" outline="yes" href="#"&gt;Middle&lt;/button&gt;
+  &lt;button color="primary" outline="yes" href="#"&gt;Right&lt;/button&gt;
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
@@ -117,18 +117,18 @@
     <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="btn-toolbar">
         <bodydiv outputclass="me-2 btn-group">
-          <xref href="#" outputclass="btn-primary">1</xref>
-          <xref href="#" outputclass="btn-primary">2</xref>
-          <xref href="#" outputclass="btn-primary">3</xref>
-          <xref href="#" outputclass="btn-primary">4</xref>
+          <xref href="#" outputclass="btn theme-primary">1</xref>
+          <xref href="#" outputclass="btn theme-primary">2</xref>
+          <xref href="#" outputclass="btn theme-primary">3</xref>
+          <xref href="#" outputclass="btn theme-primary">4</xref>
         </bodydiv>
         <bodydiv outputclass="me-2 btn-group">
-          <xref href="#" outputclass="btn-secondary">5</xref>
-          <xref href="#" outputclass="btn-secondary">6</xref>
-          <xref href="#" outputclass="btn-secondary">7</xref>
+          <xref href="#" outputclass="btn theme-secondary">5</xref>
+          <xref href="#" outputclass="btn theme-secondary">6</xref>
+          <xref href="#" outputclass="btn theme-secondary">7</xref>
         </bodydiv>
         <bodydiv outputclass="me-2 btn-group">
-          <xref href="#" outputclass="btn-info">8</xref>
+          <xref href="#" outputclass="btn theme-info">8</xref>
         </bodydiv>
       </bodydiv>
     </bodydiv>
@@ -137,18 +137,18 @@
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-toolbar"&gt;
   &lt;div outputclass="btn-group me-2"&gt;
-    &lt;xref outputclass="btn-primary" href="#"&gt;1&lt;/xref&gt;
-    &lt;xref outputclass="btn-primary" href="#"&gt;2&lt;/xref&gt;
-    &lt;xref outputclass="btn-primary" href="#"&gt;3&lt;/xref&gt;
-    &lt;xref outputclass="btn-primary" href="#"&gt;4&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-primary" href="#"&gt;1&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-primary" href="#"&gt;2&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-primary" href="#"&gt;3&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-primary" href="#"&gt;4&lt;/xref&gt;
   &lt;/div&gt;
   &lt;div outputclass="btn-group me-2"&gt;
-    &lt;xref outputclass="btn-secondary" href="#"&gt;5&lt;/xref&gt;
-    &lt;xref outputclass="btn-secondary" href="#"&gt;6&lt;/xref&gt;
-    &lt;xref outputclass="btn-secondary" href="#"&gt;7&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-secondary" href="#"&gt;5&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-secondary" href="#"&gt;6&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-secondary" href="#"&gt;7&lt;/xref&gt;
   &lt;/div&gt;
   &lt;div outputclass="btn-group me-2"&gt;
-    &lt;xref outputclass="btn-info" href="#"&gt;8&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-info" href="#"&gt;8&lt;/xref&gt;
   &lt;/div&gt;
 &lt;/div&gt;</codeblock>
         </section>
@@ -156,10 +156,10 @@
         <title>Specialization</title>
           <codeblock>&lt;button-toolbar&gt;
   &lt;button-group outputclass="me-2"&gt;
-    &lt;button href="#"&gt;1&lt;/button&gt;
-    &lt;button href="#"&gt;2&lt;/button&gt;
-    &lt;button href="#"&gt;3&lt;/button&gt;
-    &lt;button href="#"&gt;4&lt;/button&gt;
+    &lt;button color="primary" href="#"&gt;1&lt;/button&gt;
+    &lt;button color="primary" href="#"&gt;2&lt;/button&gt;
+    &lt;button color="primary" href="#"&gt;3&lt;/button&gt;
+    &lt;button color="primary" href="#"&gt;4&lt;/button&gt;
   &lt;/button-group&gt;
   &lt;button-group outputclass="me-2"&gt;
     &lt;button color="secondary" href="#"&gt;5&lt;/button&gt;
@@ -178,26 +178,26 @@
     </section>
     <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="btn-group-vertical">
-        <xref href="#" outputclass="btn-primary">Top</xref>
-        <xref href="#" outputclass="btn-primary">Middle</xref>
-        <xref href="#" outputclass="btn-primary">Bottom</xref>
+        <xref href="#" outputclass="btn theme-primary">Top</xref>
+        <xref href="#" outputclass="btn theme-primary">Middle</xref>
+        <xref href="#" outputclass="btn theme-primary">Bottom</xref>
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-group-vertical"&gt;
-  &lt;xref outputclass="btn-primary" href="#"&gt;Top&lt;/xref&gt;
-  &lt;xref outputclass="btn-primary" href="#"&gt;Middle&lt;/xref&gt;
-  &lt;xref outputclass="btn-primary" href="#"&gt;Bottom&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-primary" href="#"&gt;Top&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-primary" href="#"&gt;Middle&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-primary" href="#"&gt;Bottom&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
           <codeblock>&lt;button-group vertical="yes"&gt;
-  &lt;button href="#"&gt;Top&lt;/button&gt;
-  &lt;button href="#"&gt;Middle&lt;/button&gt;
-  &lt;button href="#"&gt;Bottom&lt;/button&gt;
+  &lt;button color="primary" href="#"&gt;Top&lt;/button&gt;
+  &lt;button color="primary" href="#"&gt;Middle&lt;/button&gt;
+  &lt;button color="primary" href="#"&gt;Bottom&lt;/button&gt;
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
diff --git a/sample/buttons.dita b/sample/buttons.dita
index c3a51693..4229b93a 100644
--- a/sample/buttons.dita
+++ b/sample/buttons.dita
@@ -30,27 +30,27 @@
         thrown in for more control.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <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>
+      <xref href="#" outputclass="btn btn-solid btn-styled 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>
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
         <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-primary"&gt;Primary&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary"&gt;Secondary&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-success"&gt;Success&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-danger"&gt;Danger&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-warning"&gt;Warning&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-info"&gt;Info&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-light"&gt;Light&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-dark"&gt;Dark&lt;/xref&gt;</codeblock>
+          <codeblock>&lt;xref href="#" outputclass="btn theme-primary"&gt;Primary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-secondary"&gt;Secondary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-success"&gt;Success&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-danger"&gt;Danger&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-warning"&gt;Warning&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-info"&gt;Info&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-accent"&gt;Accent&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-inverse"&gt;Inverse&lt;/xref&gt;</codeblock>
         </section>
           <section>
           <title>Specialization</title>
@@ -60,38 +60,38 @@
 &lt;button href="#" color="danger"&gt;Danger&lt;/button&gt;
 &lt;button href="#" color="warning"&gt;Warning&lt;/button&gt;
 &lt;button href="#" color="info"&gt;Info&lt;/button&gt;
-&lt;button href="#" color="light"&gt;Light&lt;/button&gt;
-&lt;button href="#" color="dark"&gt;Dark&lt;/button&gt;</codeblock>
+&lt;button href="#" color="accent"&gt;Accent&lt;/button&gt;
+&lt;button href="#" color="inverse"&gt;Inverse&lt;/button&gt;</codeblock>
         </section>
       </bodydiv>
 
     <section>
       <title>Outline buttons</title>
       <p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with
-        the <xmlatt>outputclass</xmlatt> and a value of <codeph>btn-outline-*</codeph> to remove all background images
+        the <xmlatt>outputclass</xmlatt> and a value of <codeph>btn theme-outline-*</codeph> to remove all background images
         and colors on any button.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <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 btn-outline theme-secondary">Secondary</xref>
+      <xref href="#" outputclass="btn btn-outline theme-success">Success</xref>
+      <xref href="#" outputclass="btn btn-outline theme-danger">Danger</xref>
+      <xref href="#" outputclass="btn btn-outline theme-warning">Warning</xref>
+      <xref href="#" outputclass="btn btn-outline theme-info">Info</xref>
+      <xref href="#" outputclass="btn btn-outline theme-accent">Accent</xref>
+      <xref href="#" outputclass="btn btn-outline theme-inverse">Inverse</xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-outline-primary"&gt;Primary&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-outline-secondary"&gt;Secondary&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-outline-success"&gt;Success&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-outline-danger"&gt;Danger&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-outline-warning"&gt;Warning&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-outline-info"&gt;Info&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-outline-light"&gt;Light&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-outline-dark"&gt;Dark&lt;/xref&gt;</codeblock>
+          <codeblock>&lt;xref href="#" outputclass="btn btn-outline theme-primary"&gt;Primary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-secondary"&gt;Secondary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-success"&gt;Success&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-danger"&gt;Danger&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-warning"&gt;Warning&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-info"&gt;Info&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-accent"&gt;Accent&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-inverse"&gt;Inverse&lt;/xref&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
@@ -101,8 +101,8 @@
 &lt;button href="#" color="danger" outline="yes"&gt;Danger&lt;/button&gt;
 &lt;button href="#" color="warning" outline="yes"&gt;Warning&lt;/button&gt;
 &lt;button href="#" color="info" outline="yes"&gt;Info&lt;/button&gt;
-&lt;button href="#" color="light" outline="yes"&gt;Light&lt;/button&gt;
-&lt;button href="#" color="dark" outline="yes"&gt;Dark&lt;/button&gt;</codeblock>
+&lt;button href="#" color="accent" outline="yes"&gt;Accent&lt;/button&gt;
+&lt;button href="#" color="inverse" outline="yes"&gt;Inverse&lt;/button&gt;</codeblock>
         </section>
       </bodydiv>
     <section>
@@ -111,15 +111,15 @@
           <xmlatt>size="small"</xmlatt> for additional sizes.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <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 btn-lg">Large button</xref>
+      <xref href="#" outputclass="btn theme-secondary btn btn-lg">Large button</xref>
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-primary btn-lg"&gt;Large button&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary btn-lg"&gt;Large button&lt;/xref&gt;</codeblock>
+          <codeblock>&lt;xref href="#" outputclass="btn theme-primary btn btn-lg"&gt;Large button&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-secondary btn btn-lg"&gt;Large button&lt;/xref&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
@@ -129,15 +129,15 @@
       </bodydiv>
 
     <bodydiv outputclass="p-3 border">
-      <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-sm">Small button</xref>
+      <xref href="#" outputclass="btn theme-secondary btn-sm">Small button</xref>
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-primary btn-sm"&gt;Small button&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary btn-sm"&gt;Small button&lt;/xref&gt;</codeblock>
+          <codeblock>&lt;xref href="#" outputclass="btn theme-primary btn btn-sm"&gt;Small button&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-secondary btn-sm"&gt;Small button&lt;/xref&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 475666fc..8fbb2edf 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -23,7 +23,7 @@
   <xsl:param name="BOOTSTRAP_CSS_TABS_VERTICAL" select="'me-3'"/>
   <xsl:param name="BOOTSTRAP_CSS_ACCORDION" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_NAV" select="'bg-body-tertiary'"/>
-  <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_LINK" select="'btn btn-outline-primary btn-sm'"/>
+  <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_LINK" select="'btn btn-outline theme-primary btn-sm'"/>
   <xsl:param name="BOOTSTRAP_CSS_FIGURE" select="' w-100 mw-100 p-3 '"/>
   <xsl:param name="BOOTSTRAP_CSS_FIGURE_CAPTION" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_FIGURE_IMAGE" select="'img-fluid border rounded'"/>
@@ -304,12 +304,20 @@
   </xsl:template>
 
   <!-- Change the default Bootstrap CSS classes of buttons -->
-  <xsl:template match="*[contains(@class, ' bootstrap-d/button ')]" mode="bootstrap-class" priority="10">
-    <xsl:text>btn btn-</xsl:text>
-    <xsl:if test="@outline = 'yes'">
-       <xsl:text>outline-</xsl:text>
+  <xsl:template match="*[contains(@class, ' bootstrap-d/button ')]  | *[contains(@class,' topic/xref ') and (contains(@outputclass, 'btn') or contains(@outputclass, 'btn-outline')) ]" mode="bootstrap-class" priority="10">
+    <xsl:value-of
+      select="
+        if (@outline = 'yes') then 'btn btn-outline'
+        else if (contains(@outputclass, 'btn-outline')) then 'btn'
+        else 'btn-solid'"
+    />
+    <xsl:if test="@color">
+      <xsl:text> theme-</xsl:text>
+      <xsl:value-of select="(@color, 'primary')[1]"/>
+    </xsl:if>
+    <xsl:if test="@styled">
+      <xsl:text> btn-styled</xsl:text>
     </xsl:if>
-    <xsl:value-of select="(@color, 'primary')[1]"/>
     <xsl:text> </xsl:text>
     <xsl:choose>
       <xsl:when test="@size = 'small'">btn-sm </xsl:when>

From 84f2bc1eddeb8b0e4c080de1c7ed6a3572d67235 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 28 Jul 2026 20:42:45 +0200
Subject: [PATCH 05/87] Fixing colors

---
 css/bootswatch-colors.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/css/bootswatch-colors.css b/css/bootswatch-colors.css
index 9f4246fe..64ee6007 100644
--- a/css/bootswatch-colors.css
+++ b/css/bootswatch-colors.css
@@ -4,8 +4,8 @@
  */
 
 :root {
-  --dita-prussian-blue: var(--bs-primary-text-emphasis);
-  --dita-maroon: var(--bs-danger-text-emphasis);
+  --dita-prussian-blue: var(--bs-primary-fg-emphasis);
+  --dita-maroon: var(--bs-danger-fg-emphasis);
   --dita-violet: var(--bs-purple-400);
-  --bs-code-color: rgb(from var(--bs-danger) r g calc(b + 63));
+  --bs-code-color: rgb(from var(--bs-danger-base) r g calc(b + 63));
 }

From 59073371a0d354b5ec24bbcb67421c7d9983e696 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 28 Jul 2026 21:19:05 +0200
Subject: [PATCH 06/87] Fixing dita

---
 Customization/xsl/accordion.xsl | 88 ++++++++++-----------------------
 sample/badge.dita               |  3 +-
 sample/buttons.dita             |  3 +-
 sample/index.dita               |  2 +-
 sample/tooltips.dita            | 62 ++++++++++++-----------
 xsl/utility-classes.xsl         |  7 ++-
 6 files changed, 69 insertions(+), 96 deletions(-)

diff --git a/Customization/xsl/accordion.xsl b/Customization/xsl/accordion.xsl
index 1bbe66a7..cccde048 100644
--- a/Customization/xsl/accordion.xsl
+++ b/Customization/xsl/accordion.xsl
@@ -15,7 +15,7 @@
   <!-- https://getbootstrap.com/docs/5.3/components/accordion/ -->
 
   <xsl:template
-    match="*[contains(@class, ' bootstrap-d/accordion ') or (contains(@class,' topic/bodydiv ') and contains(@outputclass, 'accordion'))]"
+    match="*[contains(@class, ' bootstrap-d/accordion ') or (contains(@class,' topic/bodydiv ') and (contains(@outputclass, 'accordion') or contains(@outputclass, 'accordion-flush')))]"
   >
     <div>
       <xsl:attribute name="id" select="dita-ot:generate-html-id(.)"/>
@@ -24,75 +24,39 @@
     </div>
   </xsl:template>
 
-  <xsl:template name="expand-accordion-head">
-    <xsl:attribute name="aria-expanded" select="contains(@outputclass, 'show') or @open = 'yes'"/>
-    <xsl:variable name="parent-color" select="parent::*/@color"/>
-    <xsl:attribute
-      name="class"
-      select="
-        string-join((
-          if (contains(@outputclass, 'show') or @open = 'yes') then 'accordion-button' else 'accordion-button collapsed',
-          if ($parent-color) then concat('bg-', $parent-color) else ()
-        ), ' ')"
-    />
-  </xsl:template>
-
-  <xsl:template name="expand-accordion-body">
-    <xsl:attribute
-      name="class"
-      select="
-        if (contains(@outputclass, 'show') or @open = 'yes') then 'accordion-collapse collapse show'
-        else 'accordion-collapse collapse'"
-    />
-  </xsl:template>
 
   <xsl:template match="*[contains(@class, ' topic/section ')]" mode="accordion">
-    <xsl:param name="headLevel">
-      <xsl:variable name="headCount" select="count(ancestor::*[contains(@class, ' topic/topic ')])+1"/>
-      <xsl:choose>
-        <xsl:when test="$headCount > 6">h6</xsl:when>
-        <xsl:otherwise>h<xsl:value-of select="$headCount"/></xsl:otherwise>
-      </xsl:choose>
-    </xsl:param>
 
-    <xsl:variable name="index" select="count(preceding-sibling::*[contains(@class, ' topic/section ')])"/>
-    <xsl:variable name="id" select="dita-ot:generate-html-id(.)"/>
-    <xsl:variable name="parent" select="dita-ot:generate-html-id(..)"/>
+    <xsl:variable name="id" select="dita-ot:generate-html-id(..)"/>
+    <details class="accordion-item">
 
-    <div class="accordion-item">
-       <xsl:if test="parent::*/@color">
-          <xsl:attribute name="class" select="concat('accordion-item bg-', parent::*/@color, '-subtle')"/>
+       <xsl:if test="not(contains(../@outputclass, 'open')) and not(../@open = 'yes')">
+          <xsl:attribute name="name" select="$id"/>
+        </xsl:if>
+       <xsl:if test="(contains(@outputclass, 'show') or @open = 'yes')">
+         <xsl:attribute name="open" select="'yes'"/>
        </xsl:if>
-      <xsl:element name="{$headLevel}">
-        <xsl:attribute name="type" select="'accordion-header'"/>
-        <xsl:attribute name="id" select="concat('heading_' ,$id)"/>
-        <button class="accordion-button" type="button" data-bs-toggle="collapse">
-          <xsl:call-template name="expand-accordion-head"/>
-          <xsl:attribute name="data-bs-target" select="concat('#collapse_' ,$id)"/>
-          <xsl:attribute name="aria-controls" select="concat('collapse_' ,$id)"/>
-          <xsl:value-of select="*[contains(@class, ' topic/title ')]"/>
-        </button>
-      </xsl:element>
-      <div>
-        <xsl:call-template name="expand-accordion-body"/>
-        <xsl:attribute name="id" select="concat('collapse_' ,$id)"/>
-        <xsl:attribute name="aria-labelledby" select="concat('heading_' ,$id)"/>
-        <xsl:choose>
-          <xsl:when test="contains(../@outputclass,'accordion-open') or ../@open = 'yes'"/>
-          <xsl:otherwise>
-            <xsl:attribute name="data-bs-parent" select="concat('#', $parent)"/>
-          </xsl:otherwise>
-        </xsl:choose>
-        <div class="accordion-body">
-          <xsl:call-template name="gen-toc-id"/>
-          <xsl:call-template name="setidaname"/>
+
+      <summary class="accordion-header">
+        <xsl:apply-templates select="*[(contains(@class, ' topic/title '))]"/>
+        <svg
+          class="accordion-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ><path d="m2 5 6 6 6-6"/></svg>
+
+      </summary>
+      <div class="accordion-body">
           <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]" mode="out-of-line"/>
           <xsl:apply-templates
-            select="*[not(contains(@class, ' topic/title '))] | text() | comment() | processing-instruction()"
-          />
+          select="*[not(contains(@class, ' topic/title '))] | text() | comment() | processing-instruction()"
+        />
           <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
-        </div>
       </div>
-    </div>
+    </details>
   </xsl:template>
 </xsl:stylesheet>
diff --git a/sample/badge.dita b/sample/badge.dita
index e13cd105..60472c89 100644
--- a/sample/badge.dita
+++ b/sample/badge.dita
@@ -41,7 +41,8 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;title&gt;Example Heading &lt;ph outputclass="badge theme-primary"&gt;New&lt;/ph&gt;&lt;/title&gt;
+          <codeblock
+        >&lt;title&gt;Example Heading &lt;ph outputclass="badge theme-primary"&gt;New&lt;/ph&gt;&lt;/title&gt;
 &lt;p&gt;Example Text &lt;ph outputclass="badge theme-primary"&gt;New&lt;/ph&gt;&lt;/p&gt;</codeblock>
         </section>
          <section>
diff --git a/sample/buttons.dita b/sample/buttons.dita
index 4229b93a..443844ce 100644
--- a/sample/buttons.dita
+++ b/sample/buttons.dita
@@ -68,7 +68,8 @@
     <section>
       <title>Outline buttons</title>
       <p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with
-        the <xmlatt>outputclass</xmlatt> and a value of <codeph>btn theme-outline-*</codeph> to remove all background images
+        the <xmlatt>outputclass</xmlatt> and a value of <codeph
+        >btn theme-outline-*</codeph> to remove all background images
         and colors on any button.</p>
     </section>
     <bodydiv outputclass="p-3 border">
diff --git a/sample/index.dita b/sample/index.dita
index 3d728bcd..6cec62e7 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -30,7 +30,7 @@
       <title>Installing</title>
       <p>Use the <cmdname>dita</cmdname> command to add this plug-in to your DITA Open Toolkit installation:</p>
     </section>
-    <bodydiv outputclass="accordion">
+    <bodydiv outputclass="accordion theme-primary">
       <section id="install-35" outputclass="show">
         <title>DITA-OT 3.5 and newer:</title>
           <codeblock outputclass="language-bash"><cmdname>dita</cmdname> <parmname
diff --git a/sample/tooltips.dita b/sample/tooltips.dita
index 3b452217..8350ced9 100644
--- a/sample/tooltips.dita
+++ b/sample/tooltips.dita
@@ -76,10 +76,11 @@
         <desc>Tooltip on bottom</desc> Tooltip on bottom </xref>
       <xref href="#" outputclass="btn-secondary tooltip-left">
         <desc>Tooltip on left</desc> Tooltip on left </xref>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-secondary tooltip-top"&gt;
+    <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;xref href="#" outputclass="btn-secondary tooltip-top"&gt;
   &lt;desc&gt;Tooltip on top&lt;/desc&gt;
   Tooltip on top
 &lt;/xref&gt;
@@ -95,10 +96,10 @@
   &lt;desc&gt;Tooltip on left&lt;/desc&gt;
   Tooltip on left
 &lt;/xref&gt;</codeblock>
-        </section>
-         <section>
-        <title>Specialization</title>
-          <codeblock>&lt;tooltip outputclass="btn-secondary" position="top"&gt;
+    </section>
+    <section>
+      <title>Specialization</title>
+        <codeblock>&lt;tooltip outputclass="btn-secondary" position="top"&gt;
   &lt;desc&gt;Tooltip on top&lt;/desc&gt;
   Tooltip on top
 &lt;/tooltip&gt;
@@ -114,31 +115,32 @@
   &lt;desc&gt;Tooltip on left&lt;/desc&gt;
   Tooltip on left
 &lt;/tooltip&gt;</codeblock>
-        </section>
-      </bodydiv>
-      <p>Custom HTML can be added to tooltips using additional DITA elements within the <xmlelement>desc</xmlelement>
-      </p>
-      <xref href="#" outputclass="btn-secondary tooltip-top">
-        <desc><b>Tooltip</b>
-          <u>with</u>
-          <b>DITA</b> elements</desc> Tooltip with embedded DITA </xref>
-    </bodydiv>
-    <bodydiv outputclass="nav-pills mt-3">
-      <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-secondary tooltip-top"&gt;
-  &lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
-  Tooltip with embedded DITA
+    </section>
+  </bodydiv>
+  <p>Custom HTML can be added to tooltips using additional DITA elements within the <xmlelement>desc</xmlelement>
+  </p>
+  <bodydiv outputclass="p-3 border">
+    <xref href="#" outputclass="btn-secondary tooltip-top">
+      <desc><b>Tooltip</b>
+        <u>with</u>
+        <b>DITA</b> elements</desc> Tooltip with embedded DITA </xref>
+  </bodydiv>
+  <bodydiv outputclass="nav-pills mt-3">
+    <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;xref href="#" outputclass="btn-secondary tooltip-top"&gt;
+&lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
+Tooltip with embedded DITA
 &lt;/xref&gt;</codeblock>
-        </section>
-         <section>
-        <title>Specialization</title>
-          <codeblock>&lt;tooltip outputclass="btn-secondary"&gt;
-  &lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
-  Tooltip with embedded DITA
+      </section>
+       <section>
+      <title>Specialization</title>
+        <codeblock>&lt;tooltip outputclass="btn-secondary"&gt;
+&lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
+Tooltip with embedded DITA
 &lt;/tooltip&gt;</codeblock>
-        </section>
-      </bodydiv>
+      </section>
+    </bodydiv>
     <section>
       <title>Custom tooltips</title>
       <p>You can customize the appearance of tooltips using CSS variables. We set a custom class with <codeph
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 8fbb2edf..90702e4b 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -304,7 +304,11 @@
   </xsl:template>
 
   <!-- Change the default Bootstrap CSS classes of buttons -->
-  <xsl:template match="*[contains(@class, ' bootstrap-d/button ')]  | *[contains(@class,' topic/xref ') and (contains(@outputclass, 'btn') or contains(@outputclass, 'btn-outline')) ]" mode="bootstrap-class" priority="10">
+  <xsl:template
+    match="*[contains(@class, ' bootstrap-d/button ')]  | *[contains(@class,' topic/xref ') and (contains(@outputclass, 'btn') or contains(@outputclass, 'btn-outline')) ]"
+    mode="bootstrap-class"
+    priority="10"
+  >
     <xsl:value-of
       select="
         if (@outline = 'yes') then 'btn btn-outline'
@@ -485,6 +489,7 @@
             else if (contains(@outputclass, 'btn-group-vertical')) then ''
             else if (contains(@outputclass, 'btn-group')) then ''
             else if (contains(@outputclass, 'btn-toolbar')) then ''
+            else if (contains(@outputclass, 'accordion-')) then 'accordion'
             else if (contains(@class, ' topic/fig ')) then ' figure ' || $BOOTSTRAP_CSS_FIGURE
             else if (contains(@class, ' topic/lq ')) then ' blockquote '
             else if (contains(@class, ' topic/dl ')) then $BOOTSTRAP_CSS_DL

From e579202fe2ad5bab6c7f97b706a6f6f6eeec707e Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 28 Jul 2026 22:26:28 +0200
Subject: [PATCH 07/87] Update colors

---
 sample/borders.dita |  16 +++---
 sample/color.dita   | 124 ++++++++++++++++++++++----------------------
 sample/tables.dita  |  48 ++++++++---------
 3 files changed, 94 insertions(+), 94 deletions(-)

diff --git a/sample/borders.dita b/sample/borders.dita
index eac1be95..f57ecd01 100644
--- a/sample/borders.dita
+++ b/sample/borders.dita
@@ -34,11 +34,11 @@
     </section>
     <bodydiv outputclass="p-3 border">
       <div outputclass="p-3">
-        <ph outputclass="border p-3 border-secondary">&#xA0;border&#xA0;</ph>&#xA0;
-        <ph outputclass="border-top p-3 border-secondary">&#xA0;border-top</ph>&#xA0;
-        <ph outputclass="border-end p-3 border-secondary">&#xA0;border-end</ph>&#xA0;
-        <ph outputclass="border-bottom p-3 border-secondary">&#xA0;border-bottom</ph>&#xA0;
-        <ph outputclass="border-start p-3 border-secondary">&#xA0;border-start</ph>
+        <ph outputclass="border p-3 border-accent">&#xA0;border&#xA0;</ph>&#xA0;
+        <ph outputclass="border-top p-3 border-accent">&#xA0;border-top</ph>&#xA0;
+        <ph outputclass="border-end p-3 border-accent">&#xA0;border-end</ph>&#xA0;
+        <ph outputclass="border-bottom p-3 border-accent">&#xA0;border-bottom</ph>&#xA0;
+        <ph outputclass="border-start p-3 border-accent">&#xA0;border-start</ph>
       </div>
     </bodydiv>
     <codeblock>&lt;ph outputclass="border"&gt;...&lt;/ph&gt;
@@ -203,19 +203,19 @@
     <bodydiv outputclass="mt-3 p-3 border">
       <div outputclass="mb-3 pt-3">
         <ph outputclass="me-5 p-4 border border-info rounded-circle">Circle</ph>
-        <ph outputclass="me-2 px-4 py-2 border border-dark rounded-pill">Pill</ph>
+        <ph outputclass="me-2 px-4 py-2 border border-warning rounded-pill">Pill</ph>
       </div>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;ph outputclass="border rounded-circle border-info"&gt;Circle&lt;/ph&gt;
-&lt;ph outputclass="border rounded-pill border-dark"&gt;Pill&lt;/ph&gt;</codeblock>
+&lt;ph outputclass="border rounded-pill border-warning"&gt;Pill&lt;/ph&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
         <codeblock>&lt;ph border="yes" rounded="circle" bordercolor="info"&gt;Circle&lt;/ph&gt;
-&lt;ph border="yes" rounded="pill" bordercolor="dark"&gt;Pill&lt;/ph&gt;</codeblock>
+&lt;ph border="yes" rounded="pill" bordercolor="warning"&gt;Pill&lt;/ph&gt;</codeblock>
       </section>
     </bodydiv>
 
diff --git a/sample/color.dita b/sample/color.dita
index 188e8f81..d945a516 100644
--- a/sample/color.dita
+++ b/sample/color.dita
@@ -24,38 +24,38 @@
     </section>
 
     <bodydiv outputclass="p-3 border">
-      <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>
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="text-bg-primary"&gt;.text-bg-primary&lt;/div&gt;
-&lt;div outputclass="text-bg-secondary"&gt;.text-bg-secondary&lt;/div&gt;
-&lt;div outputclass="text-bg-success"&gt;.text-bg-success&lt;/div&gt;
-&lt;div outputclass="text-bg-danger"&gt;.text-bg-danger&lt;/div&gt;
-&lt;div outputclass="text-bg-warning"&gt;.text-bg-warning&lt;/div&gt;
-&lt;div outputclass="text-bg-info"&gt;.text-bg-info&lt;/div&gt;
-&lt;div outputclass="text-bg-light"&gt;.text-bg-light&lt;/div&gt;
-&lt;div outputclass="text-bg-dark"&gt;.text-bg-dark&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="bg-primary fg-contrast-primary"&gt;bg-primary&lt;/div&gt;
+&lt;div outputclass="bg-secondary fg-contrast-secondary"&gt;bg-secondary&lt;/div&gt;
+&lt;div outputclass="bg-success fg-contrast-success"&gt;bg-success&lt;/div&gt;
+&lt;div outputclass="bg-danger fg-contrast-danger"&gt;bg-danger&lt;/div&gt;
+&lt;div outputclass="bg-warning fg-contrast-warning"&gt;bg-warning&lt;/div&gt;
+&lt;div outputclass="bg-info fg-contrast-info" &gt;bg-info&lt;/div&gt;
+&lt;div outputclass="bg-accent fg-contrast-accent"&gt;bg-accent&lt;/div&gt;
+&lt;div outputclass="bg-inverse fg-contrast-inverse"&gt;bg-inverse&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;div color="primary"&gt;.text-bg-primary&lt;/div&gt;
-&lt;div color="secondary"&gt;.text-bg-secondary&lt;/div&gt;
-&lt;div color="success"&gt;.text-bg-success&lt;/div&gt;
-&lt;div color="danger"&gt;.text-bg-danger&lt;/div&gt;
-&lt;div color="warning"&gt;.text-bg-warning&lt;/div&gt;
-&lt;div color="info"&gt;.text-bg-info&lt;/div&gt;
-&lt;div color="light"&gt;.text-bg-light&lt;/div&gt;
-&lt;div color="dark"&gt;.text-bg-dark&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div color="primary"&gt;bg-primary&lt;/div&gt;
+&lt;div color="secondary"&gt;bg-secondary&lt;/div&gt;
+&lt;div color="success"&gt;bg-success&lt;/div&gt;
+&lt;div color="danger"&gt;bg-danger&lt;/div&gt;
+&lt;div color="warning"&gt;bg-warning&lt;/div&gt;
+&lt;div color="info"&gt;bg-info&lt;/div&gt;
+&lt;div color="accent"&gt;bg-accent&lt;/div&gt;
+&lt;div color="inverse"&gt;bg-inverse&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -66,24 +66,24 @@
     </section>
 
     <bodydiv outputclass="p-3 border">
-      <section outputclass="mt-2 text-bg-primary">
+      <section outputclass="mt-2 bg-primary fg-contrast-primary">
         <title>Section Decoration</title>
         <p>This section has a primary color background.</p>
       </section>
 
-      <div outputclass="mt-2 p-3 text-bg-success">
+      <div outputclass="mt-2 p-3 bg-success fg-contrast-success">
         <p>This div has a success color background.</p>
       </div>
 
-      <pre outputclass="mt-2 text-bg-warning">
+      <pre outputclass="mt-2 bg-warning fg-contrast-warning">
         This pre has a warning color background.
       </pre>
 
-      <lq outputclass="mt-2 p-1 text-bg-danger">
+      <lq outputclass="mt-2 p-1 bg-danger fg-contrast-danger">
         This is a long quote with a danger color background.
       </lq>
 
-      <table outputclass="mt-2 p-1 w-100 table-primary">
+      <table outputclass="mt-2 p-1 w-100 theme-primary">
         <tgroup cols="2">
           <thead>
             <row>
@@ -92,17 +92,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>
@@ -112,7 +112,7 @@
         </tgroup>
       </table>
 
-      <note outputclass="mt-2 text-bg-primary">
+      <note outputclass="mt-2 theme-primary">
         This is a note with a primary color theme.
       </note>
     </bodydiv>
@@ -120,24 +120,24 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;section outputclass="text-bg-primary"&gt;
+        <codeblock>&lt;section outputclass="bg-primary fg-contrast-primary"&gt;
   &lt;title&gt;Section Decoration&lt;/title&gt;
   &lt;p&gt;This section has a primary color background.&lt;/p&gt;
 &lt;/section&gt;
 
-&lt;div outputclass="text-bg-success p-3"&gt;
+&lt;div outputclass="bg-success fg-contrast-success p-3"&gt;
   &lt;p&gt;This div has a success color background.&lt;/p&gt;
 &lt;/div&gt;
 
-&lt;pre outputclass="text-bg-warning"&gt;
+&lt;pre outputclass="bg-warning fg-contrast-warning"&gt;
   This pre has a warning color background.
 &lt;/pre&gt;
 
-&lt;lq outputclass="text-bg-danger p-1"&gt;
+&lt;lq outputclass="bg-danger fg-contrast-danger p-1"&gt;
   ...
 &lt;/lq&gt;
 
-&lt;table outputclass="table-primary p-1 w-100"&gt;
+&lt;table outputclass="theme-primary p-1 w-100"&gt;
   &lt;tgroup cols="2"&gt;
     &lt;thead&gt;
       &lt;row&gt;
@@ -146,15 +146,15 @@
       &lt;/row&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
-      &lt;row outputclass="table-info"&gt;
+      &lt;row outputclass="theme-info"&gt;
        ...
       &lt;/row&gt;
-      &lt;row outputclass="table-success"&gt;
+      &lt;row outputclass="theme-success"&gt;
        ...
       &lt;/row&gt;
       &lt;row&gt;
         &lt;entry&gt;...&lt;/entry&gt;
-        &lt;entry outputclass="table-danger"&gt;...&lt;/entry&gt;
+        &lt;entry outputclass="theme-danger"&gt;...&lt;/entry&gt;
       &lt;/row&gt;
       &lt;row&gt;
         &lt;entry&gt;...&lt;/entry&gt;
@@ -227,24 +227,24 @@
     <bodydiv outputclass="p-3 border">
 
       <image scope="external" href="https://picsum.photos/100/100?a" outputclass="img-thumbnail bg-warning"/>
-      <section outputclass="card text-bg-success mt-2 w-50">
+      <section outputclass="card theme-success mt-2 w-50">
         <title>Card Title</title>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
       </section>
 
-      <bodydiv outputclass="accordion mt-2 text-bg-info">
+      <bodydiv outputclass="accordion mt-2 theme-info">
         <section id="accordion_color_1" outputclass="show">
           <title>Accordion Item #1</title>
           <p>This is the first item's accordion body.</p>
         </section>
       </bodydiv>
 
-      <ul outputclass="list-group list-group-item-danger mt-2 w-50">
+      <ul outputclass="list-group theme-danger mt-2 w-50">
         <li>An item</li>
         <li>A second item</li>
       </ul>
 
-      <ol outputclass="carousel mt-2 w-50 text-bg-dark" otherprops="indicators(true)">
+      <ol outputclass="carousel mt-2 w-50 theme-inverse" otherprops="indicators(true)">
         <li>
           <image scope="external" href="https://picsum.photos/1200/600?a"/>
         </li>
@@ -262,19 +262,19 @@
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;img src="..." class="img-thumbnail bg-warning"/&gt;
 
-&lt;section outputclass="card text-bg-success w-50"&gt;
+&lt;section outputclass="card theme-success w-50"&gt;
   ...
 &lt;/section&gt;
 
-&lt;bodydiv outputclass="accordion accordion-info"&gt;
+&lt;bodydiv outputclass="accordion theme-info"&gt;
   ...
 &lt;/bodydiv&gt;
 
-&lt;ul outputclass="list-group list-group-item-danger w-50"&gt;
+&lt;ul outputclass="list-group theme-danger w-50"&gt;
   ...
 &lt;/ul&gt;
 
-&lt;ul outputclass="carousel carousel-dark w-50"&gt;
+&lt;ul outputclass="carousel theme-inverse w-50"&gt;
   ...
 &lt;/ul&gt;</codeblock>
       </section>
@@ -299,7 +299,7 @@
   &lt;li&gt;A second item&lt;/li&gt;
 &lt;/list-group&gt;
 
-&lt;carousel color="dark" width="50" indicators="yes"&gt;
+&lt;carousel color="inverse" width="50" indicators="yes"&gt;
   &lt;carousel-item&gt;
     &lt;image href="..."/&gt;
   &lt;/carousel-item&gt;
@@ -319,19 +319,19 @@
     </section>
 
     <bodydiv outputclass="p-3 border">
-      <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>
+      <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>
     </bodydiv>
 
-    <codeblock>&lt;p outputclass="text-primary"&gt;.text-primary&lt;/p&gt;
-&lt;p outputclass="text-secondary"&gt;.text-secondary&lt;/p&gt;
-&lt;p outputclass="text-success"&gt;.text-success&lt;/p&gt;
-&lt;p outputclass="text-danger"&gt;.text-danger&lt;/p&gt;
-&lt;p outputclass="text-warning bg-dark"&gt;.text-warning&lt;/p&gt;
-&lt;p outputclass="text-info bg-dark"&gt;.text-info&lt;/p&gt;</codeblock>
+    <codeblock>&lt;p outputclass="fg-primary"&gt;fg-primary&lt;/p&gt;
+&lt;p outputclass="fg-secondary"&gt;fg-secondary&lt;/p&gt;
+&lt;p outputclass="fg-success"&gt;fg-success&lt;/p&gt;
+&lt;p outputclass="fg-danger"&gt;fg-danger&lt;/p&gt;
+&lt;p outputclass="fg-warning"&gt;fg-warning&lt;/p&gt;
+&lt;p outputclass="fg-info"&gt;fg-info&lt;/p&gt;</codeblock>
   </body>
 </topic>
diff --git a/sample/tables.dita b/sample/tables.dita
index 9737f5ad..869ab725 100644
--- a/sample/tables.dita
+++ b/sample/tables.dita
@@ -111,7 +111,7 @@
       <p>Use contextual classes to color tables, table rows or individual cells.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <table outputclass="p-1 w-100 table-primary">
+      <table outputclass="p-1 w-100 theme-primary">
         <tgroup cols="2">
           <thead>
             <row>
@@ -120,17 +120,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>
@@ -144,7 +144,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;table outputclass="table-primary p-1 w-100"&gt;
+        <codeblock>&lt;table outputclass="theme-primary p-1 w-100"&gt;
   &lt;tgroup cols="2"&gt;
     &lt;thead&gt;
       &lt;row&gt;
@@ -153,17 +153,17 @@
       &lt;/row&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
-      &lt;row outputclass="table-info"&gt;
+      &lt;row outputclass="theme-info"&gt;
         &lt;entry&gt;Elephant (African and Asian)&lt;/entry&gt;
         &lt;entry&gt;19-22 months&lt;/entry&gt;
       &lt;/row&gt;
-      &lt;row outputclass="table-success"&gt;
+      &lt;row outputclass="theme-success"&gt;
         &lt;entry&gt;Giraffe&lt;/entry&gt;
         &lt;entry&gt;15 months&lt;/entry&gt;
       &lt;/row&gt;
       &lt;row&gt;
         &lt;entry&gt;Rhinoceros&lt;/entry&gt;
-        &lt;entry outputclass="table-danger"&gt;14-16 months&lt;/entry&gt;
+        &lt;entry outputclass="theme-danger"&gt;14-16 months&lt;/entry&gt;
       &lt;/row&gt;
       &lt;row&gt;
         &lt;entry&gt;Hippopotamus&lt;/entry&gt;
@@ -211,7 +211,7 @@
         within the <xmlelement>tbody</xmlelement>.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <table outputclass="table-striped">
+      <table outputclass="theme-striped">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
           <colspec colname="COLSPEC1"/>
@@ -245,7 +245,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;table outputclass="table-striped"&gt;
+        <codeblock>&lt;table outputclass="theme-striped"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
@@ -262,7 +262,7 @@
         within the <xmlelement>tbody</xmlelement>.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <table outputclass="table-striped-columns">
+      <table outputclass="theme-striped-columns">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
           <colspec colname="COLSPEC1"/>
@@ -296,7 +296,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;table outputclass="table-striped-columns"&gt;
+        <codeblock>&lt;table outputclass="theme-striped-columns"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
@@ -414,7 +414,7 @@
         >padding</codeph> in half.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <table outputclass="table-sm">
+      <table outputclass="theme-sm">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
           <colspec colname="COLSPEC1"/>
@@ -448,7 +448,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;table outputclass="table-sm"&gt;
+        <codeblock>&lt;table outputclass="theme-sm"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
@@ -475,7 +475,7 @@
               <entry colname="COLSPEC1" valign="top">Gestation</entry>
             </row>
           </thead>
-          <tbody outputclass="table-group-divider">
+          <tbody outputclass="theme-group-divider">
             <row>
               <entry>Elephant (African and Asian)</entry>
               <entry>19-22 months</entry>
@@ -499,7 +499,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;tbody outputclass="table-group-divider"&gt;
+        <codeblock>&lt;tbody outputclass="theme-group-divider"&gt;
   ...etc
 &lt;/tbody&gt;</codeblock>
       </section>
@@ -627,8 +627,8 @@
     </bodydiv>
     <section>
       <title>Table head</title>
-      <p>Similar to tables and dark tables, use the modifier <xmlatt>color="light"</xmlatt> or
-          <xmlatt>color="dark"</xmlatt> to make <xmlelement>thead</xmlelement> elements appear light or dark
+      <p>Similar to tables and dark tables, use the modifier <xmlatt>color="secondary"</xmlatt> or
+          <xmlatt>color="inverse"</xmlatt> to make <xmlelement>thead</xmlelement> elements appear light or dark
         gray.</p>
     </section>
     <bodydiv outputclass="p-3 border">
@@ -636,7 +636,7 @@
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
           <colspec colname="COLSPEC1"/>
-          <thead outputclass="table-light">
+          <thead outputclass="theme-secondary">
             <row>
               <entry colname="COLSPEC0" valign="top">Animal</entry>
               <entry colname="COLSPEC1" valign="top">Gestation</entry>
@@ -668,7 +668,7 @@
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
-    &lt;thead outputclass="table-light"&gt;
+    &lt;thead outputclass="theme-secondary"&gt;
       ...etc
     &lt;/thead&gt;
   &lt;/tgroup&gt;
@@ -678,7 +678,7 @@
         <title>Specialization</title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
-    &lt;thead color="light"&gt;
+    &lt;thead color="secondary"&gt;
       ...etc
     &lt;/thead&gt;
   &lt;/tgroup&gt;
@@ -690,7 +690,7 @@
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
           <colspec colname="COLSPEC1"/>
-          <thead outputclass="table-dark">
+          <thead outputclass="theme-inverse">
             <row>
               <entry colname="COLSPEC0" valign="top">Animal</entry>
               <entry colname="COLSPEC1" valign="top">Gestation</entry>
@@ -722,7 +722,7 @@
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
-    &lt;thead outputclass="table-dark"&gt;
+    &lt;thead outputclass="theme-inverse"&gt;
       ...etc
     &lt;/thead&gt;
   &lt;/tgroup&gt;
@@ -732,7 +732,7 @@
         <title>Specialization</title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
-    &lt;thead color="dark"&gt;
+    &lt;thead color="inverse"&gt;
       ...etc
     &lt;/thead&gt;
   &lt;/tgroup&gt;

From 50b8882f6d5e9cd1015a82fc94967be21ad79b33 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 28 Jul 2026 23:30:16 +0200
Subject: [PATCH 08/87] Convert offcanvas to drawer

---
 .github/dita-ot/header.xml                    |   4 +-
 Customization/xsl/carousel.xsl                |   4 +-
 .../xsl/{offcanvas.xsl => drawer.xsl}         |  26 +--
 Customization/xsl/nav.xsl                     |  24 +-
 Customization/xsl/scrollspy.xsl               |   2 +-
 Customization/xsl/topic.xsl                   |   2 +-
 includes/hdr.navbar.default.xml               |   4 +-
 includes/hdr.navbar.example.xml               |   4 +-
 includes/hdr.sidebar.example.xml              |   2 +-
 sample/document.ditamap                       |   2 +-
 sample/drawer.dita                            | 204 +++++++++++++++++
 sample/nav.dita                               |   6 +-
 sample/offcanvas.dita                         | 212 ------------------
 sample/scrollspy.dita                         |   4 +-
 xsl/dita2html5-bootstrapImpl_template.xsl     |   2 +-
 xsl/dita2html5-legacy-3.0_template.xsl        |   2 +-
 xsl/utility-classes.xsl                       |  10 +-
 17 files changed, 250 insertions(+), 264 deletions(-)
 rename Customization/xsl/{offcanvas.xsl => drawer.xsl} (73%)
 create mode 100644 sample/drawer.dita
 delete mode 100644 sample/offcanvas.dita

diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml
index f257e4b9..7b25dda0 100644
--- a/.github/dita-ot/header.xml
+++ b/.github/dita-ot/header.xml
@@ -4,9 +4,9 @@
     <!-- This shows the menu on mobile -->
     <div class="bd-navbar-toggle">
       <button
-        class="navbar-toggler p-2"
+        class="lg:d-none p-2"
         type="button"
-        data-bs-toggle="offcanvas"
+        data-bs-toggle="drawer"
         data-bs-target="#bdSidebar"
         aria-controls="bdSidebar"
         aria-label="Toggle docs navigation"
diff --git a/Customization/xsl/carousel.xsl b/Customization/xsl/carousel.xsl
index 364380c1..7cdab610 100644
--- a/Customization/xsl/carousel.xsl
+++ b/Customization/xsl/carousel.xsl
@@ -14,7 +14,7 @@
   <!-- Customization to add Bootstrap Carousel Component -->
   <!-- https://getbootstrap.com/docs/5.3/components/carousel/ -->
 
-  <xsl:param name="BOOTSTRAP_CSS_CAROUSEL_INDICATORS" select="'btn btn-primary bg-primary btn-sm'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CAROUSEL_INDICATORS" select="'btn theme-primary btn-sm'"/>
 
   <xsl:template name="carousel-previous-next">
     <xsl:param name="id"/>
@@ -159,7 +159,7 @@
     <xsl:choose>
       <xsl:when test="@fade = 'yes' or contains(@outputclass, 'carousel-fade')"/>
       <xsl:otherwise>
-        <span class="btn btn-{$color} btn-sm p-0">
+        <span class="btn theme-{$color} btn-sm p-0">
           <span aria-hidden="true">
             <xsl:attribute name="class" select="concat($icon, ' align-middle')"/>
           </span>
diff --git a/Customization/xsl/offcanvas.xsl b/Customization/xsl/drawer.xsl
similarity index 73%
rename from Customization/xsl/offcanvas.xsl
rename to Customization/xsl/drawer.xsl
index 864dfe52..d59a3857 100644
--- a/Customization/xsl/offcanvas.xsl
+++ b/Customization/xsl/drawer.xsl
@@ -12,10 +12,10 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Offcanvas Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/offcanvas/ -->
+  <!-- https://getbootstrap.com/docs/5.3/components/drawer/ -->
 
   <xsl:template
-    match="*[contains(@class, ' bootstrap-d/offcanvas ')] | *[contains(@class,' topic/section ') and contains(@outputclass, 'offcanvas-')]"
+    match="*[contains(@class, ' bootstrap-d/drawer ')] | *[contains(@class,' topic/section ') and contains(@outputclass, 'drawer-')]"
   >
     <xsl:param name="headLevel">
       <xsl:variable name="headCount" select="count(ancestor::*[contains(@class, ' topic/topic ')])+1"/>
@@ -25,34 +25,34 @@
       </xsl:choose>
     </xsl:param>
     <xsl:variable name="id" select="dita-ot:generate-html-id(.)"/>
-    <div>
+    <dialog>
       <xsl:call-template name="commonattributes"/>
       <xsl:attribute name="tabindex" select="'-1'"/>
       <xsl:attribute name="id" select="$id"/>
-      <xsl:attribute name="aria-labelledby" select="concat('offcanvasLabel_', $id)"/>
-      <div class="offcanvas-header">
+      <xsl:attribute name="aria-labelledby" select="concat('drawerLabel_', $id)"/>
+      <div class="drawer-header">
         <xsl:element name="{$headLevel}">
-          <xsl:attribute name="id" select="concat('offcanvasLabel_' ,$id)"/>
-          <xsl:attribute name="class" select='offcanvas-title'/>
+          <xsl:attribute name="id" select="concat('drawerLabel_' ,$id)"/>
+          <xsl:attribute name="class" select='drawer-title'/>
           <xsl:value-of select="*[contains(@class, ' topic/title ')]"/>
         </xsl:element>
-        <button type="button" class="btn-close text-reset" aria-label="Close" data-bs-dismiss="offcanvas"/>
+        <button type="button" class="btn-close text-reset" aria-label="Close" data-bs-dismiss="drawer"/>
       </div>
-      <div class="offcanvas-body">
+      <div class="drawer-body">
         <xsl:apply-templates select="*[not(contains(@class, ' topic/title '))]"/>
       </div>
-    </div>
+    </dialog>
   </xsl:template>
 
-  <!-- Override to connect an offcanvas to a button -->
-  <xsl:template match="*[contains(@class,' topic/xref ') and contains(@props, 'offcanvas-toggle')]">
+  <!-- Override to connect an drawer to a button -->
+  <xsl:template match="*[contains(@class,' topic/xref ') and contains(@props, 'drawer-toggle')]">
     <xsl:variable name="href" select="substring-after(@href, '#')"/>
     <xsl:variable
       name="id"
       select="if(//*[@id=$href]) then dita-ot:generate-html-id(//*[@id=$href]) else generate-id(//*[@id=$href])"
     />
 
-    <a data-bs-toggle="offcanvas">
+    <a data-bs-toggle="drawer">
       <xsl:call-template name="commonattributes"/>
       <xsl:attribute name="href" select="concat('#',$id)"/>
       <xsl:apply-templates/>
diff --git a/Customization/xsl/nav.xsl b/Customization/xsl/nav.xsl
index 1f89b0cd..e60e0753 100644
--- a/Customization/xsl/nav.xsl
+++ b/Customization/xsl/nav.xsl
@@ -187,8 +187,8 @@
   </xsl:template>
 
   <xsl:template name="default-sidebar-header">
-    <div class="offcanvas-header border-bottom">
-      <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">
+    <div class="drawer-header border-bottom">
+      <h5 class="drawer-title" id="bdSidebarOffcanvasLabel">
         <xsl:choose>
           <xsl:when test="$input.map//*[contains(@class,' topic/title ')][1]">
             <xsl:for-each select="$input.map//*[contains(@class,' topic/title ')][1]">
@@ -214,13 +214,7 @@
           </xsl:otherwise>
         </xsl:choose>
       </h5>
-      <button
-        type="button"
-        class="btn-close"
-        data-bs-dismiss="offcanvas"
-        aria-label="Close"
-        data-bs-target="#bdSidebar"
-      />
+      <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close" data-bs-target="#bdSidebar"/>
     </div>
   </xsl:template>
 
@@ -232,9 +226,9 @@
     </xsl:if>
   </xsl:template>
 
-  <xsl:template name="offcanvas-sidebar">
-    <div
-      class="offcanvas-lg offcanvas-start"
+  <xsl:template name="drawer-sidebar">
+    <dialog
+      class="lg:drawer drawer-start"
       tabindex="-1"
       id="bdSidebar"
       aria-labelledby="bdSidebarOffcanvasLabel"
@@ -250,10 +244,10 @@
         </xsl:otherwise>
       </xsl:choose>
 
-      <div class="offcanvas-body flex-column h-100">
+      <div class="drawer-body flex-column h-100">
         <xsl:call-template name="sidebar-content"/>
       </div>
-    </div>
+    </dialog>
   </xsl:template>
 
   <xsl:template name="sidebar-content">
@@ -361,7 +355,7 @@
               <xsl:value-of select="concat(' py-', $TOC_SPACER_PADDING)"/>
             </xsl:if>
           </xsl:attribute>
-          <xsl:call-template name="offcanvas-sidebar"/>
+          <xsl:call-template name="drawer-sidebar"/>
         </div>
       </xsl:otherwise>
     </xsl:choose>
diff --git a/Customization/xsl/scrollspy.xsl b/Customization/xsl/scrollspy.xsl
index cf3793d1..307be786 100644
--- a/Customization/xsl/scrollspy.xsl
+++ b/Customization/xsl/scrollspy.xsl
@@ -128,7 +128,7 @@
   </xsl:template>
 
   <xsl:template
-    match="*[contains(@class, ' bootstrap-d/offcanvas ')] | *[contains(@class,' topic/section ') and contains(@outputclass, 'offcanvas-')]"
+    match="*[contains(@class, ' bootstrap-d/drawer ')] | *[contains(@class,' topic/section ') and contains(@outputclass, 'drawer-')]"
     mode="scrollspy"
     priority="5"
   />
diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl
index 72410d42..86c9bfec 100644
--- a/Customization/xsl/topic.xsl
+++ b/Customization/xsl/topic.xsl
@@ -96,7 +96,7 @@
 
     <!-- ↓ Add collapsible top header ↓ -->
     <xsl:if test="string-length($TOPHDFFILE) > 0">
-      <div class="d-none d-lg-block">
+      <div class="d-none lg:d-block">
         <xsl:copy-of select="document($TOPHDFFILE, /)"/>
       </div>
     </xsl:if>
diff --git a/includes/hdr.navbar.default.xml b/includes/hdr.navbar.default.xml
index 91b6a512..858f8798 100644
--- a/includes/hdr.navbar.default.xml
+++ b/includes/hdr.navbar.default.xml
@@ -4,9 +4,9 @@
     <!-- This shows the menu on mobile -->
     <div class="bd-navbar-toggle">
       <button
-        class="navbar-toggler p-2"
+        class="lg:d-none p-2"
         type="button"
-        data-bs-toggle="offcanvas"
+        data-bs-toggle="drawer"
         data-bs-target="#bdSidebar"
         aria-controls="bdSidebar"
         aria-label="Toggle docs navigation"
diff --git a/includes/hdr.navbar.example.xml b/includes/hdr.navbar.example.xml
index fbeba92a..7b53d11b 100644
--- a/includes/hdr.navbar.example.xml
+++ b/includes/hdr.navbar.example.xml
@@ -4,9 +4,9 @@
     <!-- This shows the menu on mobile -->
     <div class="bd-navbar-toggle">
       <button
-        class="navbar-toggler p-2"
+        class="lg:d-none p-2"
         type="button"
-        data-bs-toggle="offcanvas"
+        data-bs-toggle="drawer"
         data-bs-target="#bdSidebar"
         aria-controls="bdSidebar"
         aria-label="Toggle docs navigation"
diff --git a/includes/hdr.sidebar.example.xml b/includes/hdr.sidebar.example.xml
index 0f9acd1f..37682832 100644
--- a/includes/hdr.sidebar.example.xml
+++ b/includes/hdr.sidebar.example.xml
@@ -22,7 +22,7 @@
   <button
     type="button"
     class="btn-close btn-close-white"
-    data-bs-dismiss="offcanvas"
+    data-bs-dismiss="drawer"
     aria-label="Close"
     data-bs-target="#bdSidebar"
   />
diff --git a/sample/document.ditamap b/sample/document.ditamap
index e648033f..d39936f0 100644
--- a/sample/document.ditamap
+++ b/sample/document.ditamap
@@ -52,8 +52,8 @@
     <topicref href="card.dita"/>
     <topicref href="carousel.dita"/>
     <topicref href="collapse.dita"/>
+    <topicref href="drawer.dita"/>
     <topicref href="list-group.dita"/>
-    <topicref href="offcanvas.dita"/>
     <topicref href="pagination.dita"/>
     <topicref href="popovers.dita"/>
     <topicref href="scrollspy.dita"/>
diff --git a/sample/drawer.dita b/sample/drawer.dita
new file mode 100644
index 00000000..6544dfda
--- /dev/null
+++ b/sample/drawer.dita
@@ -0,0 +1,204 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  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. and the Bootstrap Authors,
+  and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
+-->
+<!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
+<topic id="drawer">
+  <title>Drawer</title>
+  <shortdesc>Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and
+    Bootstrap’s JavaScript plugin.</shortdesc>
+  <prolog>
+    <metadata>
+      <keywords>
+        <indexterm>Drawer</indexterm>
+        <indexterm>CSS
+          <indexterm><xmlatt>outputclass</xmlatt></indexterm>
+        </indexterm>
+        <indexterm><xmlelement>section</xmlelement></indexterm>
+        <indexterm><xmlelement>xref</xmlelement></indexterm>
+        <indexterm><xmlatt>props</xmlatt></indexterm>
+      </keywords>
+    </metadata>
+  </prolog>
+  <body outputclass="language-markup">
+    <section>
+      <title>How it works</title>
+      <p>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.</p>
+      <ul>
+        <li>Drawer shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they
+          are separate plugins.</li>
+        <li>Similarly, some source Sass variables for drawer’s styles and dimensions are inherited from the modal’s
+          variables.</li>
+        <li>When shown, drawer includes a default backdrop that can be clicked to hide the drawer.</li>
+        <li>Similar to modals, only one drawer can be shown at a time.</li>
+      </ul>
+      <p>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.</p>
+    </section>
+    <section>
+      <title>Drawer components</title>
+      <p>Below is an drawer example that is displayed when the button is clicked. Add
+          <xmlatt>props="drawer-toggle"</xmlatt> to an <xmlelement>xref</xmlelement> element to associate a button to
+        an drawer</p>
+    </section>
+    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+            <xref props="drawer-toggle" href="#drawer1" outputclass="btn-primary">Click here to display drawer</xref>
+      <section id="drawer1" outputclass="drawer drawer-start">
+        <title>Drawer</title>
+        <p>Content for the drawer goes here. You can place just about any section elements here.</p>
+      </section>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+          <title><xmlatt>outputclass</xmlatt></title>
+          <codeblock>&lt;xref outputclass="btn-primary" props="drawer-toggle" href="#drawer1"&gt;
+  Click here
+&lt;/xref&gt;
+&lt;section outputclass="drawer-start" id="drawer1"&gt;
+  &lt;title&gt;Drawer&lt;/title&gt;
+  &lt;p&gt;
+    Content for the drawer goes here. You can place just about any section elements here.
+  &lt;/p&gt;
+&lt;/section&gt;</codeblock>
+        </section>
+         <section>
+        <title>Specialization</title>
+          <codeblock>&lt;button props="drawer-toggle" href="#drawer1"&gt;
+  Click here
+&lt;/button&gt;
+&lt;drawer id="drawer1" position="start"&gt;
+  &lt;title&gt;Drawer&lt;/title&gt;
+  &lt;p&gt;
+    Content for the drawer goes here. You can place just about any section elements here.
+  &lt;/p&gt;
+&lt;/drawer&gt;</codeblock>
+        </section>
+      </bodydiv>
+    <section>
+      <title>Placement</title>
+      <p>There’s no default placement for drawer components, so you must add one of the modifier outputclasses
+        below</p>
+      <ul>
+        <li>Setting <xmlatt>position="start"</xmlatt> or <xmlatt
+          >outputclass="drawer-start"</xmlatt> places drawer on the left of the
+          viewport (shown above)</li>
+        <li>Setting <xmlatt>position="end"</xmlatt> or <xmlatt
+          >outputclass="drawer-end"</xmlatt> places drawer on the right of the
+          viewport</li>
+        <li>Setting <xmlatt>position="bottom"</xmlatt> or <xmlatt
+          >outputclass="drawer-bottom"</xmlatt> places drawer on the bottom of
+          the viewport</li>
+        <li>Setting <xmlatt>position="top"</xmlatt> or <xmlatt
+          >outputclass="drawer-top"</xmlatt> places drawer on the top of
+          the viewport</li>
+      </ul>
+    </section>
+    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+            <xref props="drawer-toggle" href="#drawer2" outputclass="btn-primary">Toggle right drawer</xref>
+      <section id="drawer2" outputclass="drawer drawer-end">
+        <title>Drawer</title>
+        <p>Content for the drawer goes here. You can place just about any section elements here.</p>
+      </section>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+          <title><xmlatt>outputclass</xmlatt></title>
+          <codeblock>&lt;section outputclass="drawer-end" id="drawer2"&gt;
+  ...etc
+&lt;/section&gt;</codeblock>
+        </section>
+         <section>
+        <title>Specialization</title>
+          <codeblock>&lt;drawer position="end"&gt;
+  ...etc
+&lt;/drawer&gt;</codeblock>
+        </section>
+      </bodydiv>
+    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+            <xref props="drawer-toggle" href="#drawer3" outputclass="btn-primary">Toggle bottom drawer</xref>
+      <section id="drawer3" outputclass="drawer drawer-bottom">
+        <title>Drawer</title>
+        <p>Content for the drawer goes here. You can place just about any section elements here.</p>
+      </section>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+          <title><xmlatt>outputclass</xmlatt></title>
+          <codeblock>&lt;section outputclass="drawer-bottom" id="drawer3"&gt;
+  ...etc
+&lt;/section&gt;</codeblock>
+        </section>
+         <section>
+        <title>Specialization</title>
+          <codeblock>&lt;drawer position="bottom"&gt;
+  ...etc
+&lt;/drawer&gt;</codeblock>
+        </section>
+      </bodydiv>
+    <section>
+      <title>Responsive</title>
+      <p
+      >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, <xmlatt
+        >outputclass="drawer-lg"</xmlatt> hides content in an drawer below the <codeph
+        >lg</codeph> breakpoint, but shows the content above the <codeph>lg</codeph> breakpoint.</p>
+    </section>
+    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+      <note
+        outputclass="d-none lg:d-block text-bg-info"
+      >Resize your browser to show the responsive drawer toggle.</note>
+            <xref outputclass="lg:d-none btn-primary" props="drawer-toggle" href="#drawer4">Toggle drawer</xref>
+      <section outputclass="drawer-lg drawer drawer-start" id="drawer4">
+        <title>Drawer</title>
+        <p>This is content within an <xmlatt>outputclass="drawer-lg"</xmlatt>.</p>
+      </section>
+    </bodydiv>
+    <p>Responsive drawer classes are available across for each breakpoint.</p>
+    <ul>
+      <li><xmlatt>outputclass="drawer"</xmlatt></li>
+      <li><xmlatt>outputclass="drawer-sm"</xmlatt></li>
+      <li><xmlatt>outputclass="drawer-md"</xmlatt></li>
+      <li><xmlatt>outputclass="drawer-lg"</xmlatt></li>
+      <li><xmlatt>outputclass="drawer-xl"</xmlatt></li>
+      <li><xmlatt>outputclass="drawer-xxl"</xmlatt></li>
+    </ul>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+          <title><xmlatt>outputclass</xmlatt></title>
+          <codeblock>&lt;note outputclass="alert-info d-none lg:d-block"&gt;
+  Resize your browser to show the responsive drawer toggle.
+&lt;/note&gt;
+&lt;xref outputclass="btn-primary lg:d-none" props="drawer-toggle" href="#drawer4"&gt;
+  Toggle drawer
+&lt;/xref&gt;
+&lt;section outputclass="drawer-lg" id="drawer4"&gt;
+  &lt;title&gt;Drawer&lt;/title&gt;
+  &lt;p&gt;
+    This is content within an &lt;xmlatt&gt;outputclass="drawer-lg"&lt;/xmlatt&gt;.
+  &lt;/p&gt;
+&lt;/section&gt;</codeblock>
+        </section>
+         <section>
+        <title>Specialization</title>
+          <codeblock>&lt;note color="info" outputclass="d-none d-lg-block"&gt;
+  Resize your browser to show the responsive drawer toggle.
+&lt;/note&gt;
+&lt;button outputclass="d-lg-none" props="drawer-toggle" href="#drawer4"&gt;
+  Toggle drawer
+&lt;/button&gt;
+&lt;drawer outputclass="drawer-lg" id="drawer4"&gt;
+  &lt;title&gt;Drawer&lt;/title&gt;
+  &lt;p&gt;
+    This is content within an &lt;xmlatt&gt;outputclass="drawer-lg"&lt;/xmlatt&gt;.
+  &lt;/p&gt;
+&lt;/drawer&gt;</codeblock>
+        </section>
+      </bodydiv>
+  </body>
+</topic>
diff --git a/sample/nav.dita b/sample/nav.dita
index 390748e9..857beaaa 100644
--- a/sample/nav.dita
+++ b/sample/nav.dita
@@ -127,11 +127,11 @@
       <p>
         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 <xmlatt
         >data-bs-target="#bdSidebar"</xmlatt>
-        and <xmlatt>data-bs-toggle="offcanvas"</xmlatt>:
+        and <xmlatt>data-bs-toggle="drawer"</xmlatt>:
       </p>
       <codeblock outputclass="language-xml" deliveryTarget="html">&lt;div class="bd-navbar-toggle"&gt;
-  &lt;button class="navbar-toggler p-2" type="button"
-    data-bs-toggle="offcanvas" data-bs-target="#bdSidebar"
+  &lt;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"&gt;
     &lt;i class="bi bi-list"/&gt;
   &lt;/button&gt;
diff --git a/sample/offcanvas.dita b/sample/offcanvas.dita
deleted file mode 100644
index 56dea5ee..00000000
--- a/sample/offcanvas.dita
+++ /dev/null
@@ -1,212 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-  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 (found at https://getbootstrap.com/docs/5.3), however DITA
-  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. and the Bootstrap Authors,
-  and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
--->
-<!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
-<topic id="offcanvas">
-  <title>Offcanvas</title>
-  <shortdesc>Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and
-    Bootstrap’s JavaScript plugin.</shortdesc>
-  <prolog>
-    <metadata>
-      <keywords>
-        <indexterm>Offcanvas</indexterm>
-        <indexterm>CSS
-          <indexterm><xmlatt>outputclass</xmlatt></indexterm>
-        </indexterm>
-        <indexterm><xmlelement>section</xmlelement></indexterm>
-        <indexterm><xmlelement>xref</xmlelement></indexterm>
-        <indexterm><xmlatt>props</xmlatt></indexterm>
-      </keywords>
-    </metadata>
-  </prolog>
-  <body outputclass="language-markup">
-    <section>
-      <title>How it works</title>
-      <p>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.</p>
-      <ul>
-        <li>Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they
-          are separate plugins.</li>
-        <li>Similarly, some source Sass variables for offcanvas’s styles and dimensions are inherited from the modal’s
-          variables.</li>
-        <li>When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.</li>
-        <li>Similar to modals, only one offcanvas can be shown at a time.</li>
-      </ul>
-      <p>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.</p>
-    </section>
-    <section>
-      <title>Offcanvas components</title>
-      <p>Below is an offcanvas example that is displayed when the button is clicked. Add
-          <xmlatt>props="offcanvas-toggle"</xmlatt> to an <xmlelement>xref</xmlelement> element to associate a button to
-        an offcanvas</p>
-    </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
-            <xref
-        props="offcanvas-toggle"
-        href="#offcanvas1"
-        outputclass="btn-primary"
-      >Click here to display offcanvas</xref>
-      <section id="offcanvas1" outputclass="offcanvas offcanvas-start">
-        <title>Offcanvas</title>
-        <p>Content for the offcanvas goes here. You can place just about any section elements here.</p>
-      </section>
-    </bodydiv>
-    <bodydiv outputclass="nav-pills mt-3">
-      <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref outputclass="btn-primary" props="offcanvas-toggle" href="#offcanvas1"&gt;
-  Click here
-&lt;/xref&gt;
-&lt;section outputclass="offcanvas-start" id="offcanvas1"&gt;
-  &lt;title&gt;Offcanvas&lt;/title&gt;
-  &lt;p&gt;
-    Content for the offcanvas goes here. You can place just about any section elements here.
-  &lt;/p&gt;
-&lt;/section&gt;</codeblock>
-        </section>
-         <section>
-        <title>Specialization</title>
-          <codeblock>&lt;button props="offcanvas-toggle" href="#offcanvas1"&gt;
-  Click here
-&lt;/button&gt;
-&lt;offcanvas id="offcanvas1" position="start"&gt;
-  &lt;title&gt;Offcanvas&lt;/title&gt;
-  &lt;p&gt;
-    Content for the offcanvas goes here. You can place just about any section elements here.
-  &lt;/p&gt;
-&lt;/offcanvas&gt;</codeblock>
-        </section>
-      </bodydiv>
-    <section>
-      <title>Placement</title>
-      <p>There’s no default placement for offcanvas components, so you must add one of the modifier outputclasses
-        below</p>
-      <ul>
-        <li>Setting <xmlatt>position="start"</xmlatt> or <xmlatt
-          >outputclass="offcanvas-start"</xmlatt> places offcanvas on the left of the
-          viewport (shown above)</li>
-        <li>Setting <xmlatt>position="end"</xmlatt> or <xmlatt
-          >outputclass="offcanvas-end"</xmlatt> places offcanvas on the right of the
-          viewport</li>
-        <li>Setting <xmlatt>position="bottom"</xmlatt> or <xmlatt
-          >outputclass="offcanvas-bottom"</xmlatt> places offcanvas on the bottom of
-          the viewport</li>
-        <li>Setting <xmlatt>position="top"</xmlatt> or <xmlatt
-          >outputclass="offcanvas-top"</xmlatt> places offcanvas on the top of
-          the viewport</li>
-      </ul>
-    </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
-            <xref props="offcanvas-toggle" href="#offcanvas2" outputclass="btn-primary">Toggle right offcanvas</xref>
-      <section id="offcanvas2" outputclass="offcanvas offcanvas-end">
-        <title>Offcanvas</title>
-        <p>Content for the offcanvas goes here. You can place just about any section elements here.</p>
-      </section>
-    </bodydiv>
-    <bodydiv outputclass="nav-pills mt-3">
-      <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;section outputclass="offcanvas-end" id="offcanvas2"&gt;
-  ...etc
-&lt;/section&gt;</codeblock>
-        </section>
-         <section>
-        <title>Specialization</title>
-          <codeblock>&lt;offcanvas position="end"&gt;
-  ...etc
-&lt;/offcanvas&gt;</codeblock>
-        </section>
-      </bodydiv>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
-            <xref props="offcanvas-toggle" href="#offcanvas3" outputclass="btn-primary">Toggle bottom offcanvas</xref>
-      <section id="offcanvas3" outputclass="offcanvas offcanvas-bottom">
-        <title>Offcanvas</title>
-        <p>Content for the offcanvas goes here. You can place just about any section elements here.</p>
-      </section>
-    </bodydiv>
-    <bodydiv outputclass="nav-pills mt-3">
-      <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;section outputclass="offcanvas-bottom" id="offcanvas3"&gt;
-  ...etc
-&lt;/section&gt;</codeblock>
-        </section>
-         <section>
-        <title>Specialization</title>
-          <codeblock>&lt;offcanvas position="bottom"&gt;
-  ...etc
-&lt;/offcanvas&gt;</codeblock>
-        </section>
-      </bodydiv>
-    <section>
-      <title>Responsive</title>
-      <p
-      >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, <xmlatt
-        >outputclass="offcanvas-lg"</xmlatt> hides content in an offcanvas below the <codeph
-        >lg</codeph> breakpoint, but shows the content above the <codeph>lg</codeph> breakpoint.</p>
-    </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <note
-        outputclass="d-none d-lg-block text-bg-info"
-      >Resize your browser to show the responsive offcanvas toggle.</note>
-            <xref
-        outputclass="d-lg-none btn-primary"
-        props="offcanvas-toggle"
-        href="#offcanvas4"
-      >Toggle offcanvas</xref>
-      <section outputclass="offcanvas-lg offcanvas offcanvas-start" id="offcanvas4">
-        <title>Offcanvas</title>
-        <p>This is content within an <xmlatt>outputclass="offcanvas-lg"</xmlatt>.</p>
-      </section>
-    </bodydiv>
-    <p>Responsive offcanvas classes are available across for each breakpoint.</p>
-    <ul>
-      <li><xmlatt>outputclass="offcanvas"</xmlatt></li>
-      <li><xmlatt>outputclass="offcanvas-sm"</xmlatt></li>
-      <li><xmlatt>outputclass="offcanvas-md"</xmlatt></li>
-      <li><xmlatt>outputclass="offcanvas-lg"</xmlatt></li>
-      <li><xmlatt>outputclass="offcanvas-xl"</xmlatt></li>
-      <li><xmlatt>outputclass="offcanvas-xxl"</xmlatt></li>
-    </ul>
-    <bodydiv outputclass="nav-pills mt-3">
-      <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;note outputclass="alert-info d-none d-lg-block"&gt;
-  Resize your browser to show the responsive offcanvas toggle.
-&lt;/note&gt;
-&lt;xref outputclass="btn-primary d-lg-none" props="offcanvas-toggle" href="#offcanvas4"&gt;
-  Toggle offcanvas
-&lt;/xref&gt;
-&lt;section outputclass="offcanvas-lg" id="offcanvas4"&gt;
-  &lt;title&gt;Offcanvas&lt;/title&gt;
-  &lt;p&gt;
-    This is content within an &lt;xmlatt&gt;outputclass="offcanvas-lg"&lt;/xmlatt&gt;.
-  &lt;/p&gt;
-&lt;/section&gt;</codeblock>
-        </section>
-         <section>
-        <title>Specialization</title>
-          <codeblock>&lt;note color="info" outputclass="d-none d-lg-block"&gt;
-  Resize your browser to show the responsive offcanvas toggle.
-&lt;/note&gt;
-&lt;button outputclass="d-lg-none" props="offcanvas-toggle" href="#offcanvas4"&gt;
-  Toggle offcanvas
-&lt;/button&gt;
-&lt;offcanvas outputclass="offcanvas-lg" id="offcanvas4"&gt;
-  &lt;title&gt;Offcanvas&lt;/title&gt;
-  &lt;p&gt;
-    This is content within an &lt;xmlatt&gt;outputclass="offcanvas-lg"&lt;/xmlatt&gt;.
-  &lt;/p&gt;
-&lt;/offcanvas&gt;</codeblock>
-        </section>
-      </bodydiv>
-  </body>
-</topic>
diff --git a/sample/scrollspy.dita b/sample/scrollspy.dita
index 3469001e..bd95a1ee 100644
--- a/sample/scrollspy.dita
+++ b/sample/scrollspy.dita
@@ -109,9 +109,9 @@
       <p>
         Omit the <xmlatt>id</xmlatt> to ignore a <xmlelement>section</xmlelement>, or wrap the <xmlelement
         >section</xmlelement> in a <xmlelement>bodydiv</xmlelement> element. Any <xref
-          href="./offcanvas.dita"
+          href="./drawer.dita"
           format="dita"
-        >offcanvas components</xref> are ignored automatically.
+        >drawer components</xref> are ignored automatically.
       </p>
       <codeblock>&lt;bodydiv&gt;
   &lt;section id="section-1"&gt;
diff --git a/xsl/dita2html5-bootstrapImpl_template.xsl b/xsl/dita2html5-bootstrapImpl_template.xsl
index 383ec296..978a6941 100644
--- a/xsl/dita2html5-bootstrapImpl_template.xsl
+++ b/xsl/dita2html5-bootstrapImpl_template.xsl
@@ -52,9 +52,9 @@
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/card.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/carousel.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/collapse.xsl"/>
+  <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/drawer.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/hi-d.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/nav.xsl"/>
-  <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/offcanvas.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/pagination.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/popovers.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/scrollspy.xsl"/>
diff --git a/xsl/dita2html5-legacy-3.0_template.xsl b/xsl/dita2html5-legacy-3.0_template.xsl
index 925143b9..7fcec70e 100644
--- a/xsl/dita2html5-legacy-3.0_template.xsl
+++ b/xsl/dita2html5-legacy-3.0_template.xsl
@@ -53,9 +53,9 @@
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/card.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/carousel.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/collapse.xsl"/>
+  <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/drawer.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/hi-d.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/nav.xsl"/>
-  <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/offcanvas.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/pagination.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/popovers.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/scrollspy.xsl"/>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 90702e4b..991ba6fe 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -377,17 +377,17 @@
     <xsl:next-match/>
   </xsl:template>
 
-  <!-- Change the default Bootstrap CSS classes of offcanvas -->
-  <xsl:template match="*[contains(@class, ' bootstrap-d/offcanvas ')]" mode="bootstrap-class" priority="10">
-    <xsl:text>offcanvas </xsl:text>
+  <!-- Change the default Bootstrap CSS classes of drawer -->
+  <xsl:template match="*[contains(@class, ' bootstrap-d/drawer ')]" mode="bootstrap-class" priority="10">
+    <xsl:text>drawer </xsl:text>
     <xsl:choose>
       <xsl:when test="@position">
-        <xsl:text>offcanvas-</xsl:text>
+        <xsl:text>drawer-</xsl:text>
         <xsl:value-of select="@position"/>
         <xsl:text> </xsl:text>
       </xsl:when>
       <xsl:otherwise>
-        <xsl:text>offcanvas-start </xsl:text>
+        <xsl:text>drawer-start </xsl:text>
       </xsl:otherwise>
     </xsl:choose>
     <xsl:next-match/>

From 0351246cf9fd69fd4d572cd4a7f8901ca816ba5d Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Wed, 29 Jul 2026 00:01:12 +0200
Subject: [PATCH 09/87] Fixing stripes

---
 sample/tables.dita | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/sample/tables.dita b/sample/tables.dita
index 869ab725..65c508d7 100644
--- a/sample/tables.dita
+++ b/sample/tables.dita
@@ -211,7 +211,7 @@
         within the <xmlelement>tbody</xmlelement>.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <table outputclass="theme-striped">
+      <table outputclass="table-striped">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
           <colspec colname="COLSPEC1"/>
@@ -245,7 +245,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;table outputclass="theme-striped"&gt;
+        <codeblock>&lt;table outputclass="table-striped"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
@@ -262,7 +262,7 @@
         within the <xmlelement>tbody</xmlelement>.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <table outputclass="theme-striped-columns">
+      <table outputclass="table-striped-columns">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
           <colspec colname="COLSPEC1"/>
@@ -296,7 +296,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;table outputclass="theme-striped-columns"&gt;
+        <codeblock>&lt;table outputclass="table-striped-columns"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
@@ -414,7 +414,7 @@
         >padding</codeph> in half.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <table outputclass="theme-sm">
+      <table outputclass="table-sm">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
           <colspec colname="COLSPEC1"/>
@@ -448,7 +448,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;table outputclass="theme-sm"&gt;
+        <codeblock>&lt;table outputclass="table-sm"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
@@ -475,7 +475,7 @@
               <entry colname="COLSPEC1" valign="top">Gestation</entry>
             </row>
           </thead>
-          <tbody outputclass="theme-group-divider">
+          <tbody outputclass="table-group-divider">
             <row>
               <entry>Elephant (African and Asian)</entry>
               <entry>19-22 months</entry>
@@ -499,7 +499,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;tbody outputclass="theme-group-divider"&gt;
+        <codeblock>&lt;tbody outputclass="table-group-divider"&gt;
   ...etc
 &lt;/tbody&gt;</codeblock>
       </section>

From 8ad6a94d14fa745ed6386d18b091a95c3d7f7e53 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Thu, 30 Jul 2026 18:11:55 +0200
Subject: [PATCH 10/87] Fix typography.

---
 Customization/xsl/carousel.xsl            |  2 +-
 Customization/xsl/nav.xsl                 |  2 +-
 Customization/xsl/topic.xsl               | 10 +--
 sample/buttons.dita                       | 10 +--
 sample/containers.dita                    | 58 ++++++++--------
 sample/drawer.dita                        |  4 +-
 sample/grid.dita                          | 12 ++--
 sample/icons.dita                         | 80 +++++++++++-----------
 sample/spacing.dita                       | 82 ++++++++++++-----------
 sample/typography.dita                    | 31 ++++-----
 xsl/dita2html5-bootstrapImpl_template.xsl |  2 +-
 xsl/dita2html5-legacy-3.0_template.xsl    |  2 +-
 xsl/utility-classes.xsl                   | 22 +++---
 13 files changed, 162 insertions(+), 155 deletions(-)

diff --git a/Customization/xsl/carousel.xsl b/Customization/xsl/carousel.xsl
index 7cdab610..b3247b71 100644
--- a/Customization/xsl/carousel.xsl
+++ b/Customization/xsl/carousel.xsl
@@ -215,7 +215,7 @@
 
   <!-- Slide Caption -->
   <xsl:template match="*[contains(@class,' topic/title ')]" mode="carousel">
-    <div class="carousel-caption d-none d-md-block">
+    <div class="carousel-caption d-none md:d-block">
       <p>
         <xsl:call-template name="commonattributes"/>
         <xsl:apply-templates/>
diff --git a/Customization/xsl/nav.xsl b/Customization/xsl/nav.xsl
index e60e0753..cedc97a6 100644
--- a/Customization/xsl/nav.xsl
+++ b/Customization/xsl/nav.xsl
@@ -323,7 +323,7 @@
               <xsl:if test="$BIDIRECTIONAL_DOCUMENT = 'yes'">
                 <xsl:attribute name="direction" select="$defaultDirection"/>
               </xsl:if>
-              <ul class="list-unstyled mb-0 py-3 pt-md-1">
+              <ul class="list-unstyled mb-0 py-3 md:pt-1">
                 <xsl:apply-templates select="$input.map" mode="collapsible-toc">
                   <xsl:with-param name="pathFromMaplist" select="$PATH2PROJ" as="xs:string"/>
                 </xsl:apply-templates>
diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl
index 86c9bfec..3e06fb3d 100644
--- a/Customization/xsl/topic.xsl
+++ b/Customization/xsl/topic.xsl
@@ -175,14 +175,14 @@
       <xsl:if test="$BOOTSTRAP_SCROLLSPY_TOC != 'none'">
         <xsl:choose>
           <xsl:when test="count(*[contains(@class, ' topic/topic ')])&gt;0">
-            <div class="bs-scrollspy mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
+            <div class="bs-scrollspy mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1 text-body-secondary">
               <xsl:call-template name="scrollspy-content"/>
             </div>
           </xsl:when>
           <xsl:when
             test="count(*/*[@id and (contains(@class, ' topic/section ') or contains(@class, ' topic/example '))])&gt;0"
           >
-            <div class="bs-scrollspy mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
+            <div class="bs-scrollspy mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1 text-body-secondary">
               <xsl:call-template name="scrollspy-content"/>
             </div>
           </xsl:when>
@@ -781,7 +781,7 @@
         select="concat('visually-hidden-focusable overflow-hidden p-2 ', $BOOTSTRAP_CSS_ACCESSIBILITY_NAV)"
       />
 
-      <div class="container-xl">
+      <div class="xl:container">
         <a>
           <xsl:attribute name="class" select="concat('d-inline-flex m-1 ', $BOOTSTRAP_CSS_ACCESSIBILITY_LINK)"/>
           <xsl:apply-templates mode="scrollspy-href" select="*[contains(@class, ' topic/title ')][1]"/>
@@ -795,7 +795,7 @@
             <a href="#bs-menubar-nav">
               <xsl:attribute
                 name="class"
-                select="concat('d-none d-md-inline-flex m-1 ', $BOOTSTRAP_CSS_ACCESSIBILITY_LINK)"
+                select="concat('d-none md:d-inline-flex m-1 ', $BOOTSTRAP_CSS_ACCESSIBILITY_LINK)"
               />
               <xsl:call-template name="getVariable">
                 <xsl:with-param name="id" select="'Skip to docs navigation'"/>
@@ -810,7 +810,7 @@
             <a href="#bs-sidebar-nav">
               <xsl:attribute
                 name="class"
-                select="concat('d-none d-md-inline-flex m-1 ', $BOOTSTRAP_CSS_ACCESSIBILITY_LINK)"
+                select="concat('d-none md:d-inline-flex m-1 ', $BOOTSTRAP_CSS_ACCESSIBILITY_LINK)"
               />
               <xsl:call-template name="getVariable">
                 <xsl:with-param name="id" select="'Skip to docs navigation'"/>
diff --git a/sample/buttons.dita b/sample/buttons.dita
index 443844ce..44f22e03 100644
--- a/sample/buttons.dita
+++ b/sample/buttons.dita
@@ -112,15 +112,15 @@
           <xmlatt>size="small"</xmlatt> for additional sizes.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <xref href="#" outputclass="btn theme-primary btn btn-lg">Large button</xref>
-      <xref href="#" outputclass="btn theme-secondary btn 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>
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn theme-primary btn btn-lg"&gt;Large button&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn theme-secondary btn btn-lg"&gt;Large button&lt;/xref&gt;</codeblock>
+          <codeblock>&lt;xref href="#" outputclass="btn theme-primary btn-lg"&gt;Large button&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-secondary btn-lg"&gt;Large button&lt;/xref&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
@@ -137,7 +137,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn theme-primary btn btn-sm"&gt;Small button&lt;/xref&gt;
+          <codeblock>&lt;xref href="#" outputclass="btn theme-primary btn-sm"&gt;Small button&lt;/xref&gt;
 &lt;xref href="#" outputclass="btn theme-secondary btn-sm"&gt;Small button&lt;/xref&gt;</codeblock>
         </section>
          <section>
diff --git a/sample/containers.dita b/sample/containers.dita
index dd1278ab..d5346496 100644
--- a/sample/containers.dita
+++ b/sample/containers.dita
@@ -33,7 +33,7 @@
           <option>container</option>, which sets a <codeph>max-width</codeph> at each responsive breakpoint
         </li>
         <li>
-          <option>container-{breakpoint}</option>, which is <codeph>width: 100%</codeph> until the specified breakpoint
+          <option>{breakpoint}:container</option>, which is <codeph>width: 100%</codeph> until the specified breakpoint
         </li>
         <li>
           <option>container-fluid</option>, which is <codeph>width: 100%</codeph> at all breakpoints
@@ -83,7 +83,7 @@
               <option>container</option>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>540px</entry>
             <entry>720px</entry>
@@ -93,10 +93,10 @@
           </row>
           <row>
             <entry>
-              <option>container-sm</option>
+              <option>sm:container</option>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>540px</entry>
             <entry>720px</entry>
@@ -106,13 +106,13 @@
           </row>
           <row>
             <entry>
-              <option>container-md</option>
+              <option>md:container</option>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>720px</entry>
             <entry>960px</entry>
@@ -121,16 +121,16 @@
           </row>
           <row>
             <entry>
-              <option>container-lg</option>
+              <option>lg:container</option>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>960px</entry>
             <entry>1140px</entry>
@@ -138,41 +138,41 @@
           </row>
           <row>
             <entry>
-              <option>container-xl</option>
+              <option>xl:container</option>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>1140px</entry>
             <entry>1320px</entry>
           </row>
           <row>
             <entry>
-              <option>container-xxl</option>
+              <option>xxl:container</option>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>1320px</entry>
           </row>
@@ -181,28 +181,28 @@
               <option>container-fluid</option>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
           </row>
         </tbody>
       </tgroup>
     </table>
-    <note type="note">The DITA Bootstrap plug-in uses the responsive <option>container-xxl</option> by default to fill
+    <note type="note">The DITA Bootstrap plug-in uses the responsive <option>xxl:container</option> 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.</note>
     <p>To use different size, pass the desired value to the <cmdname>dita</cmdname> command via the
diff --git a/sample/drawer.dita b/sample/drawer.dita
index 6544dfda..4342df18 100644
--- a/sample/drawer.dita
+++ b/sample/drawer.dita
@@ -186,10 +186,10 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;note color="info" outputclass="d-none d-lg-block"&gt;
+          <codeblock>&lt;note color="info" outputclass="d-none lg:d-block"&gt;
   Resize your browser to show the responsive drawer toggle.
 &lt;/note&gt;
-&lt;button outputclass="d-lg-none" props="drawer-toggle" href="#drawer4"&gt;
+&lt;button outputclass="lg:d-none" props="drawer-toggle" href="#drawer4"&gt;
   Toggle drawer
 &lt;/button&gt;
 &lt;drawer outputclass="drawer-lg" id="drawer4"&gt;
diff --git a/sample/grid.dita b/sample/grid.dita
index 9ec9e204..e6b290fa 100644
--- a/sample/grid.dita
+++ b/sample/grid.dita
@@ -34,13 +34,13 @@
     </section>
     <bodydiv outputclass="p-3 border">
       <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>
@@ -49,13 +49,13 @@
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;bodydiv outputclass="row"&gt;
-  &lt;bodydiv outputclass="col-sm-3"&gt;
+  &lt;bodydiv outputclass="sm:col-3"&gt;
     &lt;p&gt;One of three columns&lt;/p&gt;
   &lt;/bodydiv&gt;
-  &lt;bodydiv outputclass="col-sm-3"&gt;
+  &lt;bodydiv outputclass="sm:col-3"&gt;
     &lt;p&gt;One of three columns&lt;/p&gt;
   &lt;/bodydiv&gt;
-  &lt;bodydiv outputclass="col-sm-3"&gt;
+  &lt;bodydiv outputclass="sm:col-3"&gt;
     &lt;p&gt;One of three columns&lt;/p&gt;
   &lt;/bodydiv&gt;
 &lt;/bodydiv&gt;</codeblock>
diff --git a/sample/icons.dita b/sample/icons.dita
index 8f19ee55..0a0d15b5 100644
--- a/sample/icons.dita
+++ b/sample/icons.dita
@@ -57,76 +57,74 @@
   <p>Icons placed within an <xmlelement>xref</xmlelement> element are colorized appropriately:</p>
   <bodydiv outputclass="p-3 border">
     <p>
-      <xref href="#" outputclass="link-primary">
+      <xref href="#" outputclass="link theme-primary">
         <ph outputclass="bi bi-link"/> Primary link
       </xref>
     </p>
     <p>
-      <xref href="#" outputclass="link-secondary">
+      <xref href="#" outputclass="link theme-secondary">
         <ph outputclass="bi bi-link"/> Secondary link
       </xref>
     </p>
     <p>
-      <xref href="#" outputclass="link-success">
+      <xref href="#" outputclass="link theme-success">
         <ph outputclass="bi bi-link"/> Success link
       </xref>
     </p>
     <p>
-      <xref href="#" outputclass="link-danger">
+      <xref href="#" outputclass="link theme-danger">
         <ph outputclass="bi bi-link"/> Danger link
       </xref>
     </p>
     <p>
-      <xref href="#" outputclass="link-warning">
+      <xref href="#" outputclass="link theme-warning">
         <ph outputclass="bi bi-link"/> Warning link
       </xref>
     </p>
     <p>
-      <xref href="#" outputclass="link-info">
+      <xref href="#" outputclass="link theme-info">
         <ph outputclass="bi bi-link"/> Info link
       </xref>
     </p>
     <p>
-      <xref href="#" outputclass="link-light">
-        <ph outputclass="bi bi-link"/> Light link
+      <xref href="#" outputclass="link theme-accent">
+        <ph outputclass="bi bi-link"/> Accent link
       </xref>
     </p>
     <p>
-      <xref href="#" outputclass="link-dark">
-        <ph outputclass="bi bi-link"/> Dark link
+      <xref href="#" outputclass="link theme-inverse">
+        <ph outputclass="bi bi-link"/> Inverse link
       </xref>
     </p>
   </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref outputclass="link-primary" href="#"&gt;
+          <codeblock>&lt;xref outputclass="link theme-primary" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt; Primary link
 &lt;/xref&gt;
-&lt;xref outputclass="link-secondary" href="#"&gt;
+&lt;xref outputclass="link theme-secondary" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt; Secondary link
 &lt;/xref&gt;
-&lt;xref outputclass="link-success" href="#"&gt;
+&lt;xref outputclass="link theme-success" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt; Success link
 &lt;/xref&gt;
-&lt;xref outputclass="link-danger" href="#"&gt;
+&lt;xref outputclass="link theme-danger" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt; Danger link
 &lt;/xref&gt;
-&lt;xref outputclass="link-warning" href="#"&gt;
+&lt;xref outputclass="link theme-warning" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt; Warning link
 &lt;/xref&gt;
-&lt;xref outputclass="link-info" href="#"&gt;
+&lt;xref outputclass="link theme-info" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt; Info link
 &lt;/xref&gt;
-&lt;xref outputclass="link-light" href="#"&gt;
-  &lt;i outputclass="bi-link"/&gt; Light link
+&lt;xref outputclass="link theme-accent" href="#"&gt;
+  &lt;i outputclass="bi-link"/&gt; Accent link
 &lt;/xref&gt;
-&lt;xref outputclass="link-dark" href="#"&gt;
-  &lt;i outputclass="bi-link"/&gt; Dark link
+&lt;xref outputclass="link theme-inverse" href="#"&gt;
+  &lt;i outputclass="bi-link"/&gt; Inverse link
 &lt;/xref&gt;
-&lt;xref outputclass="link-body-emphasis" href="#"&gt;
-  &lt;i outputclass="bi-link"/&gt; Emphasis link
-&lt;/xref&gt;</codeblock>
+</codeblock>
         </section>
          <section>
         <title>Specialization</title>
@@ -148,42 +146,46 @@
 &lt;xref color="info" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Info link
 &lt;/xref&gt;
-&lt;xref color="light" href="#"&gt;
-  &lt;icon outputclass="bi-link"/&gt; Light link
+&lt;xref color="accent" href="#"&gt;
+  &lt;icon outputclass="bi-link"/&gt; Accent link
 &lt;/xref&gt;
-&lt;xref color="dark" href="#"&gt;
-  &lt;icon outputclass="bi-link"/&gt; Dark link
+&lt;xref color="inverse" href="#"&gt;
+  &lt;icon outputclass="bi-link"/&gt; Inverse link
 &lt;/xref&gt;</codeblock>
         </section>
       </bodydiv>
     <p>Icons can also be placed within buttons as shown:</p>
     <bodydiv outputclass="p-3 border">
-      <xref outputclass="btn-floating m-1 btn-primary" href="#"><ph outputclass="bi bi-arrow-down-square-fill"/></xref>
-      <xref outputclass="btn-floating m-1 btn-primary" href="#"><ph outputclass="bi bi-chat-left-quote-fill"/></xref>
-      <xref outputclass="btn-floating m-1 btn-primary" href="#"><ph outputclass="bi bi-speedometer"/></xref>
-      <xref outputclass="btn-floating m-1 btn-primary" href="#"><ph outputclass="bi bi-camera-fill"/></xref>
-      <xref outputclass="btn-floating m-1 btn-primary" href="#"><ph outputclass="bi bi-link"/></xref>
-      <xref outputclass="btn-floating m-1 btn-primary" href="#"><ph outputclass="bi bi-share-fill"/></xref>
+      <xref outputclass="btn-floating m-1 btn theme-primary" href="#"><ph
+          outputclass="bi bi-arrow-down-square-fill"
+        /></xref>
+      <xref outputclass="btn-floating m-1 btn theme-primary" href="#"><ph
+          outputclass="bi bi-chat-left-quote-fill"
+        /></xref>
+      <xref outputclass="btn-floating m-1 btn theme-primary" href="#"><ph outputclass="bi bi-speedometer"/></xref>
+      <xref outputclass="btn-floating m-1 btn theme-primary" href="#"><ph outputclass="bi bi-camera-fill"/></xref>
+      <xref outputclass="btn-floating m-1 btn theme-primary" href="#"><ph outputclass="bi bi-link"/></xref>
+      <xref outputclass="btn-floating m-1 btn theme-primary" href="#"><ph outputclass="bi bi-share-fill"/></xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref outputclass="btn-primary btn-floating m-1" href="#"&gt;
+          <codeblock>&lt;xref outputclass="btn theme-primary btn-floating m-1" href="#"&gt;
   &lt;i outputclass="bi-arrow-down-square-fill"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="btn theme-primary btn-floating m-1" href="#"&gt;
   &lt;i outputclass="bi-chat-left-quote-fill"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="btn theme-primary btn-floating m-1" href="#"&gt;
   &lt;i outputclass="bi-speedometer"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="btn theme-primary btn-floating m-1" href="#"&gt;
   &lt;i outputclass="bi-camera-fill"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="btn theme-primary btn-floating m-1" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="btn theme-primary btn-floating m-1" href="#"&gt;
   &lt;i outputclass="bi-share-fill"/&gt;
 &lt;/xref&gt;</codeblock>
         </section>
diff --git a/sample/spacing.dita b/sample/spacing.dita
index d0016de2..ef3f0ebb 100644
--- a/sample/spacing.dita
+++ b/sample/spacing.dita
@@ -28,25 +28,25 @@
     </section>
 
     <bodydiv outputclass="p-3 border">
-      <div outputclass="m-0 p-2 text-bg-primary">Margin 0</div>
-      <div outputclass="m-1 p-2 text-bg-secondary">Margin 1</div>
-      <div outputclass="m-2 p-2 text-bg-success">Margin 2</div>
-      <div outputclass="m-3 p-2 text-bg-danger">Margin 3</div>
-      <div outputclass="m-4 p-2 text-bg-warning">Margin 4</div>
-      <div outputclass="m-5 p-2 text-bg-info">Margin 5</div>
-      <div outputclass="m-auto p-2 w-50 text-bg-light">Margin Auto</div>
+      <div outputclass="m-0 p-2 bg-primary fg-contrast-primary">Margin 0</div>
+      <div outputclass="m-1 p-2 bg-secondary fg-contrast-secondary">Margin 1</div>
+      <div outputclass="m-2 p-2 bg-success fg-contrast-success">Margin 2</div>
+      <div outputclass="m-3 p-2 bg-danger fg-contrast-danger">Margin 3</div>
+      <div outputclass="m-4 p-2 bg-warning fg-contrast-warning">Margin 4</div>
+      <div outputclass="m-5 p-2 bg-info fg-contrast-info">Margin 5</div>
+      <div outputclass="m-auto p-2 w-50 bg-accent fg-contrast-accent">Margin Auto</div>
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="text-bg-primary m-0 p-2"&gt;Margin 0&lt;/div&gt;
-&lt;div outputclass="text-bg-secondary m-1 p-2"&gt;Margin 1&lt;/div&gt;
-&lt;div outputclass="text-bg-success m-2 p-2"&gt;Margin 2&lt;/div&gt;
-&lt;div outputclass="text-bg-danger m-3 p-2"&gt;Margin 3&lt;/div&gt;
-&lt;div outputclass="text-bg-warning m-4 p-2"&gt;Margin 4&lt;/div&gt;
-&lt;div outputclass="text-bg-info m-5 p-2"&gt;Margin 5&lt;/div&gt;
-&lt;div outputclass="text-bg-light m-auto p-2 w-50"&gt;Margin Auto&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="bg-primary fg-contrast-primary m-0 p-2"&gt;Margin 0&lt;/div&gt;
+&lt;div outputclass="bg-secondary fg-contrast-secondary m-1 p-2"&gt;Margin 1&lt;/div&gt;
+&lt;div outputclass="bg-success fg-contrast-success m-2 p-2"&gt;Margin 2&lt;/div&gt;
+&lt;div outputclass="bg-danger fg-contrast-danger m-3 p-2"&gt;Margin 3&lt;/div&gt;
+&lt;div outputclass="bg-warning fg-contrast-warning m-4 p-2"&gt;Margin 4&lt;/div&gt;
+&lt;div outputclass="bg-info fg-contrast-info m-5 p-2"&gt;Margin 5&lt;/div&gt;
+&lt;div outputclass="bg-accent fg-contrast-accent m-auto p-2 w-50"&gt;Margin Auto&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
@@ -67,31 +67,33 @@
     </section>
 
     <bodydiv outputclass="p-3 border">
-      <div outputclass="p-0 text-bg-primary">Padding 0</div>
-      <div outputclass="m-1 p-1 text-bg-secondary"><div
-          outputclass="bg-secondary-subtle text-dark w-100"
+      <div outputclass="p-0 bg-primary fg-contrast-primary">Padding 0</div>
+      <div outputclass="m-1 p-1 bg-secondary"><div
+          outputclass="bg-subtle-secondary fg-contrast-subtle-secondary w-100"
         >Padding 1</div></div>
-      <div outputclass="m-1 p-2 text-bg-success"><div
-          outputclass="bg-success-subtle text-dark w-100"
+      <div outputclass="m-1 p-2 bg-success"><div
+          outputclass="bg-subtle-success fg-contrast-subtle-success w-100"
         >Padding 2</div></div>
-      <div outputclass="m-1 p-3 text-bg-danger"><div
-          outputclass="bg-danger-subtle text-dark w-100"
+      <div outputclass="m-1 p-3 bg-danger"><div
+          outputclass="bg-subtle-danger fg-contrast-subtle-danger w-100"
         >Padding 3</div></div>
-      <div outputclass="m-1 p-4 text-bg-warning"><div
-          outputclass="bg-warning-subtle text-dark w-100"
+      <div outputclass="m-1 p-4 bg-warning"><div
+          outputclass="bg-subtle-warning fg-contrast-subtle-warning w-100"
         >Padding 4</div></div>
-      <div outputclass="m-1 p-5 text-bg-info"><div outputclass="bg-info-subtle text-dark w-100">Padding 5</div></div>
+      <div outputclass="m-1 p-5 bg-info"><div
+          outputclass="bg-subtle-info fg-contrast-subtle-info w-100"
+        >Padding 5</div></div>
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="text-bg-primary p-0"&gt;Padding 0&lt;/div&gt;
-&lt;div outputclass="text-bg-secondary p-1 m-1"&gt;Padding 1&lt;/div&gt;
-&lt;div outputclass="text-bg-success p-2 m-1"&gt;Padding 2&lt;/div&gt;
-&lt;div outputclass="text-bg-danger p-3 m-1"&gt;Padding 3&lt;/div&gt;
-&lt;div outputclass="text-bg-warning p-4 m-1"&gt;Padding 4&lt;/div&gt;
-&lt;div outputclass="text-bg-info p-5 m-1"&gt;Padding 5&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="bg-primary p-0"&gt;Padding 0&lt;/div&gt;
+&lt;div outputclass="bg-secondary p-1 m-1"&gt;Padding 1&lt;/div&gt;
+&lt;div outputclass="bg-success p-2 m-1"&gt;Padding 2&lt;/div&gt;
+&lt;div outputclass="bg-danger p-3 m-1"&gt;Padding 3&lt;/div&gt;
+&lt;div outputclass="bg-warning p-4 m-1"&gt;Padding 4&lt;/div&gt;
+&lt;div outputclass="bg-info p-5 m-1"&gt;Padding 5&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
@@ -120,23 +122,23 @@
     </section>
 
     <bodydiv outputclass="p-3 border">
-      <div outputclass="mt-5 mb-0 text-bg-primary">Margin Top 5, Bottom 0</div>
-      <div outputclass="mx-3 text-bg-secondary">Margin Horizontal 3</div>
-      <div outputclass="py-5 text-bg-success"><div
-          outputclass="bg-success-subtle text-dark w-100"
+      <div outputclass="mt-5 mb-0 bg-primary fg-contrast-primary">Margin Top 5, Bottom 0</div>
+      <div outputclass="mx-3 bg-secondary fg-contrast-secondary">Margin Horizontal 3</div>
+      <div outputclass="py-5 bg-success"><div
+          outputclass="bg-subtle-success fg-contrast-subtle-success  w-100"
         >Padding Vertical 5</div></div>
-      <div outputclass="ps-3 pe-1 text-bg-danger"><div
-          outputclass="bg-danger-subtle text-dark w-100"
+      <div outputclass="ps-3 pe-1 bg-danger"><div
+          outputclass="bg-subtle-danger fg-contrast-subtle-danger w-100"
         >Padding Start 3, End 1</div></div>
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="text-bg-primary mt-5 mb-0"&gt;Margin Top 5, Bottom 0&lt;/div&gt;
-&lt;div outputclass="text-bg-secondary mx-3"&gt;Margin Horizontal 3&lt;/div&gt;
-&lt;div outputclass="text-bg-success py-5"&gt;Padding Vertical 5&lt;/div&gt;
-&lt;div outputclass="text-bg-danger ps-3 pe-1"&gt;Padding Start 3, End 1&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="bg-primary mt-5 mb-0"&gt;Margin Top 5, Bottom 0&lt;/div&gt;
+&lt;div outputclass="bg-secondary mx-3"&gt;Margin Horizontal 3&lt;/div&gt;
+&lt;div outputclass="bg-success py-5"&gt;Padding Vertical 5&lt;/div&gt;
+&lt;div outputclass="bg-danger ps-3 pe-1"&gt;Padding Start 3, End 1&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
diff --git a/sample/typography.dita b/sample/typography.dita
index 61a54898..74a5f0e2 100644
--- a/sample/typography.dita
+++ b/sample/typography.dita
@@ -61,28 +61,29 @@
         heading to stand out, consider using a display heading — a larger, slightly more opinionated heading style.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <p outputclass="display-1">Display 1</p>
-      <p outputclass="display-2">Display 2</p>
-      <p outputclass="display-3">Display 3</p>
-      <p outputclass="display-4">Display 4</p>
-      <p outputclass="display-5">Display 5</p>
-      <p outputclass="display-6">Display 6</p>
+      <p outputclass="fw-light fs-6xl">Display 1</p>
+      <p outputclass="fw-light fs-5xl">Display 2</p>
+      <p outputclass="fw-light fs-4xl">Display 3</p>
+      <p outputclass="fw-light fs-3xl">Display 4</p>
+      <p outputclass="fw-light fs-2xl">Display 5</p>
+      <p outputclass="fw-light fs-xl">Display 6</p>
     </bodydiv>
-    <codeblock>&lt;title outputclass="display-1"&gt;Display 1&lt;/title&gt;
-&lt;title outputclass="display-2"&gt;Display 2&lt;/title&gt;
-&lt;title outputclass="display-3"&gt;Display 3&lt;/title&gt;
-&lt;title outputclass="display-4"&gt;Display 4&lt;/title&gt;
-&lt;title outputclass="display-5"&gt;Display 5&lt;/title&gt;
-&lt;title outputclass="display-6"&gt;Display 6&lt;/title&gt;</codeblock>
+    <codeblock>&lt;title outputclass="fw-light fs-6xl"&gt;Display 1&lt;/title&gt;
+&lt;title outputclass="fw-light fs-5xl"&gt;Display 2&lt;/title&gt;
+&lt;title outputclass="fw-light fs-4xl"&gt;Display 3&lt;/title&gt;
+&lt;title outputclass="fw-light fs-3xl"&gt;Display 4&lt;/title&gt;
+&lt;title outputclass="fw-light fs-2xl"&gt;Display 5&lt;/title&gt;
+&lt;title outputclass="fw-light fs-xl"&gt;Display 6&lt;/title&gt;</codeblock>
     <section>
       <title>Lead</title>
-      <p>Make a paragraph stand out by adding <xmlatt>outputclass="lead"</xmlatt> — this is automatically added to
+      <p>Make a paragraph stand out by adding <xmlatt
+        >outputclass="fw-light fs-lg"</xmlatt> — this is automatically added to
           <xmlelement>shortdesc</xmlelement> elements.</p>
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <p outputclass="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>
+      <p outputclass="fw-light fs-lg">This is a lead paragraph. It stands out from regular paragraphs.</p>
     </bodydiv>
-    <codeblock>&lt;p outputclass="lead"&gt;
+    <codeblock>&lt;p outputclass="fw-light fs-lg"&gt;
   This is a lead paragraph. It stands out from regular paragraphs.
 &lt;/p&gt;</codeblock>
     <section>
diff --git a/xsl/dita2html5-bootstrapImpl_template.xsl b/xsl/dita2html5-bootstrapImpl_template.xsl
index 978a6941..69c63ce0 100644
--- a/xsl/dita2html5-bootstrapImpl_template.xsl
+++ b/xsl/dita2html5-bootstrapImpl_template.xsl
@@ -16,7 +16,7 @@
   <!-- Whether to include a scrollspy Toc -->
   <xsl:param name="BOOTSTRAP_SCROLLSPY_TOC" select="'none'"/>
   <!-- Defines container class for main layout and menubar-TOC -->
-  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'container-xxl'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'xxl:container'"/>
 
   <xsl:import href="plugin:org.dita.base:xsl/common/output-message.xsl"/>
   <xsl:import href="plugin:org.dita.base:xsl/common/dita-utilities.xsl"/>
diff --git a/xsl/dita2html5-legacy-3.0_template.xsl b/xsl/dita2html5-legacy-3.0_template.xsl
index 7fcec70e..a66678a4 100644
--- a/xsl/dita2html5-legacy-3.0_template.xsl
+++ b/xsl/dita2html5-legacy-3.0_template.xsl
@@ -16,7 +16,7 @@
   <!-- Whether to include a scrollspy Toc -->
   <xsl:param name="BOOTSTRAP_SCROLLSPY_TOC" select="'none'"/>
   <!-- Defines container class for main layout and menubar-TOC -->
-  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'container-xxl'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'xxl:container'"/>
 
   <xsl:import href="plugin:org.dita.base:xsl/common/output-message.xsl"/>
   <xsl:import href="plugin:org.dita.base:xsl/common/dita-utilities.xsl"/>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 991ba6fe..fe4fbd6d 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -10,7 +10,7 @@
   version="2.0"
   exclude-result-prefixes="xs dita-ot"
 >
-  <xsl:param name="BOOTSTRAP_CSS_SHORTDESC" select="'text-body-secondary lead'"/>
+  <xsl:param name="BOOTSTRAP_CSS_SHORTDESC" select="'fw-light fs-lg'"/>
   <xsl:param name="BOOTSTRAP_CSS_CODEBLOCK" select="'theme-secondary border rounded p-1'"/>
   <xsl:param name="BOOTSTRAP_CSS_TOPIC_TITLE" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_SECTION_TITLE" select="'h4'"/>
@@ -490,7 +490,9 @@
             else if (contains(@outputclass, 'btn-group')) then ''
             else if (contains(@outputclass, 'btn-toolbar')) then ''
             else if (contains(@outputclass, 'accordion-')) then 'accordion'
+            else if (contains(@class, ' topic/fig ') and *[contains(@class, ' topic/lq ')]) then ' blockquote '
             else if (contains(@class, ' topic/fig ')) then ' figure ' || $BOOTSTRAP_CSS_FIGURE
+            else if (contains(@class, ' topic/lq ') and parent::*[contains(@class, ' topic/fig ')]) then ''
             else if (contains(@class, ' topic/lq ')) then ' blockquote '
             else if (contains(@class, ' topic/dl ')) then $BOOTSTRAP_CSS_DL
             else if (contains(@class, ' topic/image ') and ancestor::*[contains(@class, ' topic/fig ')]) then '  figure-img ' || $BOOTSTRAP_CSS_FIGURE_IMAGE
@@ -529,7 +531,7 @@
     <xsl:variable name="is-first-dd" select="empty(preceding-sibling::*[contains(@class, ' topic/dd ')])"/>
     <xsl:choose>
       <xsl:when test="not($is-first-dd)">
-        <xsl:text>col-lg-12 </xsl:text>
+        <xsl:text>lg:col-12 </xsl:text>
       </xsl:when>
       <xsl:when test="$terms=1">
         <xsl:variable name="dl" select="../../."/>
@@ -544,14 +546,14 @@
             <xsl:otherwise>3</xsl:otherwise>
           </xsl:choose>
         </xsl:variable>
-        <xsl:value-of select="concat('col-lg-', 12 - xs:integer($colspan), ' ')"/>
+        <xsl:value-of select="concat('lg:col-', 12 - xs:integer($colspan), ' ')"/>
       </xsl:when>
       <xsl:otherwise>
         <xsl:value-of
           select="
-            if ($terms=2) then 'col-lg-6 '
-            else if ($terms=3) then 'col-lg-3 '
-            else if ($terms=4) then 'col-lg-2 '
+            if ($terms=2) then 'lg:col-6 '
+            else if ($terms=3) then 'lg:col-3 '
+            else if ($terms=4) then 'lg:col-2 '
             else ''"
         />
       </xsl:otherwise>
@@ -575,14 +577,14 @@
             <xsl:otherwise>3</xsl:otherwise>
           </xsl:choose>
         </xsl:variable>
-        <xsl:value-of select="concat('col-lg-', $colspan, ' ')"/>
+        <xsl:value-of select="concat('lg:col-', $colspan, ' ')"/>
       </xsl:when>
       <xsl:otherwise>
         <xsl:value-of
           select="
-            if ($terms=2) then 'col-lg-3 '
-            else if ($terms=3) then 'col-lg-3 '
-            else if ($terms=4) then 'col-lg-2 '
+            if ($terms=2) then 'lg:col-3 '
+            else if ($terms=3) then 'lg:col-3 '
+            else if ($terms=4) then 'lg:col-2 '
             else ''"
         />
       </xsl:otherwise>

From 9927362c308862e3d811d5e3ef4cb90ad5307f6e Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Thu, 30 Jul 2026 18:40:51 +0200
Subject: [PATCH 11/87] Fixing note block and lines format

---
 sample/borders.dita     | 7 +++++--
 sample/drawer.dita      | 6 ++----
 xsl/utility-classes.xsl | 7 ++++++-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/sample/borders.dita b/sample/borders.dita
index f57ecd01..66977d17 100644
--- a/sample/borders.dita
+++ b/sample/borders.dita
@@ -242,7 +242,10 @@ int main()
     return 0;
 } </codeblock>
       <p/>
-      <lines outputclass="alert-secondary" frame="topbot">Shall I compare thee to a summer’s day?
+      <lines
+        outputclass="bg-subtle-accent fg-emphasis-accent p-3"
+        frame="topbot"
+      >Shall I compare thee to a summer’s day?
 Thou art more lovely and more temperate:
 Rough winds do shake the darling buds of May,
 and summer’s lease hath all too short a date:
@@ -281,7 +284,7 @@ and summer’s lease hath all too short a date:
       <p/>
     </bodydiv>
     <codeblock>&lt;codeblock frame="sides"&gt;...&lt;/codeblock&gt;
-&lt;lines frame="topbot" outputclass="bg-secondary-subtle p-3 border rounded"&gt;...&lt;/lines&gt;
+&lt;lines frame="topbot" outputclass="..."&gt;...&lt;/lines&gt;
 &lt;table frame="all"&gt;...&lt;/table&gt;</codeblock>
   </body>
 </topic>
diff --git a/sample/drawer.dita b/sample/drawer.dita
index 4342df18..20fafec7 100644
--- a/sample/drawer.dita
+++ b/sample/drawer.dita
@@ -150,9 +150,7 @@
         >lg</codeph> breakpoint, but shows the content above the <codeph>lg</codeph> breakpoint.</p>
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <note
-        outputclass="d-none lg:d-block text-bg-info"
-      >Resize your browser to show the responsive drawer toggle.</note>
+      <note outputclass="d-none lg:d-block">Resize your browser to show the responsive drawer toggle.</note>
             <xref outputclass="lg:d-none btn-primary" props="drawer-toggle" href="#drawer4">Toggle drawer</xref>
       <section outputclass="drawer-lg drawer drawer-start" id="drawer4">
         <title>Drawer</title>
@@ -171,7 +169,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;note outputclass="alert-info d-none lg:d-block"&gt;
+          <codeblock>&lt;note outputclass="d-none lg:d-block"&gt;
   Resize your browser to show the responsive drawer toggle.
 &lt;/note&gt;
 &lt;xref outputclass="btn-primary lg:d-none" props="drawer-toggle" href="#drawer4"&gt;
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index fe4fbd6d..34149d05 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -858,7 +858,12 @@
       </xsl:when>
       <xsl:when test="$icon != '' or (contains(@class, ' bootstrap-d/icon ') and @outputclass)">
         <xsl:element name="i">
-          <xsl:attribute name="class" select="concat('pe-2 ', $icon, ' ', @outputclass)"/>
+          <xsl:attribute name="class">
+            <xsl:value-of select="concat('pe-2 ', $icon)"/>
+            <xsl:if test="contains(@class, ' bootstrap-d/icon ')">
+              <xsl:value-of select="concat(' ', @outputclass)"/>
+            </xsl:if>
+          </xsl:attribute>
           <xsl:if test="contains(@otherprops, 'style(')">
             <xsl:call-template name="otherprops-attributes"/>
           </xsl:if>

From 61bc490dfc4ac5d3821e2cb2e50206bb102d02ee Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Thu, 30 Jul 2026 19:58:37 +0200
Subject: [PATCH 12/87] Updating carousel

---
 Customization/xsl/carousel.xsl | 109 +++++++++++++--------------------
 Customization/xsl/topic.xsl    |  51 +++++++--------
 sample/carousel.dita           |  24 ++++----
 3 files changed, 80 insertions(+), 104 deletions(-)

diff --git a/Customization/xsl/carousel.xsl b/Customization/xsl/carousel.xsl
index b3247b71..54943b5d 100644
--- a/Customization/xsl/carousel.xsl
+++ b/Customization/xsl/carousel.xsl
@@ -18,41 +18,36 @@
 
   <xsl:template name="carousel-previous-next">
     <xsl:param name="id"/>
-    <a class="carousel-control-prev" role="button" data-bs-slide="prev">
-      <xsl:attribute name="data-bs-target" select="concat('#' , $id)"/>
-      <xsl:call-template name="color-control">
-        <xsl:with-param name="icon" select="'carousel-control-prev-icon'"/>
-      </xsl:call-template>
-      <span class="visually-hidden">
-        <xsl:call-template name="getVariable">
-          <xsl:with-param name="id" select="'Previous'"/>
-        </xsl:call-template>
-      </span>
-    </a>
-    <a class="carousel-control-next" role="button" data-bs-slide="next">
-      <xsl:attribute name="data-bs-target" select="concat('#' , $id)"/>
-      <xsl:call-template name="color-control">
-        <xsl:with-param name="icon" select="'carousel-control-next-icon'"/>
-      </xsl:call-template>
-      <span class="visually-hidden">
-        <xsl:call-template name="getVariable">
-          <xsl:with-param name="id" select="'Next'"/>
-        </xsl:call-template>
-      </span>
-    </a>
+    <div>
+      <button class="btn-icon btn-sm" type="button" data-bs-slide="prev">
+        <xsl:attribute name="data-bs-target" select="concat('#' , $id)"/>
+        <span class="carousel-icon-prev" aria-hidden="true"/>
+        <span class="visually-hidden">
+          <xsl:call-template name="getVariable">
+            <xsl:with-param name="id" select="'Previous'"/>
+          </xsl:call-template>
+        </span>
+      </button>
+      <button class="btn-icon btn-sm" type="button" data-bs-slide="next">
+        <xsl:attribute name="data-bs-target" select="concat('#' , $id)"/>
+        <span class="carousel-icon-next" aria-hidden="true"/>
+        <span class="visually-hidden">
+          <xsl:call-template name="getVariable">
+            <xsl:with-param name="id" select="'Next'"/>
+          </xsl:call-template>
+        </span>
+      </button>
+    </div>
   </xsl:template>
 
   <xsl:template name="carousel-indicators">
     <xsl:param name="id"/>
-    <xsl:variable
-      name="color"
-      select="(@color, ancestor::*[contains(@class, ' bootstrap-d/carousel ')][1]/@color, 'primary')[1]"
-    />
+
     <div class="carousel-indicators">
       <xsl:for-each select="*[contains(@class, ' topic/li ')]">
         <button type="button">
           <xsl:attribute name="class">
-            <xsl:value-of select="replace($BOOTSTRAP_CSS_CAROUSEL_INDICATORS, 'primary', $color)"/>
+            <xsl:value-of select="$BOOTSTRAP_CSS_CAROUSEL_INDICATORS"/>
             <xsl:if test="count(preceding-sibling::*[contains(@class, ' topic/li ')]) = 0">
               <xsl:text> active</xsl:text>
             </xsl:if>
@@ -73,15 +68,15 @@
     <xsl:variable name="id">
       <xsl:value-of select="concat('carousel_' ,dita-ot:generate-html-id(.))"/>
     </xsl:variable>
-    <div>
-      <xsl:choose>
+    <div class="carousel slide">
+      <!--xsl:choose>
         <xsl:when test="@autoplay = 'no' or contains(@otherprops, 'autoplay(false)')">
           <xsl:attribute name="data-bs-ride" select="'true'"/>
         </xsl:when>
         <xsl:otherwise>
           <xsl:attribute name="data-bs-ride" select="'carousel'"/>
         </xsl:otherwise>
-      </xsl:choose>
+      </xsl:choose-->
       <xsl:if test="@touch = 'no' or contains(@otherprops, 'touch(false)')">
         <xsl:attribute name="data-bs-touch" select="'false'"/>
       </xsl:if>
@@ -90,17 +85,20 @@
       </xsl:if>
       <xsl:attribute name="id" select="$id"/>
       <xsl:call-template name="commonattributes"/>
-      <xsl:if test="@indicators = 'yes' or contains(@otherprops, 'indicators(true)')">
-        <xsl:call-template name="carousel-indicators">
-          <xsl:with-param name="id" select="$id"/>
-        </xsl:call-template>
-      </xsl:if>
+
       <div class="carousel-inner pb-1">
         <xsl:apply-templates mode="carousel"/>
       </div>
-      <xsl:call-template name="carousel-previous-next">
-        <xsl:with-param name="id" select="$id"/>
-      </xsl:call-template>
+      <div class="d-flex justify-content-between align-items-center">
+        <xsl:call-template name="carousel-previous-next">
+          <xsl:with-param name="id" select="$id"/>
+        </xsl:call-template>
+        <xsl:if test="@indicators = 'yes' or contains(@otherprops, 'indicators(true)')">
+          <xsl:call-template name="carousel-indicators">
+            <xsl:with-param name="id" select="$id"/>
+          </xsl:call-template>
+        </xsl:if>
+      </div>
     </div>
   </xsl:template>
 
@@ -145,28 +143,13 @@
     </div>
   </xsl:template>
 
-  <!-- Carousel Items Slides with Captions -->
   <xsl:template match="*[contains(@class,' topic/fig ')]" mode="carousel">
-    <xsl:apply-templates select="*[contains(@class,' topic/image ')]" mode="carousel"/>
-  </xsl:template>
-
-  <xsl:template name="color-control">
-    <xsl:param name="icon"/>
-    <xsl:variable
-      name="color"
-      select="(ancestor-or-self::*[contains(@class, ' bootstrap-d/carousel ')][1]/@color, 'primary')[1]"
-    />
-    <xsl:choose>
-      <xsl:when test="@fade = 'yes' or contains(@outputclass, 'carousel-fade')"/>
-      <xsl:otherwise>
-        <span class="btn theme-{$color} btn-sm p-0">
-          <span aria-hidden="true">
-            <xsl:attribute name="class" select="concat($icon, ' align-middle')"/>
-          </span>
-        </span>
-      </xsl:otherwise>
-    </xsl:choose>
+    <xsl:call-template name="topic.fig">
+      <xsl:with-param name="suppress-title-label" select="true()" tunnel="yes"/>
+    </xsl:call-template>
   </xsl:template>
+    <!-- Suppress default title processing in carousel mode to avoid duplicate rendering -->
+  <xsl:template match="*[contains(@class,' topic/title ')]" mode="carousel"/>
 
   <xsl:template match="*[contains(@class,' topic/image ')]" mode="carousel">
     <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]" mode="out-of-line"/>
@@ -213,16 +196,6 @@
     <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
   </xsl:template>
 
-  <!-- Slide Caption -->
-  <xsl:template match="*[contains(@class,' topic/title ')]" mode="carousel">
-    <div class="carousel-caption d-none md:d-block">
-      <p>
-        <xsl:call-template name="commonattributes"/>
-        <xsl:apply-templates/>
-      </p>
-    </div>
-  </xsl:template>
-
   <xsl:template match="*[contains(@class,' topic/div ') or contains(@class,' topic/bodydiv ')]" mode="carousel">
     <xsl:choose>
       <xsl:when test="contains(@outputclass, 'row') or contains(@class, ' bootstrap-d/grid-row ')">
diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl
index 3e06fb3d..1e8366ca 100644
--- a/Customization/xsl/topic.xsl
+++ b/Customization/xsl/topic.xsl
@@ -389,6 +389,7 @@
   <!-- Figure caption -->
   <xsl:template name="place-fig-lbl">
     <xsl:param name="stringName"/>
+    <xsl:param name="suppress-title-label" select="false()" tunnel="yes"/>
     <!-- Number of fig/title's including this one -->
     <xsl:variable
       name="fig-count-actual"
@@ -419,30 +420,32 @@
             />
           </xsl:apply-templates>
           <!-- ↑ End customization · Continue with DITA-OT defaults ↓ -->
-          <span class="fig--title-label">
-            <xsl:choose>
-              <!-- Blockquote - figure -->
-              <xsl:when test="*[contains(@class, ' topic/lq ')]">
-              </xsl:when>
-              <!-- Hungarian: "1. Figure " -->
-              <xsl:when test="$ancestorlang = ('hu', 'hu-hu')">
-                <xsl:value-of select="$fig-count-actual"/>
-                <xsl:text>. </xsl:text>
-                <xsl:call-template name="getVariable">
-                  <xsl:with-param name="id" select="'Figure'"/>
-                </xsl:call-template>
-                <xsl:text> </xsl:text>
-              </xsl:when>
-              <xsl:otherwise>
-                <xsl:call-template name="getVariable">
-                  <xsl:with-param name="id" select="'Figure'"/>
-                </xsl:call-template>
-                <xsl:text> </xsl:text>
-                <xsl:value-of select="$fig-count-actual"/>
-                <xsl:text>. </xsl:text>
-              </xsl:otherwise>
-            </xsl:choose>
-          </span>
+          <xsl:if test="not($suppress-title-label)">
+            <span class="fig--title-label">
+              <xsl:choose>
+                <!-- Blockquote - figure -->
+                <xsl:when test="*[contains(@class, ' topic/lq ')]">
+                </xsl:when>
+                <!-- Hungarian: "1. Figure " -->
+                <xsl:when test="$ancestorlang = ('hu', 'hu-hu')">
+                  <xsl:value-of select="$fig-count-actual"/>
+                  <xsl:text>. </xsl:text>
+                  <xsl:call-template name="getVariable">
+                    <xsl:with-param name="id" select="'Figure'"/>
+                  </xsl:call-template>
+                  <xsl:text> </xsl:text>
+                </xsl:when>
+                <xsl:otherwise>
+                  <xsl:call-template name="getVariable">
+                    <xsl:with-param name="id" select="'Figure'"/>
+                  </xsl:call-template>
+                  <xsl:text> </xsl:text>
+                  <xsl:value-of select="$fig-count-actual"/>
+                  <xsl:text>. </xsl:text>
+                </xsl:otherwise>
+              </xsl:choose>
+            </span>
+          </xsl:if>
           <xsl:apply-templates select="*[contains(@class, ' topic/title ')]" mode="figtitle"/>
           <xsl:if test="*[contains(@class, ' topic/desc ')]">
             <xsl:text>. </xsl:text>
diff --git a/sample/carousel.dita b/sample/carousel.dita
index 07638670..0ac2b96e 100644
--- a/sample/carousel.dita
+++ b/sample/carousel.dita
@@ -399,13 +399,13 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/400/200?l"/>
           <div outputclass="row">
             <div outputclass="col-4">
-              <p outputclass="text-center">First Image</p>
+              <p outputclass="text-center figure figure-caption">First Image</p>
             </div>
             <div outputclass="col-4">
-              <p outputclass="text-center">Second Image</p>
+              <p outputclass="text-center figure figure-caption">Second Image</p>
             </div>
             <div outputclass="col-4">
-              <p outputclass="text-center">Third Image</p>
+              <p outputclass="text-center figure figure-caption">Third Image</p>
             </div>
           </div>
         </li>
@@ -415,13 +415,13 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/400/200?o"/>
           <div outputclass="row">
             <div outputclass="col-4">
-              <p outputclass="text-center">Fourth Image</p>
+              <p outputclass="text-center figure figure-caption">Fourth Image</p>
             </div>
             <div outputclass="col-4">
-              <p outputclass="text-center">Fifth Image</p>
+              <p outputclass="text-center figure figure-caption">Fifth Image</p>
             </div>
             <div outputclass="col-4">
-              <p outputclass="text-center">Sixth Image</p>
+              <p outputclass="text-center figure figure-caption">Sixth Image</p>
             </div>
           </div>
         </li>
@@ -431,13 +431,13 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/400/200?r"/>
           <div outputclass="row">
             <div outputclass="col-4">
-              <p outputclass="text-center">Seventh Image</p>
+              <p outputclass="text-center figure figure-caption">Seventh Image</p>
             </div>
             <div outputclass="col-4">
-              <p outputclass="text-center">Eighth Image</p>
+              <p outputclass="text-center figure figure-caption">Eighth Image</p>
             </div>
             <div outputclass="col-4">
-              <p outputclass="text-center">Ninth Image</p>
+              <p outputclass="text-center figure figure-caption">Ninth Image</p>
             </div>
           </div>
         </li>
@@ -450,13 +450,13 @@ And, kept unused, the user so destroys it.</lines>
     &lt;image href="..." /&gt;
     &lt;grid-row deliveryTarget="html"&gt;
       &lt;grid-col colspan="4"&gt;
-        &lt;p outputclass="text-center"&gt;...&lt;/p&gt;
+        &lt;p outputclass="text-center figure figure-caption"&gt;...&lt;/p&gt;
       &lt;/grid-col&gt;
       &lt;grid-col colspan="4"&gt;
-        &lt;p outputclass="text-center"&gt;...&lt;/p&gt;
+        &lt;p outputclass="text-center figure figure-caption"&gt;...&lt;/p&gt;
       &lt;/grid-col&gt;
       &lt;grid-col colspan="4"&gt;
-        &lt;p outputclass="text-center"&gt;...&lt;/p&gt;
+        &lt;p outputclass="text-center figure figure-caption"&gt;...&lt;/p&gt;
       &lt;/grid-col&gt;
     &lt;/grid-row&gt;
   &lt;/carousel-item&gt;

From d4950eea54dded9e5398ba6725d858b762c642e2 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Thu, 30 Jul 2026 20:59:47 +0200
Subject: [PATCH 13/87] Remove styling default

---
 Customization/xsl/carousel.xsl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Customization/xsl/carousel.xsl b/Customization/xsl/carousel.xsl
index 54943b5d..3130d3ff 100644
--- a/Customization/xsl/carousel.xsl
+++ b/Customization/xsl/carousel.xsl
@@ -14,7 +14,7 @@
   <!-- Customization to add Bootstrap Carousel Component -->
   <!-- https://getbootstrap.com/docs/5.3/components/carousel/ -->
 
-  <xsl:param name="BOOTSTRAP_CSS_CAROUSEL_INDICATORS" select="'btn theme-primary btn-sm'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CAROUSEL_INDICATORS" select="''"/>
 
   <xsl:template name="carousel-previous-next">
     <xsl:param name="id"/>

From 8a5e8fda774efb0921c88f272625d0a23756719e Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Fri, 31 Jul 2026 12:21:06 +0200
Subject: [PATCH 14/87] Fixing menus

---
 .github/dita-ot/header.xml                | 697 ++++++++++------------
 .github/dita-ot/theme.css                 |  15 +-
 Customization/xsl/nav.xsl                 |  51 +-
 Customization/xsl/scrollspy.xsl           |   2 +-
 Customization/xsl/topic.xsl               |   6 +-
 css/common-bootstrap.css                  |   4 +-
 includes/hdr.navbar.default.xml           | 188 +++---
 includes/hdr.navbar.example.xml           | 188 +++---
 xsl/dita2html5-bootstrapImpl_template.xsl |   2 +-
 xsl/dita2html5-legacy-3.0_template.xsl    |   2 +-
 xsl/utility-classes.xsl                   |   2 +-
 11 files changed, 506 insertions(+), 651 deletions(-)

diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml
index 7b25dda0..d2d8a335 100644
--- a/.github/dita-ot/header.xml
+++ b/.github/dita-ot/header.xml
@@ -1,435 +1,342 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-  <!-- Modify -xxl to change container size -->
-  <div class="container-xxl">
-    <!-- This shows the menu on mobile -->
-    <div class="bd-navbar-toggle">
-      <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>
-    </div>
+<nav
+  class="2xl:container bd-gutter flex-wrap lg:flex-nowrap justify-content-start"
+  aria-label="Main navigation"
+>
+  <div class="container-fluid">
+  <div class="d-flex align-items-center gap-2 lg:gap-1">
     <a
-      class="navbar-brand"
-      href="https://dita-bootstrap.github.io/dita-bootstrap.html"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        class="bi bi-bootstrap"
-        viewBox="0 0 16 16"
+        class="navbar-brand"
+        href="https://dita-bootstrap.github.io/dita-bootstrap.html"
       >
+      <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="bi bi-bootstrap"
+          viewBox="0 0 16 16"
+        >
       <path
-          d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
-        />
+            d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
+          />
       <path
-          d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
-        />
+            d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
+          />
     </svg>
       DITA Bootstrap
     </a>
-    <button
-      class="navbar-toggler p-2"
-      type="button"
-      data-bs-toggle="collapse"
-      data-bs-target="#navbarSupportedContent"
-      aria-controls="navbarSupportedContent"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-    >
-      <i class="bi bi-three-dots"/>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav">
-        <li class="nav-item">
-          <a
+
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex">
+      <li class="nav-item">
+        <a
             class="nav-link"
             href="https://www.dita-ot.org/plugins#!org.dita-bootstrap.html"
           >Plugin</a>
-        </li>
-        <li class="nav-item">
-          <a
+      </li>
+      <li class="nav-item">
+        <a
             class="nav-link"
             href="https://github.com/dita-bootstrap/dita-bootstrap.html/releases"
           >Releases</a>
-        </li>
-        <li class="nav-item">
-          <a
+      </li>
+      <li class="nav-item">
+        <a
             class="nav-link"
             href="https://github.com/dita-bootstrap/dita-bootstrap.html"
           >Source</a>
-        </li>
-        <li class="nav-item">
-          <a
+      </li>
+      <li class="nav-item">
+        <a
             class="nav-link"
             href="https://getbootstrap.com/docs/5.3"
           >Bootstrap Docs</a>
-        </li>
-      </ul>
-      <ul class="navbar-nav ms-auto">
-        <!--
-          This is a lunr.js search box
-          It requires JavaScript to function.
-        -->
-        <li class="nav-item d-flex align-items-center">
-          <span class="nav-link pe-2">
-            <i class="bi bi-search"/>
-          </span>
-          <form class="position-relative me-auto search-box rounded">
-            <input
+      </li>
+    </ul>
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex ms-auto">
+      <!--
+        This is a lunr.js search box
+        It requires JavaScript to function.
+      -->
+      <li class="nav-item d-flex align-items-center">
+        <span class="nav-link pe-2">
+          <i class="bi bi-search"/>
+        </span>
+        <form class="position-relative me-auto search-box rounded">
+          <input
               type="search"
               class="form-control"
               placeholder="Search…"
               aria-label="Search for…"
               dir="auto"
             />
-          </form>
-        </li>
-      </ul>
-      <ul class="navbar-nav ms-0 me-1">
-        <!--
-          This is a dark/light color theme toggler.
-          It requires JavaScript to function.
-        -->
-        <li class="nav-item dropdown">
-          <a
+        </form>
+      </li>
+    </ul>
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex ms-auto">
+      <!--
+        This is a dark/light color theme toggler.
+        It requires JavaScript to function.
+      -->
+      <li class="nav-item">
+        <a
             href="#"
-            class="nav-link px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+            class="nav-link"
             id="bd-color-mode"
-            data-bs-toggle="dropdown"
+            role="button"
+            data-bs-toggle="menu"
             aria-expanded="false"
-            data-bs-display="static"
           >
-            <span class="d-light">
+          <span class="d-light">
+            <i class="bi bi-brightness-high-fill"/>
+          </span>
+          <span class="d-dark">
+            <i class="bi bi-moon-stars-fill"/>
+          </span>
+          <span class="d-auto">
+            <i class="bi bi-circle-half"/>
+          </span>
+        </a>
+        <div class="menu">
+          <a href="#" class="menu-item" data-bs-theme-value="light">
               <i class="bi bi-brightness-high-fill"/>
-            </span>
-            <span class="d-dark">
+              <span class="ms-2">Light</span>
+            </a>
+
+            <a href="#" class="menu-item" data-bs-theme-value="dark">
               <i class="bi bi-moon-stars-fill"/>
-            </span>
-            <span class="d-auto">
+              <span class="ms-2">Dark</span>
+            </a>
+
+            <a href="#" class="menu-item" data-bs-theme-value="auto">
               <i class="bi bi-circle-half"/>
-            </span>
-            <span class="d-lg-none ms-2">Toggle color mode</span>
-          </a>
-          <ul
-            class="dropdown-menu dropdown-menu-end"
-            aria-labelledby="bd-color-mode"
-            style="--bs-dropdown-min-width: 6rem;"
-            data-bs-popper="static"
-          >
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="light"
-              >
-                <i class="bi bi-brightness-high-fill"/>
-                <span class="ms-2">Light</span>
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="dark"
-              >
-                <i class="bi bi-moon-stars-fill"/>
-                <span class="ms-2">Dark</span>
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="auto"
-              >
-                <i class="bi bi-circle-half"/>
-                <span class="ms-2">Auto</span>
-              </button>
-            </li>
-          </ul>
-        </li>
-      </ul>
-      <ul class="navbar-nav ms-0 me-1">
-        <!--
-          This is a css bootstrap theme toggler.
-          It requires JavaScript to function.
-        -->
-        <li class="nav-item dropdown">
-          <a
+              <span class="ms-2">Auto</span>
+            </a>
+        </div>
+
+      </li>
+    </ul>
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex ms-0 me-1">
+      <!--
+        This is a css bootstrap theme toggler.
+        It requires JavaScript to function.
+      -->
+      <li class="nav-item dropdown">
+        <a
             href="#"
-            class="nav-link px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+            class="nav-link"
             id="bd-css-theme"
-            data-bs-toggle="dropdown"
+            role="button"
+            data-bs-toggle="menu"
             aria-expanded="false"
-            data-bs-display="static"
-          >
-            <i class="bi bi-filetype-css"/>
-            <span class="d-lg-none ms-2">Toggle theme</span>
-          </a>
-          <ul
-            class="dropdown-menu dropdown-menu-end css-themes-list overflow-y-auto"
-            aria-labelledby="bd-css-theme"
-            style="--bs-dropdown-min-width: 6rem;"
-            data-bs-popper="static"
           >
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
-              >
-                Default
-              </button>
-            </li>
-            <li>
-              <hr class="dropdown-divider"/>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/brite/bootstrap.min.css"
-              >
-                Brite
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/cerulean/bootstrap.min.css"
-              >
-                Cerulean
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/cosmo/bootstrap.min.css"
-              >
-                Cosmo
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/cyborg/bootstrap.min.css"
-              >
-                Cyborg
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/darkly/bootstrap.min.css"
-              >
-                Darkly
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/flatly/bootstrap.min.css"
-              >
-                Flatly
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/journal/bootstrap.min.css"
-              >
-                Journal
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/litera/bootstrap.min.css"
-              >
-                Litera
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/lumen/bootstrap.min.css"
-              >
-                Lumen
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/lux/bootstrap.min.css"
-              >
-                Lux
-              </button>
-            </li>
-          <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/materia/bootstrap.min.css"
-              >
-                Materia
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/minty/bootstrap.min.css"
-              >
-                Minty
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/morph/bootstrap.min.css"
-              >
-                Morph
-              </button>
-            </li>
-
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/pulse/bootstrap.min.css"
-              >
-                Pulse
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/quartz/bootstrap.min.css"
-              >
-                Quartz
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/sandstone/bootstrap.min.css"
-              >
-                Sandstone
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/simplex/bootstrap.min.css"
-              >
-                Simplex
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/sketchy/bootstrap.min.css"
-              >
-                Sketchy
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/slate/bootstrap.min.css"
-              >
-                Slate
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/solar/bootstrap.min.css"
-              >
-                Solar
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/spacelab/bootstrap.min.css"
-              >
-                SpaceLab
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/superhero/bootstrap.min.css"
-              >
-                Superhero
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/united/bootstrap.min.css"
-              >
-                United
-              </button>
-            </li>
-          <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/vapor/bootstrap.min.css"
-              >
-                Vapor
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/yeti/bootstrap.min.css"
-              >
-                Yeti
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/zephyr/bootstrap.min.css"
-              >
-                Zephyr
-              </button>
-            </li>
-          </ul>
+          <i class="bi bi-filetype-css"/>
+        </a>
+        <div class="menu">
+          <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
+            >
+              Default
+            </button>
+            <hr class="dropdown-divider"/>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/brite/bootstrap.min.css"
+            >
+              Brite
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/cerulean/bootstrap.min.css"
+            >
+              Cerulean
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/cosmo/bootstrap.min.css"
+            >
+              Cosmo
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/cyborg/bootstrap.min.css"
+            >
+              Cyborg
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/darkly/bootstrap.min.css"
+            >
+              Darkly
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/flatly/bootstrap.min.css"
+            >
+              Flatly
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/journal/bootstrap.min.css"
+            >
+              Journal
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/litera/bootstrap.min.css"
+            >
+              Litera
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/lumen/bootstrap.min.css"
+            >
+              Lumen
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/lux/bootstrap.min.css"
+            >
+              Lux
+            </button>
+             <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/materia/bootstrap.min.css"
+            >
+              Materia
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/minty/bootstrap.min.css"
+            >
+              Minty
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/morph/bootstrap.min.css"
+            >
+              Morph
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/pulse/bootstrap.min.css"
+            >
+              Pulse
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/quartz/bootstrap.min.css"
+            >
+              Quartz
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/sandstone/bootstrap.min.css"
+            >
+              Sandstone
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/simplex/bootstrap.min.css"
+            >
+              Simplex
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/sketchy/bootstrap.min.css"
+            >
+              Sketchy
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/slate/bootstrap.min.css"
+            >
+              Slate
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/solar/bootstrap.min.css"
+            >
+              Solar
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/spacelab/bootstrap.min.css"
+            >
+              SpaceLab
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/superhero/bootstrap.min.css"
+            >
+              Superhero
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/united/bootstrap.min.css"
+            >
+              United
+            </button>
+             <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/vapor/bootstrap.min.css"
+            >
+              Vapor
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/yeti/bootstrap.min.css"
+            >
+              Yeti
+            </button>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center"
+              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/zephyr/bootstrap.min.css"
+            >
+              Zephyr
+            </button>
+          </div>
         </li>
       </ul>
-    </div>
+
+    <button
+        class="ms-auto btn-icon navbar-toggler"
+        type="button"
+        data-bs-toggle="drawer"
+        data-bs-target="#bdSidebar"
+        aria-controls="bdSidebar"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+      <span class="navbar-toggler-icon" aria-hidden="true"/>
+    </button>
+  </div>
   </div>
 </nav>
diff --git a/.github/dita-ot/theme.css b/.github/dita-ot/theme.css
index 01031927..fedc6130 100644
--- a/.github/dita-ot/theme.css
+++ b/.github/dita-ot/theme.css
@@ -29,17 +29,28 @@
   --bs-tooltip-bg: var(--bs-primary);
 }
 
-/* override part of the Bootstrap color scheme */
+/* override parts of the Bootstrap color scheme */
 :root {
   --bs-code-color: var(--bs-secondary-color);
 }
 
+.navbar {
+  --bs-navbar-brand-hover-color: var(--bs-primary-contrast);
+  --bs-navbar-bg: var(--bs-primary-bg);
+  --bs-navbar-color: var(--bs-primary-contrast);
+  --bs-navbar-brand-color: var(--bs-primary-contrast);
+}
+
+.nav-link {
+  --bs-nav-link-hover-color: var(--bs-primary-contrast);
+}
+
 /* Make all CSS themes scrollable */
 .css-themes-list {
   height: calc(100vh - 6rem);
 }
 
-@media (max-width: 991.98px) {
+bg-body fg-body @media (max-width: 991.98px) {
   .css-themes-list {
     height: calc(100vh - 25rem);
   }
diff --git a/Customization/xsl/nav.xsl b/Customization/xsl/nav.xsl
index cedc97a6..cbddc3ac 100644
--- a/Customization/xsl/nav.xsl
+++ b/Customization/xsl/nav.xsl
@@ -551,7 +551,7 @@
           </xsl:when>
           <xsl:otherwise>
             <!-- ↓ Add Bootstrap list-group-item class and light background color ↓ -->
-            <span class="list-group-item bg-body-tertiary">
+            <span class="list-group-item bg-subtle-secondary">
               <xsl:call-template name="nav-icon"/>
               <xsl:value-of select="$title"/>
             </span>
@@ -725,13 +725,14 @@
     <xsl:if test="not($BOOTSTRAP_MENUBAR_TOC = 'yes')">
       <xsl:call-template name="nav-divider"/>
     </xsl:if>
-    <li>
+
       <xsl:choose>
         <xsl:when test="$BOOTSTRAP_MENUBAR_TOC = 'yes' and count(ancestor::*/@href) eq 0 and not($show-menu = 'show')">
           <!-- no-op - if a menubar-toc is present, the nav-bar is reduced to current decendents only -->
         </xsl:when>
         <xsl:when test="not(.)"/>
         <xsl:when test="normalize-space($title)">
+          <li>
           <xsl:variable name="id" select="dita-ot:generate-html-id(.)"/>
           <xsl:choose>
             <xsl:when test="normalize-space(@href)">
@@ -843,9 +844,10 @@
               </ul>
             </div>
           </xsl:if>
+          </li>
         </xsl:when>
       </xsl:choose>
-    </li>
+
   </xsl:template>
 
   <!-- menubar-toc mode to add Bootstrap nav-link classes to a menubar-toc - a submenu as part of the header -->
@@ -865,7 +867,7 @@
       <xsl:when test="normalize-space($title)">
         <xsl:choose>
           <xsl:when test="normalize-space(@href)">
-            <li class="nav-item" role="none">
+            <li class="nav-item">
               <a role="menuitem">
                 <!-- ↓ Add Bootstrap nav-link classes -->
                 <xsl:call-template name="nav-attributes">
@@ -878,38 +880,31 @@
             </li>
           </xsl:when>
           <xsl:otherwise>
-            <!-- ↓ Add Bootstrap nav-item class and dropdown ↓ -->
-            <li class="nav-item dropdown" role="none">
-              <a
-                class="nav-link dropdown-toggle"
-                data-bs-toggle="dropdown"
-                href="#"
-                role="menuitem"
-                aria-expanded="false"
-                aria-haspopup="true"
-              >
+            <!-- ↓ Add Bootstrap nav-item class and menu ↓ -->
+            <li class="nav-item">
+              <a class="nav-link" data-bs-toggle="menu" href="#" aria-expanded="false">
                 <xsl:call-template name="nav-icon"/>
                 <xsl:value-of select="$title"/>
               </a>
-              <ul class="dropdown-menu" role="menu">
-                <!-- menubar-toc dropdown menu items must be active links -->
+              <div class="menu">
+                <!-- menubar-toc menu items must be active links -->
                 <xsl:for-each select="$children">
                   <xsl:variable name="title">
                     <xsl:apply-templates select="." mode="get-navtitle"/>
                   </xsl:variable>
-                  <xsl:call-template name="nav-divider"/>
-                  <li role="none">
-                    <a role="menuitem">
-                      <xsl:call-template name="nav-attributes">
-                        <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>
-                        <xsl:with-param name="class" select="'dropdown-item'"/>
-                      </xsl:call-template>
-                      <xsl:call-template name="nav-icon"/>
-                      <xsl:value-of select="$title"/>
-                    </a>
-                  </li>
+                  <!--xsl:call-template name="nav-divider-menu"/-->
+
+                  <a class="menu-item">
+                    <xsl:call-template name="nav-attributes">
+                      <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>
+                      <xsl:with-param name="class" select="'menu-item'"/>
+                    </xsl:call-template>
+                    <xsl:call-template name="nav-icon"/>
+                    <xsl:value-of select="$title"/>
+                  </a>
+
                 </xsl:for-each>
-              </ul>
+              </div>
             </li>
             <!-- ↑ End customization · Continue with DITA-OT defaults ↓ -->
           </xsl:otherwise>
diff --git a/Customization/xsl/scrollspy.xsl b/Customization/xsl/scrollspy.xsl
index 307be786..97b4c721 100644
--- a/Customization/xsl/scrollspy.xsl
+++ b/Customization/xsl/scrollspy.xsl
@@ -22,7 +22,7 @@
         </div>
       </xsl:when>
       <xsl:when test="$BOOTSTRAP_SCROLLSPY_TOC = ('nav-pill')">
-        <nav class="nav nav-pills flex-column navbar-light bg-body-tertiary" id="bs-scrollspy">
+        <nav class="nav nav-pills flex-column navbar-light bg-subtle-secondary" id="bs-scrollspy">
           <xsl:if test="$BIDIRECTIONAL_DOCUMENT = 'yes'">
             <xsl:attribute name="dir" select="'rtl'"/>
           </xsl:if>
diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl
index 1e8366ca..5de74ca1 100644
--- a/Customization/xsl/topic.xsl
+++ b/Customization/xsl/topic.xsl
@@ -13,7 +13,7 @@
 >
   <xsl:param name="defaultLanguage" select="'en'" as="xs:string"/>
   <xsl:param name="BIDIRECTIONAL_DOCUMENT" select="'no'" as="xs:string"/>
-  <xsl:param name="BOOTSTRAP_CSS_FOOTER" select="'border-top bg-primary-subtle'"/>
+  <xsl:param name="BOOTSTRAP_CSS_FOOTER" select="'border-top bg-subtle-primary'"/>
   <xsl:param name="BOOTSTRAP_TOPBAR_HDR"/>
 
   <!--Check the file Url Definition of the TOP HDR FTR-->
@@ -107,9 +107,7 @@
         <!-- ↓ Add Bootstrap class attributes template ↓ -->
         <xsl:attribute
           name="class"
-          select="
-            if ($BOOTSTRAP_MENUBAR_TOC = 'yes') then 'sticky-top bg-body-tertiary'
-            else 'sticky-top'"
+          select="'navbar lg:navbar-expand bd-navbar border-bottom border-inverse border-20 sticky-top'"
         />
         <!-- ↑ End customization · Continue with DITA-OT defaults ↓ -->
         <xsl:sequence select="$header-content"/>
diff --git a/css/common-bootstrap.css b/css/common-bootstrap.css
index f29a1c89..449d3b0e 100644
--- a/css/common-bootstrap.css
+++ b/css/common-bootstrap.css
@@ -109,7 +109,7 @@
 }
 
 .bs-container {
-  margin: 3rem auto;
+  margin: 1rem auto;
 }
 
 .bs-sidebar-nav {
@@ -117,7 +117,7 @@
 }
 
 [type='search']::placeholder {
-  color: rgba(var(--bs-body-color-rgb), 0.3);
+  color: color-mix(in oklch, var(--bs-fg-body) 35%, transparent);
 }
 
 .search-box:hover,
diff --git a/includes/hdr.navbar.default.xml b/includes/hdr.navbar.default.xml
index 858f8798..050b2ca4 100644
--- a/includes/hdr.navbar.default.xml
+++ b/includes/hdr.navbar.default.xml
@@ -1,124 +1,96 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-  <!-- Modify -xxl to change container size -->
-  <div class="container-xxl">
-    <!-- This shows the menu on mobile -->
-    <div class="bd-navbar-toggle">
-      <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"
+<nav
+  class="my-brand 2xl:container bd-gutter flex-wrap lg:flex-nowrap justify-content-start"
+  aria-label="Main navigation"
+>
+  <div class="container-fluid">
+  <div class="d-flex align-items-center gap-2 lg:gap-1">
+    <a
+        class="navbar-brand"
+        href="https://dita-bootstrap.github.io/dita-bootstrap.html"
       >
-        <i class="bi bi-list"/>
-      </button>
-    </div>
-    <a class="navbar-brand" href="/">
       <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        class="bi bi-bootstrap"
-        viewBox="0 0 16 16"
-      >
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="bi bi-bootstrap"
+          viewBox="0 0 16 16"
+        >
       <path
-          d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
-        />
+            d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
+          />
       <path
-          d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
-        />
+            d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
+          />
     </svg>
       DITA Bootstrap
     </a>
-    <button
-      class="navbar-toggler p-2"
-      type="button"
-      data-bs-toggle="collapse"
-      data-bs-target="#navbarSupportedContent"
-      aria-controls="navbarSupportedContent"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-    >
-      <i class="bi bi-three-dots"/>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav">
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link One</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link Two</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link Three</a>
-        </li>
-      </ul>
-      <ul class="navbar-nav ms-auto">
-        <!--
-          This is a dark/light color theme toggler.
-          It requires JavaScript to function.
-        -->
-        <li class="nav-item dropdown">
-          <a
+
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex">
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link One</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link Two</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link Three</a>
+      </li>
+    </ul>
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex ms-auto">
+      <!--
+        This is a dark/light color theme toggler.
+        It requires JavaScript to function.
+      -->
+      <li class="nav-item">
+        <a
             href="#"
-            class="nav-link px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+            class="nav-link"
             id="bd-color-mode"
-            data-bs-toggle="dropdown"
+            role="button"
+            data-bs-toggle="menu"
             aria-expanded="false"
-            data-bs-display="static"
           >
-            <span class="d-light">
+          <span class="d-light">
+            <i class="bi bi-brightness-high-fill"/>
+          </span>
+          <span class="d-dark">
+            <i class="bi bi-moon-stars-fill"/>
+          </span>
+          <span class="d-auto">
+            <i class="bi bi-circle-half"/>
+          </span>
+        </a>
+        <div class="menu">
+          <a href="#" class="menu-item" data-bs-theme-value="light">
               <i class="bi bi-brightness-high-fill"/>
-            </span>
-            <span class="d-dark">
+              <span class="ms-2">Light</span>
+            </a>
+
+            <a href="#" class="menu-item" data-bs-theme-value="dark">
               <i class="bi bi-moon-stars-fill"/>
-            </span>
-            <span class="d-auto">
+              <span class="ms-2">Dark</span>
+            </a>
+
+            <a href="#" class="menu-item" data-bs-theme-value="auto">
               <i class="bi bi-circle-half"/>
-            </span>
-            <span class="d-lg-none ms-2">Toggle color mode</span>
-          </a>
-          <ul
-            class="dropdown-menu dropdown-menu-end"
-            aria-labelledby="bd-color-mode"
-            style="--bs-dropdown-min-width: 6rem;"
-            data-bs-popper="static"
-          >
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="light"
-              >
-                <i class="bi bi-brightness-high-fill"/>
-                <span class="ms-2">Light</span>
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="dark"
-              >
-                <i class="bi bi-moon-stars-fill"/>
-                <span class="ms-2">Dark</span>
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="auto"
-              >
-                <i class="bi bi-circle-half"/>
-                <span class="ms-2">Auto</span>
-              </button>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
+              <span class="ms-2">Auto</span>
+            </a>
+        </div>
+
+      </li>
+    </ul>
+    <button
+        class="ms-auto btn-icon navbar-toggler"
+        type="button"
+        data-bs-toggle="drawer"
+        data-bs-target="#bdSidebar"
+        aria-controls="bdSidebar"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+      <span class="navbar-toggler-icon" aria-hidden="true"/>
+    </button>
+  </div>
   </div>
 </nav>
diff --git a/includes/hdr.navbar.example.xml b/includes/hdr.navbar.example.xml
index 7b53d11b..b8afdf7a 100644
--- a/includes/hdr.navbar.example.xml
+++ b/includes/hdr.navbar.example.xml
@@ -1,124 +1,96 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">
-  <!-- Modify -xxl to change container size -->
-  <div class="container-xxl">
-    <!-- This shows the menu on mobile -->
-    <div class="bd-navbar-toggle">
-      <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"
+<nav
+  class="2xl:container bd-gutter flex-wrap lg:flex-nowrap justify-content-start"
+  aria-label="Main navigation"
+>
+  <div class="container-fluid">
+  <div class="d-flex align-items-center gap-2 lg:gap-1">
+    <a
+        class="navbar-brand"
+        href="https://dita-bootstrap.github.io/dita-bootstrap.html"
       >
-        <i class="bi bi-list"/>
-      </button>
-    </div>
-    <a class="navbar-brand" href="/">
       <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        class="bi bi-bootstrap"
-        viewBox="0 0 16 16"
-      >
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="bi bi-bootstrap"
+          viewBox="0 0 16 16"
+        >
       <path
-          d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
-        />
+            d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
+          />
       <path
-          d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
-        />
+            d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
+          />
     </svg>
       DITA Bootstrap
     </a>
-    <button
-      class="navbar-toggler p-2"
-      type="button"
-      data-bs-toggle="collapse"
-      data-bs-target="#navbarSupportedContent"
-      aria-controls="navbarSupportedContent"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-    >
-      <i class="bi bi-three-dots"/>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav">
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link One</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link Two</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link Three</a>
-        </li>
-      </ul>
-      <ul class="navbar-nav ms-auto">
-        <!--
-          This is a dark/light color theme toggler.
-          It requires JavaScript to function.
-        -->
-        <li class="nav-item dropdown">
-          <a
+
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex">
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link One</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link Two</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link Three</a>
+      </li>
+    </ul>
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex ms-auto">
+      <!--
+        This is a dark/light color theme toggler.
+        It requires JavaScript to function.
+      -->
+      <li class="nav-item">
+        <a
             href="#"
-            class="nav-link px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+            class="nav-link"
             id="bd-color-mode"
-            data-bs-toggle="dropdown"
+            role="button"
+            data-bs-toggle="menu"
             aria-expanded="false"
-            data-bs-display="static"
           >
-            <span class="d-light">
+          <span class="d-light">
+            <i class="bi bi-brightness-high-fill"/>
+          </span>
+          <span class="d-dark">
+            <i class="bi bi-moon-stars-fill"/>
+          </span>
+          <span class="d-auto">
+            <i class="bi bi-circle-half"/>
+          </span>
+        </a>
+        <div class="menu">
+          <a href="#" class="menu-item" data-bs-theme-value="light">
               <i class="bi bi-brightness-high-fill"/>
-            </span>
-            <span class="d-dark">
+              <span class="ms-2">Light</span>
+            </a>
+
+            <a href="#" class="menu-item" data-bs-theme-value="dark">
               <i class="bi bi-moon-stars-fill"/>
-            </span>
-            <span class="d-auto">
+              <span class="ms-2">Dark</span>
+            </a>
+
+            <a href="#" class="menu-item" data-bs-theme-value="auto">
               <i class="bi bi-circle-half"/>
-            </span>
-            <span class="d-lg-none ms-2">Toggle color mode</span>
-          </a>
-          <ul
-            class="dropdown-menu dropdown-menu-end"
-            aria-labelledby="bd-color-mode"
-            style="--bs-dropdown-min-width: 6rem;"
-            data-bs-popper="static"
-          >
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="light"
-              >
-                <i class="bi bi-brightness-high-fill"/>
-                <span class="ms-2">Light</span>
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="dark"
-              >
-                <i class="bi bi-moon-stars-fill"/>
-                <span class="ms-2">Dark</span>
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="auto"
-              >
-                <i class="bi bi-circle-half"/>
-                <span class="ms-2">Auto</span>
-              </button>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
+              <span class="ms-2">Auto</span>
+            </a>
+        </div>
+
+      </li>
+    </ul>
+    <button
+        class="ms-auto btn-icon navbar-toggler"
+        type="button"
+        data-bs-toggle="drawer"
+        data-bs-target="#bdSidebar"
+        aria-controls="bdSidebar"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+      <span class="navbar-toggler-icon" aria-hidden="true"/>
+    </button>
+  </div>
   </div>
 </nav>
diff --git a/xsl/dita2html5-bootstrapImpl_template.xsl b/xsl/dita2html5-bootstrapImpl_template.xsl
index 69c63ce0..e173a008 100644
--- a/xsl/dita2html5-bootstrapImpl_template.xsl
+++ b/xsl/dita2html5-bootstrapImpl_template.xsl
@@ -16,7 +16,7 @@
   <!-- Whether to include a scrollspy Toc -->
   <xsl:param name="BOOTSTRAP_SCROLLSPY_TOC" select="'none'"/>
   <!-- Defines container class for main layout and menubar-TOC -->
-  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'xxl:container'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'lg:container'"/>
 
   <xsl:import href="plugin:org.dita.base:xsl/common/output-message.xsl"/>
   <xsl:import href="plugin:org.dita.base:xsl/common/dita-utilities.xsl"/>
diff --git a/xsl/dita2html5-legacy-3.0_template.xsl b/xsl/dita2html5-legacy-3.0_template.xsl
index a66678a4..b3bebe1c 100644
--- a/xsl/dita2html5-legacy-3.0_template.xsl
+++ b/xsl/dita2html5-legacy-3.0_template.xsl
@@ -16,7 +16,7 @@
   <!-- Whether to include a scrollspy Toc -->
   <xsl:param name="BOOTSTRAP_SCROLLSPY_TOC" select="'none'"/>
   <!-- Defines container class for main layout and menubar-TOC -->
-  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'xxl:container'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'lg:container'"/>
 
   <xsl:import href="plugin:org.dita.base:xsl/common/output-message.xsl"/>
   <xsl:import href="plugin:org.dita.base:xsl/common/dita-utilities.xsl"/>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 34149d05..0a475547 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -22,7 +22,7 @@
   <xsl:param name="BOOTSTRAP_CSS_TABS" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_TABS_VERTICAL" select="'me-3'"/>
   <xsl:param name="BOOTSTRAP_CSS_ACCORDION" select="''"/>
-  <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_NAV" select="'bg-body-tertiary'"/>
+  <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_NAV" select="'bg-subtle-secondary'"/>
   <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_LINK" select="'btn btn-outline theme-primary btn-sm'"/>
   <xsl:param name="BOOTSTRAP_CSS_FIGURE" select="' w-100 mw-100 p-3 '"/>
   <xsl:param name="BOOTSTRAP_CSS_FIGURE_CAPTION" select="''"/>

From f9831f6fc6959efac08accb9acf5628c86327e7c Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Fri, 31 Jul 2026 12:59:37 +0200
Subject: [PATCH 15/87] Add missing ids

---
 sample/accordion.dita           | 16 ++++-----
 sample/alerts.dita              | 20 +++++------
 sample/badge.dita               |  8 ++---
 sample/bootstrap-extension.dita |  2 +-
 sample/bootstrap-table.dita     |  8 ++---
 sample/borders.dita             | 22 ++++++------
 sample/breadcrumb.dita          |  4 +--
 sample/button-group.dita        | 26 +++++++-------
 sample/buttons.dita             | 18 +++++-----
 sample/card.dita                | 32 +++++++++---------
 sample/carousel.dita            | 32 +++++++++---------
 sample/collapse.dita            | 10 +++---
 sample/color.dita               | 20 +++++------
 sample/containers.dita          |  2 +-
 sample/dark-mode.dita           |  2 +-
 sample/drawer.dita              | 20 +++++------
 sample/extension-points.dita    |  2 +-
 sample/figures.dita             |  6 ++--
 sample/grid.dita                |  8 ++---
 sample/icons.dita               | 16 ++++-----
 sample/images.dita              | 22 ++++++------
 sample/index.dita               | 16 ++++-----
 sample/list-group.dita          | 20 +++++------
 sample/nav.dita                 |  8 ++---
 sample/offline.dita             |  6 ++--
 sample/pagination.dita          | 30 ++++++++---------
 sample/popovers.dita            | 16 ++++-----
 sample/rtl.dita                 |  4 +--
 sample/sass.dita                |  6 ++--
 sample/search-box.dita          |  8 ++---
 sample/shadows.dita             | 10 +++---
 sample/spacing.dita             | 14 ++++----
 sample/tables.dita              | 60 ++++++++++++++++-----------------
 sample/tabs.dita                | 28 +++++++--------
 sample/tooltips.dita            | 14 ++++----
 sample/typography.dita          | 30 ++++++++---------
 36 files changed, 283 insertions(+), 283 deletions(-)

diff --git a/sample/accordion.dita b/sample/accordion.dita
index db69fba3..67d647e5 100644
--- a/sample/accordion.dita
+++ b/sample/accordion.dita
@@ -26,7 +26,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="how-it-works">
       <title>How it works</title>
       <p>The accordion uses
         <xref
@@ -36,7 +36,7 @@
         >collapse</xref> internally to make it collapsible. To render an accordion that’s expanded, add
         <xmlatt>open="yes"</xmlatt> to expand the relevant <xmlelement>accordion-item</xmlelement> .</p>
     </section>
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>Click the accordions below to expand/collapse the accordion content.</p>
     </section>
@@ -140,7 +140,7 @@
 &lt;/accordion&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="flush">
       <title>Flush</title>
       <p>Set <xmlatt>flush="yes"</xmlatt> to remove the default
         background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent
@@ -169,13 +169,13 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;bodydiv outputclass="accordion-flush"&gt;
   ...etc
 &lt;/bodydiv&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-1">
         <title>Specialization</title>
           <codeblock>&lt;accordion flush="yes"&gt;
   ...etc
@@ -183,7 +183,7 @@
         </section>
       </bodydiv>
 
-    <section>
+    <section id="always-open">
       <title>Always open</title>
       <p>Set <xmlatt>open="yes"</xmlatt> to make accordion items stay open when another item is opened.</p>
     </section>
@@ -216,13 +216,13 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;bodydiv outputclass="accordion-open"&gt;
   ...etc
 &lt;/bodydiv&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-2">
         <title>Specialization</title>
           <codeblock>&lt;accordion open="yes"&gt;
   ...etc
diff --git a/sample/alerts.dita b/sample/alerts.dita
index e08181d5..825f08ce 100644
--- a/sample/alerts.dita
+++ b/sample/alerts.dita
@@ -26,7 +26,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>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 <xmlatt>outputclass</xmlatt> to
@@ -99,12 +99,12 @@
       </section>
     </bodydiv>
 
-    <section>
+    <section id="additional-content">
       <title>Additional content</title>
       <p>Alerts can also contain additional HTML elements like headings, paragraphs, icons and links.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section outputclass="alert theme-success vstack">
+      <section id="well-done" outputclass="alert theme-success vstack">
         <title><ph 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
           <xref href="#">link</xref> is going to run a bit longer so that you can see how spacing within an alert works
@@ -113,7 +113,7 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;section outputclass="alert theme-success vstack"&gt;
   &lt;title&gt;&lt;i outputclass="bi bi-emoji-smile pe-2"/&gt;Well done!&lt;/title&gt;
@@ -127,7 +127,7 @@
   &lt;/p&gt;
 &lt;/section&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-1">
         <title>Specialization</title>
         <codeblock>&lt;alert color="success" outputclass="vstack"&gt;
   &lt;title&gt;&lt;icon outputclass="bi-emoji-smile" padding="e2"/&gt;Well done!&lt;/title&gt;
@@ -143,7 +143,7 @@
       </section>
     </bodydiv>
 
-    <section>
+    <section id="notes">
       <title>Notes</title>
       <p>DITA <xmlelement>note</xmlelement> elements are displayed as alerts according to the <xmlatt>type</xmlatt>
         attribute. With the exception <xmlatt>type="othertype"</xmlatt>, an icon is added if <xmlatt
@@ -204,7 +204,7 @@
       <note outputclass="theme-inverse">This is inverse note.</note>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;note type="note" outputclass="theme-primary"&gt;
   This is a primary note.&lt;/note&gt;
@@ -217,7 +217,7 @@
   This is inverse note.
 &lt;/note&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-2">
         <title>Specialization</title>
         <codeblock>&lt;note color="primary"&gt;
   This is a primary note.
@@ -243,7 +243,7 @@
       >This note uses a styled smile emoji.</note>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-3">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;note otherprops="icon(bi-search)" type="other" othertype="Search"&gt;
   This note has a search icon.
@@ -252,7 +252,7 @@
   This note uses a styled smile emoji.
 &lt;/note&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-3">
         <title>Specialization</title>
         <codeblock>&lt;note icon="bi-search" type="other" othertype="Search"&gt;
   This note has a search icon.
diff --git a/sample/badge.dita b/sample/badge.dita
index 60472c89..0084afb3 100644
--- a/sample/badge.dita
+++ b/sample/badge.dita
@@ -23,7 +23,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>Badges scale to match the size of the immediate parent element by using relative font sizing and
           <xmlatt>em</xmlatt> units. As of v5, badges no longer have focus or hover styles for links.</p>
@@ -51,7 +51,7 @@
 &lt;p&gt;Example Text &lt;badge&gt;New&lt;/badge&gt;&lt;/p&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="background-colors">
       <title>Background colors</title>
       <p>Set a background-color with contrasting foreground color with Bootstrap’s <codeph
         >theme-{color}</codeph> helpers. Previously it was required to manually pair your choice of <xmlatt
@@ -71,7 +71,7 @@
       </p>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ph outputclass="badge theme-primary"&gt;Primary&lt;/ph&gt;
 &lt;ph outputclass="badge theme-secondary"&gt;Secondary&lt;/ph&gt;
@@ -82,7 +82,7 @@
 &lt;ph outputclass="badge theme-accent"&gt;Accent&lt;/ph&gt;
 &lt;ph outputclass="badge theme-inverse"&gt;Inverse&lt;/ph&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-1">
         <title>Specialization</title>
           <codeblock>&lt;badge color="primary"&gt;Primary&lt;/badge&gt;
 &lt;badge color="secondary"&gt;Secondary&lt;/badge&gt;
diff --git a/sample/bootstrap-extension.dita b/sample/bootstrap-extension.dita
index 67efbd39..a1264c3a 100644
--- a/sample/bootstrap-extension.dita
+++ b/sample/bootstrap-extension.dita
@@ -33,7 +33,7 @@
       <image scalefit="yes" href="./src/extensions.png"/>
     </fig>
 
-    <section>
+    <section id="installing-the-dita-bootstrap-extension-plug-in">
       <title>Installing the <term>DITA Bootstrap Extension</term> plug-in</title>
       <p>Use the <cmdname>dita</cmdname> command to add the <term>DITA Bootstrap Extension</term>
        plug-in to your DITA Open Toolkit installation:</p>
diff --git a/sample/bootstrap-table.dita b/sample/bootstrap-table.dita
index 0d86672b..4d430835 100644
--- a/sample/bootstrap-table.dita
+++ b/sample/bootstrap-table.dita
@@ -33,7 +33,7 @@
     <note type="note">If you just want to style DITA tables with the standard Bootstrap table styles, you don’t need a 
       separate plug-in. See <xref href="tables.dita"/> for details on the output classes that the 
       <term>DITA Bootstrap</term> plug-in supports.</note>
-    <section>
+    <section id="installing-the-dita-bootstrap-table-plug-in">
       <title>Installing the <term>DITA Bootstrap Table</term> plug-in</title>
       <p>Use the <cmdname>dita</cmdname> command to add the <term>DITA Bootstrap Table</term>
        plug-in to your DITA Open Toolkit installation:</p>
@@ -41,7 +41,7 @@
         >install</parmname> org.dita-bootstrap.table</codeblock>
     </section>
 
-    <section>
+    <section id="search-and-filtering">
       <title>Search and Filtering</title>
       <p>Add <xmlelement>table otherprops="search"</xmlelement> to filter the results based on a search term.</p>
     </section>
@@ -52,7 +52,7 @@
     <codeblock>&lt;table otherprops="search"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
-    <section>
+    <section id="pagination">
       <title>Pagination</title>
       <p>Add <xmlelement>table otherprops="pagination"</xmlelement> to add a pagination footer to a large table.</p>
     </section>
@@ -63,7 +63,7 @@
     <codeblock>&lt;table otherprops="pagination"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
-    <section>
+    <section id="sorting">
       <title>Sorting</title>
       <p>Add <xmlelement>table otherprops="sortable"</xmlelement> to allow each column to be sorted dynamically.</p>
     </section>
diff --git a/sample/borders.dita b/sample/borders.dita
index 66977d17..49021435 100644
--- a/sample/borders.dita
+++ b/sample/borders.dita
@@ -47,14 +47,14 @@
 &lt;ph outputclass="border-bottom"&gt;...&lt;/ph&gt;
 &lt;ph outputclass="border-start"&gt;...&lt;/ph&gt;</codeblock>
 
-    <section>
+    <section id="border-specialization">
       <title>Border Specialization</title>
       <p>The <xmlatt>border</xmlatt> and <xmlatt
         >rounded</xmlatt> attributes provide a semantic way to add borders and rounded corners.</p>
     </section>
 
     <bodydiv outputclass="p-3 border">
-      <section outputclass="p-2 border">
+      <section id="bordered-section" outputclass="p-2 border">
         <title>Bordered Section</title>
         <p>This section has a border.</p>
       </section>
@@ -108,7 +108,7 @@
 &lt;/carousel&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="border-styling">
       <title>Border Styling</title>
       <p>The <xmlatt>border</xmlatt> attribute also accepts numeric values 1-5 for width. The <xmlatt
         >rounded</xmlatt> attribute 
@@ -126,7 +126,7 @@
       </div>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;ph outputclass="border border-1"&gt;Width 1&lt;/ph&gt;
 &lt;ph outputclass="border border-2"&gt;Width 2&lt;/ph&gt;
@@ -134,7 +134,7 @@
 &lt;ph outputclass="border border-4"&gt;Width 4&lt;/ph&gt;
 &lt;ph outputclass="border border-5"&gt;Width 5&lt;/ph&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-1">
         <title>Specialization</title>
         <codeblock>&lt;ph border="1"&gt;Width 1&lt;/ph&gt;
 &lt;ph border="2"&gt;Width 2&lt;/ph&gt;
@@ -153,14 +153,14 @@
       </div>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;ph outputclass="border border-primary"&gt;Primary&lt;/ph&gt;
 &lt;ph outputclass="border border-primary-subtle"&gt;Primary subtle&lt;/ph&gt;
 &lt;ph outputclass="border border-success"&gt;Success&lt;/ph&gt;
 &lt;ph outputclass="border border-danger"&gt;Danger&lt;/ph&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-2">
         <title>Specialization</title>
         <codeblock>&lt;ph bordercolor="primary"&gt;Primary&lt;/ph&gt;
 &lt;ph bordercolor="primary-subtle"&gt;Primary subtle&lt;/ph&gt;
@@ -180,7 +180,7 @@
       </div>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-3">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;ph outputclass="border rounded-0"&gt;Rounded 0&lt;/ph&gt;
 &lt;ph outputclass="border rounded-1"&gt;Rounded 1&lt;/ph&gt;
@@ -189,7 +189,7 @@
 &lt;ph outputclass="border rounded-4"&gt;Rounded 4&lt;/ph&gt;
 &lt;ph outputclass="border rounded-5"&gt;Rounded 5&lt;/ph&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-3">
         <title>Specialization</title>
         <codeblock>&lt;ph border="yes" rounded="0"&gt;Rounded 0&lt;/ph&gt;
 &lt;ph border="yes" rounded="1"&gt;Rounded 1&lt;/ph&gt;
@@ -207,12 +207,12 @@
       </div>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-4">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;ph outputclass="border rounded-circle border-info"&gt;Circle&lt;/ph&gt;
 &lt;ph outputclass="border rounded-pill border-warning"&gt;Pill&lt;/ph&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-4">
         <title>Specialization</title>
         <codeblock>&lt;ph border="yes" rounded="circle" bordercolor="info"&gt;Circle&lt;/ph&gt;
 &lt;ph border="yes" rounded="pill" bordercolor="warning"&gt;Pill&lt;/ph&gt;</codeblock>
diff --git a/sample/breadcrumb.dita b/sample/breadcrumb.dita
index dcfdf475..01405533 100644
--- a/sample/breadcrumb.dita
+++ b/sample/breadcrumb.dita
@@ -25,7 +25,7 @@
     <fig>
       <image scalefit="yes" href="./src/breadcrumb.png"/>
     </fig>
-    <section>
+    <section id="adding-breadcrumbs">
       <title>Adding breadcrumbs</title>
       <p>Breadcrumbs are not included by default. You can add a breadcrumb component to each page by setting the
         parameter <parmname>--args.breadcrumbs</parmname>=<option>yes</option>
@@ -35,7 +35,7 @@
      <parmname>--format</parmname>=<option>html5-bootstrap</option> \
      <parmname>--args.breadcrumbs</parmname>=<option>yes</option></codeblock>
     </section>
-    <section>
+    <section id="dividers">
       <title>Dividers</title>
       <p>Dividers are automatically added via CSS. They can be changed by setting the parameter
           <parmname>--bootstrap.breadcrumb.divider</parmname>. </p>
diff --git a/sample/button-group.dita b/sample/button-group.dita
index 406b96c9..176479f0 100644
--- a/sample/button-group.dita
+++ b/sample/button-group.dita
@@ -23,7 +23,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="basic-example">
       <title>Basic example</title>
       <p>Wrap a series of buttons with <xmlelement>xref outputclass="btn-*"</xmlelement> in a <xmlelement>div
           outputclass="btn-group"</xmlelement>
@@ -54,7 +54,7 @@
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="mixed-styles">
       <title>Mixed styles</title>
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
@@ -65,7 +65,7 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-group"&gt;
   &lt;xref outputclass="btn theme-danger" href="#"&gt;Left&lt;/xref&gt;
@@ -73,7 +73,7 @@
   &lt;xref outputclass="btn theme-success" href="#"&gt;Right&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-1">
         <title>Specialization</title>
           <codeblock>&lt;button-group&gt;
   &lt;button color="danger" href="#"&gt;Left&lt;/button&gt;
@@ -82,7 +82,7 @@
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="outlined-styles">
       <title>Outlined styles</title>
     </section>
     <bodydiv outputclass="p-3 border">
@@ -93,7 +93,7 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-group"&gt;
   &lt;xref outputclass="btn-outline theme-primary" href="#"&gt;Left&lt;/xref&gt;
@@ -101,7 +101,7 @@
   &lt;xref outputclass="btn-outline theme-primary" href="#"&gt;Right&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-2">
         <title>Specialization</title>
           <codeblock>&lt;button-group&gt;
   &lt;button color="primary" outline="yes" href="#"&gt;Left&lt;/button&gt;
@@ -110,7 +110,7 @@
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="button-toolbar">
       <title>Button toolbar</title>
       <p>Combine sets of button groups into button toolbars for more complex components.</p>
     </section>
@@ -133,7 +133,7 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-3">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-toolbar"&gt;
   &lt;div outputclass="btn-group me-2"&gt;
@@ -152,7 +152,7 @@
   &lt;/div&gt;
 &lt;/div&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-3">
         <title>Specialization</title>
           <codeblock>&lt;button-toolbar&gt;
   &lt;button-group outputclass="me-2"&gt;
@@ -172,7 +172,7 @@
 &lt;/button-toolbar&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="vertical-variation">
       <title>Vertical variation</title>
       <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
     </section>
@@ -184,7 +184,7 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-4">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-group-vertical"&gt;
   &lt;xref outputclass="btn theme-primary" href="#"&gt;Top&lt;/xref&gt;
@@ -192,7 +192,7 @@
   &lt;xref outputclass="btn theme-primary" href="#"&gt;Bottom&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-4">
         <title>Specialization</title>
           <codeblock>&lt;button-group vertical="yes"&gt;
   &lt;button color="primary" href="#"&gt;Top&lt;/button&gt;
diff --git a/sample/buttons.dita b/sample/buttons.dita
index 44f22e03..29100ebf 100644
--- a/sample/buttons.dita
+++ b/sample/buttons.dita
@@ -24,7 +24,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras
         thrown in for more control.</p>
@@ -65,7 +65,7 @@
         </section>
       </bodydiv>
 
-    <section>
+    <section id="outline-buttons">
       <title>Outline buttons</title>
       <p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with
         the <xmlatt>outputclass</xmlatt> and a value of <codeph
@@ -83,7 +83,7 @@
       <xref href="#" outputclass="btn btn-outline theme-inverse">Inverse</xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref href="#" outputclass="btn btn-outline theme-primary"&gt;Primary&lt;/xref&gt;
 &lt;xref href="#" outputclass="btn-outline theme-secondary"&gt;Secondary&lt;/xref&gt;
@@ -94,7 +94,7 @@
 &lt;xref href="#" outputclass="btn-outline theme-accent"&gt;Accent&lt;/xref&gt;
 &lt;xref href="#" outputclass="btn-outline theme-inverse"&gt;Inverse&lt;/xref&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-1">
         <title>Specialization</title>
           <codeblock>&lt;button href="#" outline="yes"&gt;Primary&lt;/button&gt;
 &lt;button href="#" color="secondary" outline="yes"&gt;Secondary&lt;/button&gt;
@@ -106,7 +106,7 @@
 &lt;button href="#" color="inverse" outline="yes"&gt;Inverse&lt;/button&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="sizing">
       <title>Sizing</title>
       <p>Fancy larger or smaller buttons? Use <xmlatt>size="large"</xmlatt> or
           <xmlatt>size="small"</xmlatt> for additional sizes.</p>
@@ -117,12 +117,12 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref href="#" outputclass="btn theme-primary btn-lg"&gt;Large button&lt;/xref&gt;
 &lt;xref href="#" outputclass="btn theme-secondary btn-lg"&gt;Large button&lt;/xref&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-2">
         <title>Specialization</title>
           <codeblock>&lt;button href="#" size="large"&gt;Large button&lt;/button&gt;
 &lt;button href="#" color="secondary" size="large"&gt;Large button&lt;/button&gt;</codeblock>
@@ -135,12 +135,12 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-3">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref href="#" outputclass="btn theme-primary btn-sm"&gt;Small button&lt;/xref&gt;
 &lt;xref href="#" outputclass="btn theme-secondary btn-sm"&gt;Small button&lt;/xref&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-3">
         <title>Specialization</title>
           <codeblock>&lt;button href="#" size="small"&gt;Small button&lt;/button&gt;
 &lt;button href="#" color="secondary" size="small"&gt;Small button&lt;/button&gt;</codeblock>
diff --git a/sample/card.dita b/sample/card.dita
index 77da9565..9c7aca9a 100644
--- a/sample/card.dita
+++ b/sample/card.dita
@@ -24,14 +24,14 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="about">
       <title>About</title>
       <p>A <b>card</b> 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.</p>
     </section>
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>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
@@ -48,7 +48,7 @@
       </p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section outputclass="card">
+      <section id="card-title" outputclass="card">
         <title>Card Title</title>
         <image scope="external" href="https://picsum.photos/400/200?a"/>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
@@ -75,14 +75,14 @@
 &lt;/card&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="titles-text-and-links">
       <title>Titles, text, and links</title>
       <p>Links are added and placed next to each other by altering the <xmlatt>outputclass</xmlatt> and adding
           <codeph>card-link</codeph> to an <xmlelement>xref</xmlelement> tag.</p>
       <p>Subtitles are used by adding a <xmlelement>div</xmlelement> element.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section outputclass="card">
+      <section id="card-title-1" outputclass="card">
         <title>Card Title</title>
         <div outputclass="h6">Card Subtitle</div>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
@@ -91,7 +91,7 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section outputclass="card w-50"&gt;
   &lt;title outputclass="h5"&gt;Card Title&lt;/title&gt;
@@ -101,7 +101,7 @@
   &lt;xref outputclass="card-link" href="#"&gt;Another Link&lt;/xref&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-1">
         <title>Specialization</title>
           <codeblock>&lt;card&gt;
   &lt;title&gt;Card Title&lt;/title&gt;
@@ -112,7 +112,7 @@
 &lt;/card&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="images">
       <title>Images</title>
       <p>The first <xmlelement>image</xmlelement> within a <xmlelement
         >card</xmlelement> places an image to the top of the card
@@ -129,14 +129,14 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section outputclass="card w-50"&gt;
   &lt;image outputclass="card-img-top" href="..." /&gt;
   &lt;p&gt;Some quick example text to build on the card title and make up the bulk of the card’s content.&lt;/p&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-2">
         <title>Specialization</title>
           <codeblock>&lt;card&gt;
   &lt;image href="..." /&gt;
@@ -144,14 +144,14 @@
 &lt;/card&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="header-and-footer">
       <title>Header and footer</title>
       <p>Add an optional header and/or footer within a card using the <xmlelement
         >card-header</xmlelement> and <xmlelement>card-footer</xmlelement> elements.
       </p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section outputclass="card">
+      <section id="special-title-treatment" outputclass="card">
         <title>Special title treatment</title>
         <div outputclass="card-header">Featured</div>
         <p>With supporting text below as a natural lead-in to additional content.</p>
@@ -160,7 +160,7 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-3">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section outputclass="card w-50"&gt;
   &lt;div outputclass="card-header"&gt;Featured&lt;/div&gt;
@@ -169,7 +169,7 @@
   &lt;xref href="#" outputclass="btn-primary"&gt;Go somewhere&lt;/xref&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-3">
         <title>Specialization</title>
           <codeblock>&lt;card&gt;
   &lt;card-header&gt;Featured&lt;/card-header&gt;
@@ -180,13 +180,13 @@
 &lt;/card&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="card-colors">
       <title>Card Colors</title>
       <p>A card can be colorized by adding a <xmlatt>color</xmlatt> attribute. This
         applies a contextual background color.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section outputclass="card text-bg-success">
+      <section id="card-title-2" outputclass="card text-bg-success">
         <title>Card Title</title>
         <image scope="external" href="https://picsum.photos/400/200?a"/>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
diff --git a/sample/carousel.dita b/sample/carousel.dita
index 0ac2b96e..c9f4d05f 100644
--- a/sample/carousel.dita
+++ b/sample/carousel.dita
@@ -101,7 +101,7 @@
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel" otherprops="indicators(true)"&gt;
   &lt;li&gt;
@@ -115,7 +115,7 @@
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-1">
         <title>Specialization</title>
           <codeblock>&lt;carousel indicators="yes"&gt;
   &lt;carousel-item&gt;
@@ -157,7 +157,7 @@
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel"&gt;
   &lt;li&gt;
@@ -180,7 +180,7 @@
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-2">
         <title>Specialization</title>
           <codeblock>&lt;carousel&gt;
   &lt;carousel-item&gt;
@@ -259,7 +259,7 @@ And, kept unused, the user so destroys it.</lines>
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-3">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel"&gt;
   &lt;li&gt;
@@ -288,7 +288,7 @@ And, kept unused, the user so destroys it.</lines>
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-3">
         <title>Specialization</title>
           <codeblock>&lt;carousel&gt;
   &lt;carousel-item&gt;
@@ -343,7 +343,7 @@ And, kept unused, the user so destroys it.</lines>
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-4">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel"&gt;
   &lt;li&gt;
@@ -363,7 +363,7 @@ And, kept unused, the user so destroys it.</lines>
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-4">
         <title>Specialization</title>
           <codeblock>&lt;carousel&gt;
   &lt;carousel-item&gt;
@@ -483,7 +483,7 @@ And, kept unused, the user so destroys it.</lines>
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-5">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel-fade"&gt;
   &lt;li&gt;
@@ -497,7 +497,7 @@ And, kept unused, the user so destroys it.</lines>
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-5">
         <title>Specialization</title>
           <codeblock>&lt;carousel fade="yes"&gt;
   &lt;carousel-item&gt;
@@ -534,7 +534,7 @@ And, kept unused, the user so destroys it.</lines>
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-6">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel" otherprops="autoplay(false)"&gt;
   &lt;li&gt;
@@ -548,7 +548,7 @@ And, kept unused, the user so destroys it.</lines>
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-6">
         <title>Specialization</title>
           <codeblock>&lt;carousel autoplay="no"&gt;
   &lt;carousel-item&gt;
@@ -604,7 +604,7 @@ And, kept unused, the user so destroys it.</lines>
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-7">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel"&gt;
   &lt;li otherprops="interval(2000)"&gt;
@@ -618,7 +618,7 @@ And, kept unused, the user so destroys it.</lines>
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-7">
         <title>Specialization</title>
           <codeblock>&lt;carousel&gt;
   &lt;carousel-item interval="2000"&gt;
@@ -652,7 +652,7 @@ And, kept unused, the user so destroys it.</lines>
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-8">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel" otherprops="touch(false)"&gt;
   &lt;li&gt;
@@ -666,7 +666,7 @@ And, kept unused, the user so destroys it.</lines>
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-8">
         <title>Specialization</title>
           <codeblock>&lt;carousel touch="no"&gt;
   &lt;carousel-item&gt;
diff --git a/sample/collapse.dita b/sample/collapse.dita
index e44e4203..9b3beb19 100644
--- a/sample/collapse.dita
+++ b/sample/collapse.dita
@@ -18,14 +18,14 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="how-it-works">
       <title>How it works</title>
       <p>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.</p>
     </section>
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>Below is a collapsed example that is displayed when the button is clicked. Add
           <xmlatt>props="collapse-toggle"</xmlatt> to an <xmlelement>xref</xmlelement> element to associate a button to
@@ -70,7 +70,7 @@
 &lt;/collapse&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="horizontal">
       <title>Horizontal</title>
       <p>The collapse plugin also supports horizontal collapsing. Add <xmlatt>outputclass="collapse-horizontal"</xmlatt>
         to transition the width instead of height and set an <xmlatt>otherprops="style(width: ...)</xmlatt> on the
@@ -88,7 +88,7 @@
     </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;p&gt;
   &lt;xref outputclass="btn-primary" props="collapse-toggle" href="#collapse2"&gt;Toggle Width Collapse&lt;/xref&gt;
@@ -99,7 +99,7 @@
   &lt;/div&gt;
 &lt;/bodydiv&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-1">
         <title>Specialization</title>
           <codeblock>&lt;p&gt;
   &lt;button props="collapse-toggle" href="#collapse2"&gt;Toggle Width Collapse&lt;/button&gt;
diff --git a/sample/color.dita b/sample/color.dita
index d945a516..b8670d9c 100644
--- a/sample/color.dita
+++ b/sample/color.dita
@@ -17,7 +17,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="colors">
       <title>Colors</title>
       <p>Colorize text and backgrounds with color utilities. The <xmlatt
         >color</xmlatt> attribute provides a semantic way to apply standard Bootstrap color themes.</p>
@@ -59,14 +59,14 @@
       </section>
     </bodydiv>
 
-    <section>
+    <section id="base-dita-elements">
       <title>Base DITA Elements</title>
       <p
       >Decoration attributes can be applied to many base DITA elements to add background color and contrasting text.</p>
     </section>
 
     <bodydiv outputclass="p-3 border">
-      <section outputclass="mt-2 bg-primary fg-contrast-primary">
+      <section id="section-decoration" outputclass="mt-2 bg-primary fg-contrast-primary">
         <title>Section Decoration</title>
         <p>This section has a primary color background.</p>
       </section>
@@ -118,7 +118,7 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;section outputclass="bg-primary fg-contrast-primary"&gt;
   &lt;title&gt;Section Decoration&lt;/title&gt;
@@ -168,7 +168,7 @@
   ...
 &lt;/note&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-1">
         <title>Specialization</title>
         <codeblock>&lt;section color="primary"&gt;
   &lt;title&gt;Section Decoration&lt;/title&gt;
@@ -219,7 +219,7 @@
       </section>
     </bodydiv>
 
-    <section>
+    <section id="specialized-elements">
       <title>Specialized Elements</title>
       <p>Many specialized components also support the <xmlatt>color</xmlatt> attribute for consistent theming.</p>
     </section>
@@ -227,7 +227,7 @@
     <bodydiv outputclass="p-3 border">
 
       <image scope="external" href="https://picsum.photos/100/100?a" outputclass="img-thumbnail bg-warning"/>
-      <section outputclass="card theme-success mt-2 w-50">
+      <section id="card-title" outputclass="card theme-success mt-2 w-50">
         <title>Card Title</title>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
       </section>
@@ -258,7 +258,7 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;img src="..." class="img-thumbnail bg-warning"/&gt;
 
@@ -278,7 +278,7 @@
   ...
 &lt;/ul&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-2">
         <title>Specialization</title>
         <codeblock>&lt;thumbnail href="..." color="warning"/&gt;
 
@@ -313,7 +313,7 @@
       </section>
     </bodydiv>
 
-    <section>
+    <section id="text-color">
       <title>Text Color</title>
       <p>For text-only colorization, the <xmlatt>outputclass</xmlatt> attribute remains the primary method.</p>
     </section>
diff --git a/sample/containers.dita b/sample/containers.dita
index d5346496..199f2856 100644
--- a/sample/containers.dita
+++ b/sample/containers.dita
@@ -22,7 +22,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="how-they-work">
       <title>How they work</title>
       <p>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
diff --git a/sample/dark-mode.dita b/sample/dark-mode.dita
index 9dcd579e..c2b1b179 100644
--- a/sample/dark-mode.dita
+++ b/sample/dark-mode.dita
@@ -24,7 +24,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>To add a color mode toggler to the menu bar, add a series of <xmlelement
         >button</xmlelement> elements with the attributes <xmlatt>data-bs-theme="light"</xmlatt> or <xmlatt
diff --git a/sample/drawer.dita b/sample/drawer.dita
index 20fafec7..ce1bf623 100644
--- a/sample/drawer.dita
+++ b/sample/drawer.dita
@@ -26,7 +26,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="how-it-works">
       <title>How it works</title>
       <p>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,
@@ -42,7 +42,7 @@
       <p>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.</p>
     </section>
-    <section>
+    <section id="drawer-components">
       <title>Drawer components</title>
       <p>Below is an drawer example that is displayed when the button is clicked. Add
           <xmlatt>props="drawer-toggle"</xmlatt> to an <xmlelement>xref</xmlelement> element to associate a button to
@@ -81,7 +81,7 @@
 &lt;/drawer&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="placement">
       <title>Placement</title>
       <p>There’s no default placement for drawer components, so you must add one of the modifier outputclasses
         below</p>
@@ -108,13 +108,13 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section outputclass="drawer-end" id="drawer2"&gt;
   ...etc
 &lt;/section&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-1">
         <title>Specialization</title>
           <codeblock>&lt;drawer position="end"&gt;
   ...etc
@@ -129,20 +129,20 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section outputclass="drawer-bottom" id="drawer3"&gt;
   ...etc
 &lt;/section&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-2">
         <title>Specialization</title>
           <codeblock>&lt;drawer position="bottom"&gt;
   ...etc
 &lt;/drawer&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="responsive">
       <title>Responsive</title>
       <p
       >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, <xmlatt
@@ -167,7 +167,7 @@
       <li><xmlatt>outputclass="drawer-xxl"</xmlatt></li>
     </ul>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-3">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;note outputclass="d-none lg:d-block"&gt;
   Resize your browser to show the responsive drawer toggle.
@@ -182,7 +182,7 @@
   &lt;/p&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-3">
         <title>Specialization</title>
           <codeblock>&lt;note color="info" outputclass="d-none lg:d-block"&gt;
   Resize your browser to show the responsive drawer toggle.
diff --git a/sample/extension-points.dita b/sample/extension-points.dita
index b98c5c1f..483e2f26 100644
--- a/sample/extension-points.dita
+++ b/sample/extension-points.dita
@@ -26,7 +26,7 @@
     </metadata>
   </prolog>
   <body>
-    <section>
+    <section id="extending-bootstrap">
       <title>Extending Bootstrap</title>
       <p>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 <term>DITA
diff --git a/sample/figures.dita b/sample/figures.dita
index 9e6eac48..ee904a13 100644
--- a/sample/figures.dita
+++ b/sample/figures.dita
@@ -32,7 +32,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>By default <xmlelement>figure</xmlelement> elements are styled as shown: </p>
     </section>
@@ -46,7 +46,7 @@
   &lt;title&gt;A caption for the image.&lt;/title&gt;
   &lt;image href="..."/&gt;
 &lt;/fig&gt;</codeblock>
-    <section>
+    <section id="aligning-text">
       <title>Aligning text</title>
       <p>The figure’s caption can be aligned using the Bootstrap
         <xref href="./color.dita" format="dita">text utilities</xref>.</p>
@@ -62,7 +62,7 @@
   &lt;image href="..."/&gt;
 &lt;/fig&gt;</codeblock>
 
-    <section>
+    <section id="adding-borders">
       <title>Adding borders</title>
       <p>Use the DITA <xmlatt>frame</xmlatt> attribute to add
         <xref href="./borders.dita" format="dita">borders</xref> to a <xmlelement>fig</xmlelement>.</p>
diff --git a/sample/grid.dita b/sample/grid.dita
index e6b290fa..2887f518 100644
--- a/sample/grid.dita
+++ b/sample/grid.dita
@@ -25,7 +25,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>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
@@ -75,7 +75,7 @@
 &lt;/grid-row&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="equal-width">
       <title>Equal-width</title>
       <p>For example, here are two grid layouts that apply to every device and viewport, from <codeph>xs</codeph> to
           <codeph>xxl</codeph>. Add any number of unit-less classes for each breakpoint you need and every column will
@@ -103,7 +103,7 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;bodydiv outputclass="row"&gt;
   &lt;bodydiv outputclass="col"&gt;
@@ -125,7 +125,7 @@
   &lt;/bodydiv&gt;
 &lt;/bodydiv&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-1">
         <title>Specialization</title>
         <codeblock>&lt;grid-row&gt;
   &lt;grid-col&gt;
diff --git a/sample/icons.dita b/sample/icons.dita
index 0a0d15b5..124f8b33 100644
--- a/sample/icons.dita
+++ b/sample/icons.dita
@@ -19,7 +19,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="bootstrap-icons">
       <title>Bootstrap Icons</title>
       <p>
         <xref href="https://icons.getbootstrap.com/" format="html" scope="external">Bootstrap Icons</xref> is a growing
@@ -28,7 +28,7 @@
         >Link</xmlelement> to the default Bootstrap Icons CDN set is included by default. </p>
     </section>
 
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>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., <xmlelement>icon
@@ -98,7 +98,7 @@
     </p>
   </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref outputclass="link theme-primary" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt; Primary link
@@ -126,7 +126,7 @@
 &lt;/xref&gt;
 </codeblock>
         </section>
-         <section>
+         <section id="specialization-1">
         <title>Specialization</title>
           <codeblock>&lt;xref color="primary" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Primary link
@@ -168,7 +168,7 @@
       <xref outputclass="btn-floating m-1 btn theme-primary" href="#"><ph outputclass="bi bi-share-fill"/></xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref outputclass="btn theme-primary btn-floating m-1" href="#"&gt;
   &lt;i outputclass="bi-arrow-down-square-fill"/&gt;
@@ -189,7 +189,7 @@
   &lt;i outputclass="bi-share-fill"/&gt;
 &lt;/xref&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-2">
         <title>Specialization</title>
           <codeblock>&lt;button outputclass="btn-floating m-1" href="#"&gt;
   &lt;icon outputclass="bi-arrow-down-square-fill"/&gt;
@@ -237,7 +237,7 @@
   &lt;/topicref&gt;
   ...
 &lt;/chapter&gt;</codeblock>
-    <section>
+    <section id="installing-other-icons">
       <title>Installing other icons</title>
       <p>Other icon sets such as
         <xref href="https://fontawesome.com/" format="html" scope="external">Font Awesome</xref>
@@ -256,7 +256,7 @@
      <parmname>--icons.include</parmname>=<option>yes</option> \
      <parmname>--icons.cdn.path</parmname>=<filepath>path/to/icon-cdn-header.xml</filepath></codeblock>
     </section>
-    <section>
+    <section id="excluding-icons">
       <title>Excluding icons</title>
       <indexterm><parmname>--icons.cdn.path</parmname></indexterm>
       <indexterm><parmname>--icons.include</parmname></indexterm>
diff --git a/sample/images.dita b/sample/images.dita
index 196aa67f..8d0bd65d 100644
--- a/sample/images.dita
+++ b/sample/images.dita
@@ -25,7 +25,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="responsive-images">
       <title>Responsive images</title>
       <p>Images in DITA Bootstrap are made responsive with <xmlatt>scalefit="yes"</xmlatt>. This applies
           <codeph>max-width: 100%;</codeph> and <codeph>height: auto;</codeph> to the image so that it scales with the
@@ -35,7 +35,7 @@
       <image scalefit="yes" scope="external" href="https://picsum.photos/1200/600?a"/>
     </bodydiv>
         <codeblock>&lt;image scalefit="yes" href="..." /&gt;</codeblock>
-    <section>
+    <section id="image-thumbnails">
       <title>Image thumbnails</title>
       <p>In addition to Bootstrap’s
         <xref href="https://getbootstrap.com/docs/5.3/utilities/borders/" format="html" scope="external">border-radius
@@ -55,7 +55,7 @@
         <codeblock>&lt;thumbnail href="..." /&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="separate-images-for-dark-and-light-mode">
       <title>Separate images for dark and light mode</title>
       <p>Use the <xmlatt>outputclass="d-auto"</xmlatt>, <xmlatt>outputclass="d-light"</xmlatt>,
         and <xmlatt>outputclass="d-dark"</xmlatt> attributes on <xmlelement>image</xmlelement> elements
@@ -79,7 +79,7 @@
       </fig>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock> &lt;fig&gt;
   &lt;image outputclass="img-thumbnail d-auto" href="..."/&gt;
@@ -87,7 +87,7 @@
   &lt;image outputclass="img-thumbnail d-dark" href="..." deliveryTarget="html"/&gt;
 &lt;/fig&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-1">
         <title>Specialization</title>
         <codeblock> &lt;fig&gt;
   &lt;thumbnail outputclass="d-auto" href="..."/&gt;
@@ -96,23 +96,23 @@
 &lt;/fig&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="support-lazy-loading">
       <title>Support Lazy Loading</title>
       <p>Use the <xmlatt>loading="lazy"</xmlatt> attribute on <xmlelement>image</xmlelement> elements
         to wait until an image is on screen before loading.
       </p>
     </section>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;image otherprops="loading(lazy)" href="..."/&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-2">
         <title>Specialization</title>
         <codeblock>&lt;image loading="lazy" href="..."/&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="support-html-picture-element">
       <title>Support HTML <xmlelement>picture</xmlelement> element</title>
       <p>Use the specialized <xmlelement>picture</xmlelement> element
       holding multiple <xmlelement>image</xmlelement> elements to display different images on
@@ -130,7 +130,7 @@
       </div>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-3">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;div outputclass="d-picture"&gt;
   &lt;image otherprops="media(min-width: 700px)" href="..."/&gt;
@@ -140,7 +140,7 @@
   &lt;image href="..."/&gt;
 &lt;/div&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-3">
         <title>Specialization</title>
         <codeblock>&lt;picture&gt;
   &lt;image media="min-width: 700px" href="..."/&gt;
diff --git a/sample/index.dita b/sample/index.dita
index 6cec62e7..3011b81b 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -26,7 +26,7 @@
     </metadata>
   </prolog>
   <body>
-    <section>
+    <section id="installing">
       <title>Installing</title>
       <p>Use the <cmdname>dita</cmdname> command to add this plug-in to your DITA Open Toolkit installation:</p>
     </section>
@@ -51,14 +51,14 @@
           >--install</parmname> https://github.com/dita-bootstrap/dita-bootstrap.html/archive/master.zip</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="using">
       <title>Using</title>
       <p>Specify the <option>html5-bootstrap</option> format when building output with the <cmdname>dita</cmdname>
         command:</p>
       <codeblock outputclass="language-bash"><cmdname>dita</cmdname> <parmname
         >--input</parmname>=path/to/your.ditamap <parmname>--format</parmname>=html5-bootstrap</codeblock>
     </section>
-    <section>
+    <section id="bootswatch-themes">
       <title>Bootswatch themes</title>
       <indexterm><parmname>--bootstrap.theme</parmname></indexterm>
       <p>Alternate Bootstrap themes can be downloaded directly from
@@ -455,7 +455,7 @@
         <xref href="https://dita-bootstrap.github.io/" format="html" scope="external">dita-bootstrap.github.io</xref>.
       </note>
     </section>
-    <section>
+    <section id="custom-css">
       <title>Custom CSS</title>
       <indexterm><parmname>--args.css</parmname></indexterm>
       <indexterm><parmname>--args.copycss</parmname></indexterm>
@@ -483,7 +483,7 @@
           scope="external"
         >dita-bootstrap.sass</xref> plug-in.</note>
     </section>
-    <section>
+    <section id="customizing-headers-footers-and-sidebars">
       <title>Customizing headers, footers and sidebars</title>
       <indexterm><parmname>--args.hdr</parmname></indexterm>
       <indexterm><parmname>--args.ftr</parmname></indexterm>
@@ -589,7 +589,7 @@
           scope="external"
         >dita-bootstrap.github.io</xref>. </note>
     </section>
-    <section>
+    <section id="common-bootstrap-utility-classes">
       <title>Common Bootstrap utility classes</title>
       <indexterm><parmname>--bootstrap.css.shortdesc</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.codeblock</parmname></indexterm>
@@ -846,7 +846,7 @@
         </plentry>
       </parml>
     </section>
-    <section>
+    <section id="bootstrap-icons-for-dita-notes">
       <title>Bootstrap icons for DITA notes</title>
       <indexterm><parmname>--bootstrap.icon.note</parmname></indexterm>
       <indexterm><parmname>--bootstrap.icon.attention</parmname></indexterm>
@@ -961,7 +961,7 @@
         </plentry>
       </parml>
     </section>
-    <section>
+    <section id="optional-elements">
       <title>Optional elements</title>
       <indexterm><parmname>--args.breadcrumbs</parmname></indexterm>
       <indexterm><parmname>--icons.include</parmname></indexterm>
diff --git a/sample/list-group.dita b/sample/list-group.dita
index 508dcbc1..c2369dee 100644
--- a/sample/list-group.dita
+++ b/sample/list-group.dita
@@ -26,7 +26,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="basic-example">
       <title>Basic example</title>
       <p>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.</p>
@@ -62,7 +62,7 @@
 &lt;/list-group&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="compacted-list-group">
       <title>Compacted list group</title>
       <p>Add <xmlatt>compact="yes"</xmlatt> to reduce the padding of list items</p>
     </section>
@@ -74,20 +74,20 @@
       </ul>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ul outputclass="list-group" compact="yes" &gt;
   ...
 &lt;/ul&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-1">
         <title>Specialization</title>
           <codeblock>&lt;list-group compact="yes"&gt;
   ...
 &lt;/list-group&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="expanded-list-group">
       <title>Expanded list group</title>
       <p>Add <xmlatt>compact="no"</xmlatt> to increase the padding of list items</p>
     </section>
@@ -99,20 +99,20 @@
       </ul>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ul outputclass="list-group" compact="no" &gt;
   ...
 &lt;/ul&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-2">
         <title>Specialization</title>
           <codeblock>&lt;list-group compact="no"&gt;
   ...
 &lt;/list-group&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="flush">
       <title>Flush</title>
       <p>Add a <xmlatt>flush="yes"</xmlatt> to remove some borders and
         rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p>
@@ -127,7 +127,7 @@
       </ul>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-3">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ul outputclass="list-group-flush"&gt;
   &lt;li&gt;An item&lt;/li&gt;
@@ -137,7 +137,7 @@
   &lt;li&gt;And a fifth one&lt;/li&gt;
 &lt;/ul&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-3">
         <title>Specialization</title>
           <codeblock>&lt;list-group flush="yes"&gt;
   &lt;li&gt;An item&lt;/li&gt;
diff --git a/sample/nav.dita b/sample/nav.dita
index 857beaaa..29acb085 100644
--- a/sample/nav.dita
+++ b/sample/nav.dita
@@ -25,7 +25,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="sidebar">
       <title>Sidebar</title>
       <p>The plug-in extends the standard HTML5 table of contents (ToC)
         <xref
@@ -169,7 +169,7 @@
 
 
     </section>
-    <section>
+    <section id="menu-bar">
       <title>Menu bar</title>
       <p>Additionally, the first-level navigation menu can be switched to a horizontal Bootstrap navbar to reduce the
         depth of the ToC. To use this option, add the <parmname>--menubar-toc.include</parmname>=<option
@@ -184,7 +184,7 @@
         <image scalefit="yes" href="./src/menubar-toc.png"/>
       </fig>
     </section>
-    <section>
+    <section id="top-bar">
       <title>Top bar</title>
       <p>A collapsible menu placed above the main menu can be included
         by adding the <parmname>--bootstrap.topbar.hdr</parmname> parameter to the
@@ -204,7 +204,7 @@
           scope="external"
         >custom header</xref>.</p>
     </section>
-    <section>
+    <section id="dividers">
       <title>Dividers</title>
       <p>
         <xref
diff --git a/sample/offline.dita b/sample/offline.dita
index b5e68b3f..855982c5 100644
--- a/sample/offline.dita
+++ b/sample/offline.dita
@@ -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.</note>
 
-    <section>
+    <section id="procedure">
       <title>Procedure</title>
       <ol>
         <li>
@@ -130,7 +130,7 @@
         </li>
       </ol>
     </section>
-    <section>
+    <section id="results">
       <title>Results</title>
       <p>The plug-in directory has the following layout and files:</p>
       <codeblock outputclass="language-bash">com.example.bootstrap-offline
@@ -141,7 +141,7 @@
 └── process_offline.xml</codeblock>
     </section>
 
-    <section>
+    <section id="what-to-do-next">
       <title>What to do next</title>
       <ol>
         <li>Run <cmdname>dita</cmdname>
diff --git a/sample/pagination.dita b/sample/pagination.dita
index ba60bfbd..ab0eb26e 100644
--- a/sample/pagination.dita
+++ b/sample/pagination.dita
@@ -36,7 +36,7 @@
   </prolog>
   <body outputclass="language-markup">
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <section outputclass="pagination">
+      <section id="page-navigation-example" outputclass="pagination">
         <title>Page navigation example</title>
         <ol>
           <li>
@@ -85,13 +85,13 @@
 &lt;/pagination&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="sizing">
       <title>Sizing</title>
       <p>Fancy larger or smaller pagination? Use <xmlatt>size="large"</xmlatt> or
           <xmlatt>size="small"</xmlatt> for additional sizes.</p>
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <section outputclass="pagination pagination-lg">
+      <section id="page-navigation-example-1" outputclass="pagination pagination-lg">
         <title>Page navigation example</title>
         <ol>
           <li>
@@ -113,7 +113,7 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
@@ -126,7 +126,7 @@
   &lt;/ol&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-1">
         <title>Specialization</title>
           <codeblock>&lt;pagination size="large"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
@@ -141,7 +141,7 @@
         </section>
       </bodydiv>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <section outputclass="pagination pagination-sm">
+      <section id="page-navigation-example-2" outputclass="pagination pagination-sm">
         <title>Page navigation example</title>
         <ol>
           <li>
@@ -163,7 +163,7 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
@@ -176,7 +176,7 @@
   &lt;/ol&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-2">
         <title>Specialization</title>
           <codeblock>&lt;pagination size="small"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
@@ -190,7 +190,7 @@
 &lt;/pagination&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="alignment">
       <title>Alignment</title>
       <p>Change the alignment of pagination component by appending Bootstrap
         <xref
@@ -202,7 +202,7 @@
       </p>
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <section outputclass="justify-content-center pagination">
+      <section id="page-navigation-example-3" outputclass="justify-content-center pagination">
         <title>Page navigation example</title>
         <ol>
           <li>
@@ -224,7 +224,7 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-3">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
@@ -237,7 +237,7 @@
   &lt;/ol&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-3">
         <title>Specialization</title>
           <codeblock>&lt;pagination outputclass="justify-content-center"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
@@ -252,7 +252,7 @@
         </section>
       </bodydiv>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <section outputclass="justify-content-end pagination">
+      <section id="page-navigation-example-4" outputclass="justify-content-end pagination">
         <title>Page navigation example</title>
         <ol>
           <li>
@@ -274,7 +274,7 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-4">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
@@ -287,7 +287,7 @@
   &lt;/ol&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-4">
         <title>Specialization</title>
           <codeblock>&lt;pagination outputclass="justify-content-end"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
diff --git a/sample/popovers.dita b/sample/popovers.dita
index 2f0e30a6..23070357 100644
--- a/sample/popovers.dita
+++ b/sample/popovers.dita
@@ -28,7 +28,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="overview">
       <title>Overview</title>
       <p>Things to know when using the tooltip plugin:</p>
       <ul>
@@ -46,7 +46,7 @@
       </ul>
     </section>
 
-    <section deliveryTarget="html">
+    <section id="examples" deliveryTarget="html">
       <title>Examples</title>
       <p>Keep reading to see how popovers work with some examples.</p>
     </section>
@@ -75,7 +75,7 @@
         </section>
       </bodydiv>
 
-    <section>
+    <section id="four-directions">
       <title>Four directions</title>
       <p>Four options are available: <codeph>top</codeph>, <codeph>right</codeph>, <codeph>bottom</codeph>, and
           <codeph>left</codeph> aligned. Directions are mirrored when using Bootstrap in RTL. To enable popovers, add
@@ -94,7 +94,7 @@
         <desc>Left popover</desc> Popover on left </xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref href="#" outputclass="btn-secondary popover-top"&gt;
   &lt;desc&gt;Top popover&lt;/desc&gt;
@@ -113,7 +113,7 @@
   Popover on left
 &lt;/xref&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-1">
         <title>Specialization</title>
           <codeblock>&lt;popover outputclass="btn-secondary" position="top"&gt;
   &lt;desc&gt;Top popover&lt;/desc&gt;
@@ -133,7 +133,7 @@
 &lt;/popover&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="custom-popovers">
       <title>Custom popovers</title>
       <p>You can customize the appearance of popovers using CSS variables.
         We set a custom class with <codeph
@@ -155,7 +155,7 @@
           <desc>And here’s some amazing content. It’s very engaging. Right?</desc>Custom popover</xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref href="#" outputclass="btn-lg btn-danger popover-top"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
@@ -164,7 +164,7 @@
   Custom popover
 &lt;/xref&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-2">
         <title>Specialization</title>
           <codeblock>&lt;popover outputclass="btn-lg btn-danger"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
diff --git a/sample/rtl.dita b/sample/rtl.dita
index 793fd58e..64dc3a49 100644
--- a/sample/rtl.dita
+++ b/sample/rtl.dita
@@ -23,7 +23,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="loading-the-right-to-left-stylesheet">
       <title>Loading the Right-to-Left stylesheet</title>
       <p>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 @@
      <parmname>--format</parmname>=<option>html5-bootstrap</option> \
      <parmname>--bidi.include</parmname>=<option>yes</option></codeblock>
     </section>
-    <section>
+    <section id="using-ltr-and-rtl-languages-in-the-same-topic">
       <title>Using LTR and RTL languages in the same topic</title>
       <p>The overall layout is always defined by the <parmname>--defaultLanguage</parmname> parameter.</p>
       <p>To render an article as RTL across the page, set the <xmlelement>topic xml:lang=".."</xmlelement> to an RTL
diff --git a/sample/sass.dita b/sample/sass.dita
index 2ff2a110..64198710 100644
--- a/sample/sass.dita
+++ b/sample/sass.dita
@@ -27,7 +27,7 @@
   <body outputclass="language-markup">
     <p>This approach allows you to modify additional aspects of Bootstrap’s default presentation, beyond what you can do
       with CSS alone.</p>
-    <section>
+    <section id="installing">
       <title>Installing</title>
       <p>Use the <cmdname>dita</cmdname> command to add the required plug-ins to your DITA Open Toolkit
         installation:</p>
@@ -40,7 +40,7 @@
         successfully. To download and install a copy, follow the instructions for your operating system on the
         <xref href="https://nodejs.org/en/download/" format="html" scope="external">download page</xref>.</note>
     </section>
-    <section>
+    <section id="generating-a-css-theme-from-sass">
       <title>Generating a CSS theme from Sass</title>
       <p>To generate a CSS theme from your custom Sass source files, follow the instructions in the
         <xref
@@ -59,7 +59,7 @@
           scope="external"
         ><filepath>dita-bootstrap.sass/sass/index.html</filepath></xref> file in a web browser.</p>
     </section>
-    <section>
+    <section id="using-the-generated-theme">
       <title>Using the generated theme</title>
       <p>To use a pregenerated Sass theme as CSS in the HTML Bootstrap output, run the <option>html5-bootstrap</option>
         transformation and pass the <parmname>bootstrap.sass</parmname> parameter to the <cmdname>dita</cmdname>
diff --git a/sample/search-box.dita b/sample/search-box.dita
index b1da45f1..5149026a 100644
--- a/sample/search-box.dita
+++ b/sample/search-box.dita
@@ -28,7 +28,7 @@
       <image scalefit="yes" href="./src/search-result.png"/>
     </fig>
 
-    <section>
+    <section id="adding-a-search-function">
       <title>Adding a search function</title>
       <p>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.</p>
     </section>
 
-    <section>
+    <section id="installing-the-dita-bootstrap-lunr-search-plug-in">
       <title>Installing the <term>DITA Bootstrap Lunr Search</term> plug-in</title>
       <p>Use the <cmdname>dita</cmdname> command to add the <term>DITA Bootstrap Lunr Search</term>
        plug-in to your DITA Open Toolkit installation:</p>
@@ -70,7 +70,7 @@
         </p>
     </section>
 
-    <section>
+    <section id="using">
       <title>Using</title>
       <p>To run, use the <option>html5-bootstrap</option> transformation and pass the <parmname
         >--args.hdr</parmname> parameter to the <cmdname>dita</cmdname>
@@ -81,7 +81,7 @@
   <parmname>--args.hdr</parmname>=path/to/your-header.xml</codeblock>
     </section>
 
-    <section>
+    <section id="sample-header-navigation-bars">
       <title>Sample header navigation bars</title>
       <p>To add a search box to the menu bar, add a <xmlelement>form class="search-box"</xmlelement> element
       with an <xmlelement>input type="search"</xmlelement> as shown here.</p>
diff --git a/sample/shadows.dita b/sample/shadows.dita
index 46890b93..52fc7057 100644
--- a/sample/shadows.dita
+++ b/sample/shadows.dita
@@ -17,7 +17,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="shadow-utilities">
       <title>Shadow Utilities</title>
       <p>Bootstrap provides utilities for adding depth with text-bg colors and box-shadows. The <xmlatt>shadow</xmlatt>
         attribute can be set to <codeph>yes</codeph>, <codeph>sm</codeph>, <codeph>lg</codeph> or
@@ -50,13 +50,13 @@
       </section>
     </bodydiv>
 
-    <section>
+    <section id="applied-shadow">
       <title>Applied Shadow</title>
       <p>Shadows can be applied to complex elements as follow:</p>
     </section>
 
     <bodydiv outputclass="p-3 border">
-      <section outputclass="card bg-subtle-accent m-3 shadow-lg">
+      <section id="shadowed-card" outputclass="card bg-subtle-accent m-3 shadow-lg">
         <title>Shadowed Card</title>
         <p>This card has a large shadow.</p>
       </section>
@@ -64,7 +64,7 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;section outputclass="card shadow-lg m-3 bg-subtle-accent"&gt;
   &lt;div outputclass="card-body"&gt;
@@ -75,7 +75,7 @@
 
 &lt;div outputclass="alert theme-accent m-3 shadow-sm"&gt;Alert with small shadow&lt;/div&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-1">
         <title>Specialization</title>
         <codeblock>&lt;card shadow="lg" margin="3" color="accent"&gt;
   &lt;title&gt;Shadowed Card&lt;/title&gt;
diff --git a/sample/spacing.dita b/sample/spacing.dita
index ef3f0ebb..55ddf633 100644
--- a/sample/spacing.dita
+++ b/sample/spacing.dita
@@ -20,7 +20,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="margin">
       <title>Margin</title>
       <p>The <xmlatt
         >margin</xmlatt> attribute controls the distance between elements, supporting values from 0 to 5 and <codeph
@@ -60,7 +60,7 @@
       </section>
     </bodydiv>
 
-    <section>
+    <section id="padding">
       <title>Padding</title>
       <p>The <xmlatt
         >padding</xmlatt> attribute controls the internal spacing of an element, supporting values from 0 to 5.</p>
@@ -86,7 +86,7 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;div outputclass="bg-primary p-0"&gt;Padding 0&lt;/div&gt;
 &lt;div outputclass="bg-secondary p-1 m-1"&gt;Padding 1&lt;/div&gt;
@@ -95,7 +95,7 @@
 &lt;div outputclass="bg-warning p-4 m-1"&gt;Padding 4&lt;/div&gt;
 &lt;div outputclass="bg-info p-5 m-1"&gt;Padding 5&lt;/div&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-1">
         <title>Specialization</title>
         <codeblock>&lt;div color="primary" padding="0"&gt;Padding 0&lt;/div&gt;
 &lt;div color="secondary" padding="1" margin="1"&gt;Padding 1&lt;/div&gt;
@@ -106,7 +106,7 @@
       </section>
     </bodydiv>
 
-    <section>
+    <section id="directional-spacing">
       <title>Directional Spacing</title>
       <p>The <xmlatt>margin</xmlatt> and <xmlatt
         >padding</xmlatt> attributes also support directional spacing using a prefix:</p>
@@ -133,14 +133,14 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;div outputclass="bg-primary mt-5 mb-0"&gt;Margin Top 5, Bottom 0&lt;/div&gt;
 &lt;div outputclass="bg-secondary mx-3"&gt;Margin Horizontal 3&lt;/div&gt;
 &lt;div outputclass="bg-success py-5"&gt;Padding Vertical 5&lt;/div&gt;
 &lt;div outputclass="bg-danger ps-3 pe-1"&gt;Padding Start 3, End 1&lt;/div&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-2">
         <title>Specialization</title>
         <codeblock>&lt;div color="primary" margin="t5 b0"&gt;Margin Top 5, Bottom 0&lt;/div&gt;
 &lt;div color="secondary" margin="x3"&gt;Margin Horizontal 3&lt;/div&gt;
diff --git a/sample/tables.dita b/sample/tables.dita
index 65c508d7..d9d4d2da 100644
--- a/sample/tables.dita
+++ b/sample/tables.dita
@@ -25,7 +25,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="overview">
       <title>Overview</title>
       <p>Due to the widespread use of <xmlelement>table</xmlelement> 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.
@@ -106,7 +106,7 @@
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="variants">
       <title>Variants</title>
       <p>Use contextual classes to color tables, table rows or individual cells.</p>
     </section>
@@ -142,7 +142,7 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table outputclass="theme-primary p-1 w-100"&gt;
   &lt;tgroup cols="2"&gt;
@@ -173,7 +173,7 @@
   &lt;/tgroup&gt;
 &lt;/table&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-1">
         <title>Specialization</title>
         <codeblock>&lt;table color="primary" padding="1" width="100"&gt;
   &lt;tgroup cols="2"&gt;
@@ -205,7 +205,7 @@
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="striped-rows">
       <title>Striped rows</title>
       <p>Use <xmlatt>striped="yes"</xmlatt> to add zebra-striping to any table row
         within the <xmlelement>tbody</xmlelement>.</p>
@@ -243,20 +243,20 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table outputclass="table-striped"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-2">
         <title>Specialization</title>
         <codeblock>&lt;table striped="yes"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="striped-columns">
       <title>Striped columns</title>
       <p>Use <xmlatt>striped-columns="yes"</xmlatt> to add zebra-striping to any table column
         within the <xmlelement>tbody</xmlelement>.</p>
@@ -294,20 +294,20 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-3">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table outputclass="table-striped-columns"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-3">
         <title>Specialization</title>
         <codeblock>&lt;table striped-columns="yes"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="bordered-tables">
       <title>Bordered tables</title>
       <p>Add <xmlatt>rowsep="1"</xmlatt> and <xmlatt
         >colsep="1"</xmlatt> for borders on all sides of the table and cells.</p>
@@ -345,20 +345,20 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-4">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table rowsep="1" colsep="1"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-4">
         <title>Specialization</title>
         <codeblock>&lt;table rowsep="1" colsep="1"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="tables-without-borders">
       <title>Tables without borders</title>
       <p>Add <xmlatt>rowsep="0"</xmlatt> and <xmlatt>colsep="0"</xmlatt> for a table without borders.</p>
     </section>
@@ -395,20 +395,20 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-5">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table rowsep="0" colsep="0"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-5">
         <title>Specialization</title>
         <codeblock>&lt;table rowsep="0" colsep="0"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="small-tables">
       <title>Small tables</title>
       <p>Add <xmlatt>compact="yes"</xmlatt> to make any table more compact by cutting all cell <codeph
         >padding</codeph> in half.</p>
@@ -446,20 +446,20 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-6">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table outputclass="table-sm"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-6">
         <title>Specialization</title>
         <codeblock>&lt;table compact="yes"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="table-group-dividers">
       <title>Table group dividers</title>
       <p>Add a thicker border, darker between table groups—<xmlelement>thead</xmlelement> and <xmlelement
         >tbody</xmlelement>, with <xmlatt>divider="yes"</xmlatt> on the table.</p>
@@ -497,13 +497,13 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-7">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;tbody outputclass="table-group-divider"&gt;
   ...etc
 &lt;/tbody&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-7">
         <title>Specialization</title>
         <codeblock>&lt;table divider="yes"&gt;
   ...
@@ -513,7 +513,7 @@
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="vertical-alignment">
       <title>Vertical alignment</title>
       <p>Table cells of <xmlelement
         >thead</xmlelement> are always vertical aligned to the bottom. Table cells in <xmlelement
@@ -566,7 +566,7 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-8">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table outputclass="align-middle"&gt;
   &lt;tgroup cols="4"&gt;
@@ -595,7 +595,7 @@
   &lt;/tgroup&gt;
 &lt;/table&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-8">
         <title>Specialization</title>
         <codeblock>&lt;table outputclass="align-middle"&gt;
   &lt;tgroup cols="4"&gt;
@@ -625,7 +625,7 @@
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="table-head">
       <title>Table head</title>
       <p>Similar to tables and dark tables, use the modifier <xmlatt>color="secondary"</xmlatt> or
           <xmlatt>color="inverse"</xmlatt> to make <xmlelement>thead</xmlelement> elements appear light or dark
@@ -664,7 +664,7 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-9">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
@@ -674,7 +674,7 @@
   &lt;/tgroup&gt;
 &lt;/table&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-9">
         <title>Specialization</title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
@@ -718,7 +718,7 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-10">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
@@ -728,7 +728,7 @@
   &lt;/tgroup&gt;
 &lt;/table&gt;</codeblock>
       </section>
-      <section>
+      <section id="specialization-10">
         <title>Specialization</title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
diff --git a/sample/tabs.dita b/sample/tabs.dita
index 64e8a39a..30fe1148 100644
--- a/sample/tabs.dita
+++ b/sample/tabs.dita
@@ -25,7 +25,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="basic-example">
       <title>Basic example</title>
       <p>The following example shows a simple tabbed dialog using a <xmlelement>tabbed-dialog
           style="tabs"</xmlelement> element containing a series of <xmlelement>section</xmlelement> elements
@@ -33,7 +33,7 @@
     </section>
     <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="nav-tabs mt-3">
-        <section>
+        <section id="home">
           <title>Home</title>
           <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high,
             'cause she’s got that one international smile. There’s a stranger in my bed, there’s a pounding in my head.
@@ -41,7 +41,7 @@
             battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause
             its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice</p>
         </section>
-        <section>
+        <section id="profile">
           <title>Profile</title>
           <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest
             architecture. Passport stamps, she’s cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned
@@ -49,7 +49,7 @@
             the ones, I mean like she’s the one. Greetings loved ones let’s take a journey. Just own the night like the
             4th of July! But you'd rather get wasted.</p>
         </section>
-        <section>
+        <section id="contact">
           <title>Contact</title>
           <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my
             girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she’s the muse and the artist.
@@ -99,7 +99,7 @@
     </p>
     <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="nav-pills mt-3">
-        <section>
+        <section id="home-1">
           <title>Home</title>
           <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high,
             'cause she’s got that one international smile. There’s a stranger in my bed, there’s a pounding in my head.
@@ -107,7 +107,7 @@
             battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause
             its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice</p>
         </section>
-        <section>
+        <section id="profile-1">
           <title>Profile</title>
           <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest
             architecture. Passport stamps, she’s cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned
@@ -115,7 +115,7 @@
             the ones, I mean like she’s the one. Greetings loved ones let’s take a journey. Just own the night like the
             4th of July! But you'd rather get wasted.</p>
         </section>
-        <section>
+        <section id="contact-1">
           <title>Contact</title>
           <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my
             girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she’s the muse and the artist.
@@ -126,7 +126,7 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-1">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;bodydiv outputclass="nav-pills"&gt;
   &lt;section&gt;
@@ -143,7 +143,7 @@
   &lt;/section&gt;
 &lt;/bodydiv&gt;</codeblock>
         </section>
-      <section>
+      <section id="specialization-1">
         <title>Specialization</title>
           <codeblock>&lt;tabbed-dialog style="pills"&gt;
   &lt;section&gt;
@@ -165,7 +165,7 @@
     </p>
     <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="nav-pills-vertical mt-3">
-        <section>
+        <section id="home-2">
           <title>Home</title>
           <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high,
             'cause she’s got that one international smile. There’s a stranger in my bed, there’s a pounding in my head.
@@ -173,7 +173,7 @@
             battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause
             its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice</p>
         </section>
-        <section>
+        <section id="profile-2">
           <title>Profile</title>
           <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest
             architecture. Passport stamps, she’s cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned
@@ -181,7 +181,7 @@
             the ones, I mean like she’s the one. Greetings loved ones let’s take a journey. Just own the night like the
             4th of July! But you'd rather get wasted.</p>
         </section>
-        <section>
+        <section id="contact-2">
           <title>Contact</title>
           <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my
             girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she’s the muse and the artist.
@@ -192,7 +192,7 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;bodydiv outputclass="nav-pills-vertical"&gt;
   &lt;section&gt;
@@ -209,7 +209,7 @@
   &lt;/section&gt;
 &lt;/bodydiv&gt;</codeblock>
         </section>
-      <section>
+      <section id="specialization-2">
         <title>Specialization</title>
           <codeblock>&lt;tabbed-dialog style="vertical-pills"&gt;
   &lt;section&gt;
diff --git a/sample/tooltips.dita b/sample/tooltips.dita
index 8350ced9..974a4af3 100644
--- a/sample/tooltips.dita
+++ b/sample/tooltips.dita
@@ -26,7 +26,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="overview">
       <title>Overview</title>
       <p>Things to know when using the tooltip plugin:</p>
       <ul>
@@ -43,7 +43,7 @@
       </ul>
     </section>
 
-    <section>
+    <section id="examples">
       <title>Examples</title>
       <p>Hover over the links below to see tooltips:</p>
     </section>
@@ -126,14 +126,14 @@
         <b>DITA</b> elements</desc> Tooltip with embedded DITA </xref>
   </bodydiv>
   <bodydiv outputclass="nav-pills mt-3">
-    <section>
+    <section id="outputclass-1">
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;xref href="#" outputclass="btn-secondary tooltip-top"&gt;
 &lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
 Tooltip with embedded DITA
 &lt;/xref&gt;</codeblock>
       </section>
-       <section>
+       <section id="specialization-1">
       <title>Specialization</title>
         <codeblock>&lt;tooltip outputclass="btn-secondary"&gt;
 &lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
@@ -141,7 +141,7 @@ Tooltip with embedded DITA
 &lt;/tooltip&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="custom-tooltips">
       <title>Custom tooltips</title>
       <p>You can customize the appearance of tooltips using CSS variables. We set a custom class with <codeph
         >&lt;data name="class"&gt;custom-tooltip&lt;data&gt;</codeph>  to scope our custom appearance and use it to override a local CSS variable.</p>
@@ -157,7 +157,7 @@ Tooltip with embedded DITA
       </xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
+      <section id="outputclass-2">
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref href="#" outputclass="btn-secondary tooltip-top"&gt;
   &lt;data name="class"&gt;custom-tooltip&lt;/data&gt;
@@ -165,7 +165,7 @@ Tooltip with embedded DITA
   Custom tooltip
 &lt;/xref&gt;</codeblock>
         </section>
-         <section>
+         <section id="specialization-2">
         <title>Specialization</title>
           <codeblock>&lt;tooltip outputclass="btn-secondary"&gt;
   &lt;data name="class"&gt;custom-tooltip&lt;/data&gt;
diff --git a/sample/typography.dita b/sample/typography.dita
index 74a5f0e2..ec2e69ba 100644
--- a/sample/typography.dita
+++ b/sample/typography.dita
@@ -23,7 +23,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="headings">
       <title>Headings</title>
       <p>All HTML headings, <xmlelement>h1</xmlelement> through <xmlelement>h6</xmlelement>, are available.
           <xmlatt>outputclass="h1"</xmlatt> through <xmlatt>outputclass="h6"</xmlatt> are also available, for when you
@@ -43,7 +43,7 @@
 &lt;title outputclass="h4"&gt;h4. Bootstrap heading&lt;/title&gt;
 &lt;title outputclass="h5"&gt;h5. Bootstrap heading&lt;/title&gt;
 &lt;title outputclass="h6"&gt;h6. Bootstrap heading&lt;/title&gt;</codeblock>
-    <section>
+    <section id="customizing-headings">
       <title>Customizing headings</title>
       <p>Annotate a <xmlelement>ph</xmlelement> with an <xmlatt>outputclass</xmlatt> to recreate the small secondary
         heading text from Bootstrap 3.</p>
@@ -55,7 +55,7 @@
     </bodydiv>
     <codeblock
     >&lt;title&gt;Fancy display heading &lt;ph outputclass="small text-body-secondary"&gt;with faded secondary text&lt;/ph&gt;&lt;/title&gt;</codeblock>
-    <section>
+    <section id="display-headings">
       <title>Display headings</title>
       <p>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.</p>
@@ -74,7 +74,7 @@
 &lt;title outputclass="fw-light fs-3xl"&gt;Display 4&lt;/title&gt;
 &lt;title outputclass="fw-light fs-2xl"&gt;Display 5&lt;/title&gt;
 &lt;title outputclass="fw-light fs-xl"&gt;Display 6&lt;/title&gt;</codeblock>
-    <section>
+    <section id="lead">
       <title>Lead</title>
       <p>Make a paragraph stand out by adding <xmlatt
         >outputclass="fw-light fs-lg"</xmlatt> — this is automatically added to
@@ -86,7 +86,7 @@
     <codeblock>&lt;p outputclass="fw-light fs-lg"&gt;
   This is a lead paragraph. It stands out from regular paragraphs.
 &lt;/p&gt;</codeblock>
-    <section>
+    <section id="inline-text-elements">
       <title>Inline text elements</title>
       <p>Styling for common inline HTML5 elements.</p>
     </section>
@@ -108,13 +108,13 @@
   is meant to be treated as fine print.&lt;/p&gt;
 &lt;p&gt;&lt;b&gt;This line rendered as bold text.&lt;/b&gt;&lt;/p&gt;
 &lt;p&gt;&lt;i&gt;This line rendered as italicized text.&lt;/i&gt;&lt;/p&gt;</codeblock>
-    <section>
+    <section id="text-utilities">
       <title>Text utilities</title>
       <p>Change text alignment, transform, style, weight, line-height, decoration and color with Bootstrap’s
         <xref href="./color.dita" format="dita">text and color utilities</xref>.</p>
     </section>
 
-    <section>
+    <section id="abbreviations">
       <title>Abbreviations</title>
       <p>Stylized implementation of HTML’s <xmlelement>abbr</xmlelement> element for abbreviations and acronyms to show
         the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide
@@ -136,7 +136,7 @@
   &lt;ph outputclass="initialism" otherprops="title(HyperText Markup Language)"&gt;HTML&lt;/ph&gt;
 &lt;/p&gt;
   </codeblock>
-    <section>
+    <section id="blockquotes">
       <title>Blockquotes</title>
       <p>For quoting blocks of content from another source within your document, use the DITA
           <xmlelement>lq</xmlelement> element, it is styled automatically.</p>
@@ -149,7 +149,7 @@
     <codeblock>&lt;lq&gt;
   &lt;p&gt;A well-known quote, contained in a blockquote element.&lt;/p&gt;
 &lt;/lq&gt;</codeblock>
-    <section>
+    <section id="naming-a-source">
       <title>Naming a source</title>
       <p>The HTML spec requires that blockquote attribution be placed outside the rendered HTML
           <xmlelement>blockquote</xmlelement> element. When providing attribution, wrap your the DITA
@@ -171,7 +171,7 @@
     &lt;p&gt;A well-known quote, contained in a blockquote element.&lt;/p&gt;
   &lt;/lq&gt;
 &lt;/fig&gt;</codeblock>
-    <section>
+    <section id="alignment">
       <title>Alignment</title>
       <p>Use text utilities such as <xmlatt>outputclass="text-center"</xmlatt> as needed to change the alignment of your
         blockquote.</p>
@@ -205,10 +205,10 @@
   &lt;/lq&gt;
 &lt;/fig&gt;</codeblock>
 
-    <section>
+    <section id="lists">
       <title outputclass="h2">Lists</title>
     </section>
-    <section>
+    <section id="unstyled">
       <title outputclass="h3">Unstyled</title>
       <p>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 <xmlatt>outputclass="list-unstyled"</xmlatt> for
@@ -244,7 +244,7 @@
   &lt;/li&gt;
   &lt;li&gt;This may still come in handy in some situations.&lt;/li&gt;
 &lt;/ul&gt;</codeblock>
-    <section>
+    <section id="inline">
       <title outputclass="h3">Inline</title>
       <p>Remove a list’s bullets and apply some light margin using the
         <xmlatt>outputclass="list-inline"</xmlatt> attribute.
@@ -262,7 +262,7 @@
   &lt;li&gt;And another one.&lt;/li&gt;
   &lt;li&gt;But they're displayed inline.&lt;/li&gt;
 &lt;/ul></codeblock>
-    <section>
+    <section id="description-list-alignment">
       <title outputclass="h3">Description list alignment</title>
       <p>Terms and descriptions align horizontally using Bootstrap’s grid system of predefined classes. For longer
         terms, text is truncated with an ellipsis.</p>
@@ -334,7 +334,7 @@
     &lt;/dd&gt;
   &lt;/dlentry&gt;
 &lt;/dl&gt;</codeblock>
-    <section>
+    <section id="description-list-column-width">
       <title outputclass="h3">Description list column width</title>
       <p>Definitions lists use the twelve column system defined by the Bootstrap grid. By default each <xmlelement
         >dt</xmlelement> spreads over 3 column widths and each <xmlelement

From 97bba467518e730a384036c58773d8b38315affd Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Fri, 31 Jul 2026 14:24:59 +0200
Subject: [PATCH 16/87] Update specialization processing for v6

---
 Customization/xsl/tables.xsl | 16 ++++++++--------
 xsl/utility-classes.xsl      | 32 +++++++++++++++++++++++++-------
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/Customization/xsl/tables.xsl b/Customization/xsl/tables.xsl
index 4d8a6e26..4add2edb 100644
--- a/Customization/xsl/tables.xsl
+++ b/Customization/xsl/tables.xsl
@@ -119,8 +119,8 @@
       (@color,
        substring-after(tokenize(@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'))[1]"
     />
-    <xsl:if test="exists($theme)">
-      <xsl:value-of select="concat('table-', $theme, ' ')"/>
+    <xsl:if test="exists($theme) and $theme != ''">
+      <xsl:value-of select="concat('theme-', $theme, ' ')"/>
     </xsl:if>
     <xsl:if test="@striped = 'yes'">
       <xsl:text> table-striped</xsl:text>
@@ -162,8 +162,8 @@
        $table/@color,
        substring-after(tokenize($table/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'))[1]"
     />
-    <xsl:if test="exists($theme)">
-      <xsl:value-of select="concat('table-', $theme, ' ')"/>
+    <xsl:if test="exists($theme) and $theme != ''">
+      <xsl:value-of select="concat('theme-', $theme, ' ')"/>
     </xsl:if>
     <xsl:next-match/>
   </xsl:template>
@@ -181,8 +181,8 @@
        $table/@color,
        substring-after(tokenize($table/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'))[1]"
     />
-    <xsl:if test="exists($theme)">
-      <xsl:value-of select="concat('table-', $theme, ' ')"/>
+    <xsl:if test="exists($theme) and $theme != ''">
+      <xsl:value-of select="concat('theme-', $theme, ' ')"/>
     </xsl:if>
     <xsl:next-match/>
   </xsl:template>
@@ -203,8 +203,8 @@
        $table/@color,
        substring-after(tokenize($table/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'))[1]"
     />
-    <xsl:if test="exists($theme)">
-      <xsl:value-of select="concat('table-', $theme, ' ')"/>
+    <xsl:if test="exists($theme) and $theme != ''">
+      <xsl:value-of select="concat('theme-', $theme, ' ')"/>
     </xsl:if>
     <xsl:next-match/>
   </xsl:template>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 0a475547..c7066017 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -53,6 +53,7 @@
        <xsl:when test="@color">
           <xsl:text>alert theme-</xsl:text>
           <xsl:value-of select="@color"/>
+          <xsl:text> </xsl:text>
        </xsl:when>
        <xsl:otherwise>
           <xsl:value-of select="$BOOTSTRAP_CSS_CODEBLOCK"/>
@@ -123,8 +124,9 @@
        <xsl:value-of select="$BOOTSTRAP_CSS_CARD_WIDTH"/>
     </xsl:if>
     <xsl:if test="@color">
-       <xsl:text> alert p-0 theme-</xsl:text>
+       <xsl:text> theme-</xsl:text>
        <xsl:value-of select="@color"/>
+       <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:next-match/>
   </xsl:template>
@@ -260,9 +262,12 @@
 
   <!-- Change the default Bootstrap CSS classes of alerts -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/alert ')]" mode="bootstrap-class" priority="10">
-    <xsl:text>alert-</xsl:text>
+    <xsl:text>theme-</xsl:text>
     <xsl:value-of select="@color"/>
     <xsl:text> </xsl:text>
+    <xsl:if test="*[contains(@class, ' topic/p ')]">
+      <xsl:text>vstack </xsl:text>
+    </xsl:if>
     <xsl:next-match/>
   </xsl:template>
 
@@ -332,12 +337,22 @@
 
   <!-- Change the default Bootstrap CSS classes of badges -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/badge ')]" mode="bootstrap-class" priority="10">
-    <xsl:text>text-bg-</xsl:text>
+    <xsl:text>theme-</xsl:text>
     <xsl:value-of select="(@color, 'primary')[1]"/>
     <xsl:text> </xsl:text>
     <xsl:next-match/>
   </xsl:template>
 
+  <!-- Change the default Bootstrap CSS classes of accordions -->
+  <xsl:template match="*[contains(@class, ' bootstrap-d/accordion ')]" mode="bootstrap-class" priority="10">
+    <xsl:if test="@color">
+      <xsl:text>theme-</xsl:text>
+      <xsl:value-of select="@color"/>
+      <xsl:text> </xsl:text>
+    </xsl:if>
+    <xsl:next-match/>
+  </xsl:template>
+
   <!-- Change the default Bootstrap CSS classes of cards -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/card ')]" mode="bootstrap-class" priority="10">
     <xsl:if test="@color">
@@ -358,7 +373,7 @@
   </xsl:template>
 
   <!-- Change the default Bootstrap CSS classes of popovers -->
-  <xsl:template match="*[contains(@class, ' bootstrap-d/popover ')]" mode="bootstrap-class" priority="10">
+  <xsl:template match="*[contains(@class, ' bootstrap-d/popover ')]" mode="bootstrap-class" priority="11">
     <xsl:if test="@position">
       <xsl:text>popover-</xsl:text>
       <xsl:value-of select="@position"/>
@@ -368,7 +383,7 @@
   </xsl:template>
 
   <!-- Change the default Bootstrap CSS classes of tooltips -->
-  <xsl:template match="*[contains(@class, ' bootstrap-d/tooltip ')]" mode="bootstrap-class" priority="10">
+  <xsl:template match="*[contains(@class, ' bootstrap-d/tooltip ')]" mode="bootstrap-class" priority="11">
     <xsl:if test="@position">
       <xsl:text>tooltip-</xsl:text>
       <xsl:value-of select="@position"/>
@@ -712,7 +727,7 @@
     match="*[contains(@class, ' topic/xref ') or contains(@class, ' topic/link ')][@color][not(contains(@class, ' bootstrap-d/button '))][not(contains(@outputclass, 'btn-'))]"
     mode="get-output-class"
   >
-    <xsl:text>link-</xsl:text>
+    <xsl:text>link theme-</xsl:text>
     <xsl:value-of select="@color"/>
     <xsl:text> </xsl:text>
     <xsl:next-match/>
@@ -734,6 +749,7 @@
                                  contains(@class, ' bootstrap-d/badge ') or
                                  contains(@class, ' bootstrap-d/list-group ') or
                                  contains(@class, ' bootstrap-d/carousel ') or
+                                 contains(@class, ' bootstrap-d/accordion ') or
                                  contains(@class, ' bootstrap-d/button ') or
                                  contains(@class, ' topic/table ') or
                                  contains(@class, ' topic/thead ') or
@@ -742,7 +758,9 @@
                                  contains(@class, ' topic/row ') or
                                  contains(@class, ' topic/entry '))"
     >
-       <xsl:text>text-bg-</xsl:text>
+       <xsl:text>bg-</xsl:text>
+       <xsl:value-of select="@color"/>
+       <xsl:text> fg-contrast-</xsl:text>
        <xsl:value-of select="@color"/>
        <xsl:text> </xsl:text>
     </xsl:if>

From 0b8704fd7775de927cadf5ab927a17c1cf5296bb Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 1 Aug 2026 09:19:52 +0200
Subject: [PATCH 17/87] Amend card

---
 sample/card.dita  | 6 +++---
 sample/color.dita | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/sample/card.dita b/sample/card.dita
index 9c7aca9a..c823049f 100644
--- a/sample/card.dita
+++ b/sample/card.dita
@@ -186,16 +186,16 @@
         applies a contextual background color.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section id="card-title-2" outputclass="card text-bg-success">
+      <section id="card-title-2" outputclass="card theme-success">
         <title>Card Title</title>
-        <image scope="external" href="https://picsum.photos/400/200?a"/>
+        <div outputclass="card-header">Success Card</div>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
         <xref href="#" outputclass="btn-primary">Go Somewhere</xref>
       </section>
     </bodydiv>
     <codeblock>&lt;card color="success"&gt;
   &lt;title&gt;Card Title&lt;/title&gt;
-  &lt;image href="..." /&gt;
+  &lt;div outputclass="card-header"&gt;Success Card&lt;/div&gt;
   &lt;p&gt;Some quick example text to build on the card title and make up the bulk of the card’s content.&lt;/p&gt;
   &lt;button href="#"&gt;Go Somewhere&lt;/button&gt;
 &lt;/card&gt;</codeblock>
diff --git a/sample/color.dita b/sample/color.dita
index b8670d9c..8d004fd4 100644
--- a/sample/color.dita
+++ b/sample/color.dita
@@ -229,6 +229,7 @@
       <image scope="external" href="https://picsum.photos/100/100?a" outputclass="img-thumbnail bg-warning"/>
       <section id="card-title" outputclass="card theme-success mt-2 w-50">
         <title>Card Title</title>
+        <div outputclass="card-header">Success Card</div>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
       </section>
 

From 6ce7b6454d08551b549518c64757ee503d1256e7 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 1 Aug 2026 11:09:47 +0200
Subject: [PATCH 18/87] Faded text

---
 sample/typography.dita | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sample/typography.dita b/sample/typography.dita
index ec2e69ba..711ea719 100644
--- a/sample/typography.dita
+++ b/sample/typography.dita
@@ -50,11 +50,11 @@
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
       <p outputclass="h3">Fancy display heading <ph
-          outputclass="small text-body-secondary"
+          outputclass="fs-md fg-secondary"
         >with faded secondary text</ph></p>
     </bodydiv>
     <codeblock
-    >&lt;title&gt;Fancy display heading &lt;ph outputclass="small text-body-secondary"&gt;with faded secondary text&lt;/ph&gt;&lt;/title&gt;</codeblock>
+    >&lt;title&gt;Fancy display heading &lt;ph outputclass="fs-md fg-secondary"&gt;with faded secondary text&lt;/ph&gt;&lt;/title&gt;</codeblock>
     <section id="display-headings">
       <title>Display headings</title>
       <p>Traditional heading elements are designed to work best in the meat of your page content. When you need a

From 59ff0aeec2015f96c1156dd0e685f19951872ad0 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 1 Aug 2026 11:38:59 +0200
Subject: [PATCH 19/87] Button icons

---
 sample/icons.dita       | 36 ++++++++++++++++++------------------
 xsl/utility-classes.xsl | 16 ++++++++++++----
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/sample/icons.dita b/sample/icons.dita
index 124f8b33..d8b7754c 100644
--- a/sample/icons.dita
+++ b/sample/icons.dita
@@ -156,57 +156,57 @@
       </bodydiv>
     <p>Icons can also be placed within buttons as shown:</p>
     <bodydiv outputclass="p-3 border">
-      <xref outputclass="btn-floating m-1 btn theme-primary" href="#"><ph
+      <xref outputclass="btn-icon theme-primary" href="#"><ph
           outputclass="bi bi-arrow-down-square-fill"
         /></xref>
-      <xref outputclass="btn-floating m-1 btn theme-primary" href="#"><ph
+      <xref outputclass="btn-icon theme-secondary" href="#"><ph
           outputclass="bi bi-chat-left-quote-fill"
         /></xref>
-      <xref outputclass="btn-floating m-1 btn theme-primary" href="#"><ph outputclass="bi bi-speedometer"/></xref>
-      <xref outputclass="btn-floating m-1 btn theme-primary" href="#"><ph outputclass="bi bi-camera-fill"/></xref>
-      <xref outputclass="btn-floating m-1 btn theme-primary" href="#"><ph outputclass="bi bi-link"/></xref>
-      <xref outputclass="btn-floating m-1 btn theme-primary" href="#"><ph outputclass="bi bi-share-fill"/></xref>
+      <xref outputclass="btn-icon theme-warning" href="#"><ph outputclass="bi bi-speedometer"/></xref>
+      <xref outputclass="btn-icon theme-info" href="#"><ph outputclass="bi bi-camera-fill"/></xref>
+      <xref outputclass="btn-icon theme-accent" href="#"><ph outputclass="bi bi-link"/></xref>
+      <xref outputclass="btn-icon theme-danger" href="#"><ph outputclass="bi bi-share-fill"/></xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section id="outputclass-2">
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref outputclass="btn theme-primary btn-floating m-1" href="#"&gt;
+          <codeblock>&lt;xref outputclass="theme-primary btn-icon" href="#"&gt;
   &lt;i outputclass="bi-arrow-down-square-fill"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn theme-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="theme-secondary btn-icon" href="#"&gt;
   &lt;i outputclass="bi-chat-left-quote-fill"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn theme-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="theme-warning btn-icon" href="#"&gt;
   &lt;i outputclass="bi-speedometer"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn theme-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="theme-info btn-icon" href="#"&gt;
   &lt;i outputclass="bi-camera-fill"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn theme-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="theme-accent btn-icon" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn theme-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="theme-danger btn-icon" href="#"&gt;
   &lt;i outputclass="bi-share-fill"/&gt;
 &lt;/xref&gt;</codeblock>
         </section>
          <section id="specialization-2">
         <title>Specialization</title>
-          <codeblock>&lt;button outputclass="btn-floating m-1" href="#"&gt;
+          <codeblock>&lt;button color="primary" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-arrow-down-square-fill"/&gt;
 &lt;/button&gt;
-&lt;button outputclass="btn-floating m-1" href="#"&gt;
+&lt;button color="secondary" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-chat-left-quote-fill"/&gt;
 &lt;/button&gt;
-&lt;button outputclass="btn-floating m-1" href="#"&gt;
+&lt;button color="warning" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-speedometer"/&gt;
 &lt;/button&gt;
-&lt;button outputclass="btn-floating m-1" href="#"&gt;
+&lt;button color="info" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-camera-fill"/&gt;
 &lt;/button&gt;
-&lt;button outputclass="btn-floating m-1" href="#"&gt;
+&lt;button color="accent" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt;
 &lt;/button&gt;
-&lt;button outputclass="btn-floating m-1" href="#"&gt;
+&lt;button color="danger" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-share-fill"/&gt;
 &lt;/button&gt;</codeblock>
         </section>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index c7066017..9a734898 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -877,10 +877,18 @@
       <xsl:when test="$icon != '' or (contains(@class, ' bootstrap-d/icon ') and @outputclass)">
         <xsl:element name="i">
           <xsl:attribute name="class">
-            <xsl:value-of select="concat('pe-2 ', $icon)"/>
-            <xsl:if test="contains(@class, ' bootstrap-d/icon ')">
-              <xsl:value-of select="concat(' ', @outputclass)"/>
-            </xsl:if>
+            <xsl:variable name="class-values" as="xs:string*">
+              <xsl:if test="not(parent::*[contains(@outputclass, 'btn-icon')])">
+                <xsl:sequence select="'pe-2'"/>
+              </xsl:if>
+              <xsl:if test="$icon != ''">
+                <xsl:sequence select="$icon"/>
+              </xsl:if>
+              <xsl:if test="contains(@class, ' bootstrap-d/icon ')">
+                <xsl:sequence select="string(@outputclass)"/>
+              </xsl:if>
+            </xsl:variable>
+            <xsl:value-of select="string-join($class-values, ' ')"/>
           </xsl:attribute>
           <xsl:if test="contains(@otherprops, 'style(')">
             <xsl:call-template name="otherprops-attributes"/>

From e70b7e724edf0c55062376211e74a6e687ef9b59 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 1 Aug 2026 13:26:32 +0200
Subject: [PATCH 20/87] Use import from CORSproxy

---
 includes/bootstrap.hdf.xml | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/includes/bootstrap.hdf.xml b/includes/bootstrap.hdf.xml
index 9045fc03..5d77697d 100644
--- a/includes/bootstrap.hdf.xml
+++ b/includes/bootstrap.hdf.xml
@@ -12,18 +12,5 @@
     href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/dist/css/bootstrap.min.css"
     rel="stylesheet"
   />
-  <script type="module">
-//<![CDATA[
-
-/*!
-  * Bootstrap v6.0.0-alpha1 (https://getbootstrap.com/)
-  * Copyright 2011-2026 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
-  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
-  */
-const elementMap=new Map,Data={set(e,t,n){elementMap.has(e)||elementMap.set(e,new Map);const i=elementMap.get(e);i.has(t)||0===i.size?i.set(t,n):console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${[...i.keys()][0]}.`)},get:(e,t)=>elementMap.has(e)&&elementMap.get(e).get(t)||null,getAny:e=>elementMap.has(e)&&elementMap.get(e).values().next().value||null,remove(e,t){if(!elementMap.has(e))return;const n=elementMap.get(e);n.delete(t),0===n.size&&elementMap.delete(e)}},namespaceRegex=/[^.]*(?=\..*)\.|.*/,stripNameRegex=/\..*/,stripUidRegex=/::\d+$/,eventRegistry={};let uidEvent=1;const customEvents={mouseenter:"mouseover",mouseleave:"mouseout"},nativeEvents=new Set(["click","dblclick","mouseup","mousedown","contextmenu","mousewheel","DOMMouseScroll","mouseover","mouseout","mousemove","selectstart","selectend","keydown","keypress","keyup","orientationchange","touchstart","touchmove","touchend","touchcancel","pointerdown","pointermove","pointerup","pointerleave","pointercancel","gesturestart","gesturechange","gestureend","focus","blur","change","reset","select","submit","focusin","focusout","load","unload","beforeunload","resize","move","DOMContentLoaded","readystatechange","error","abort","scroll","scrollend"]);function makeEventUid(e,t){return t&&`${t}::${uidEvent++}`||e.uidEvent||uidEvent++}function getElementEvents(e){const t=makeEventUid(e);return e.uidEvent=t,eventRegistry[t]=eventRegistry[t]||{},eventRegistry[t]}function bootstrapHandler(e,t){return function n(i){return hydrateObj(i,{delegateTarget:e}),n.oneOff&&EventHandler.off(e,i.type,t),t.apply(e,[i])}}function bootstrapDelegationHandler(e,t,n){return function i(s){const o=e.querySelectorAll(t);for(let{target:a}=s;a&&a!==this;a=a.parentNode)for(const l of o)if(l===a)return hydrateObj(s,{delegateTarget:a}),i.oneOff&&EventHandler.off(e,s.type,t,n),n.apply(a,[s])}}function findHandler(e,t,n=null){return Object.values(e).find(e=>e.callable===t&&e.delegationSelector===n)}function normalizeParameters(e,t,n){const i="string"==typeof t,s=i?n:t||n;let o=getTypeEvent(e);return nativeEvents.has(o)||(o=e),[i,s,o]}function addHandler(e,t,n,i,s){if("string"!=typeof t||!e)return;let[o,a,l]=normalizeParameters(t,n,i);if(t in customEvents){const e=e=>function(t){if(!t.relatedTarget||t.relatedTarget!==t.delegateTarget&&!t.delegateTarget.contains(t.relatedTarget))return e.call(this,t)};a=e(a)}const r=getElementEvents(e),c=r[l]||(r[l]={}),d=findHandler(c,a,o?n:null);if(d)return void(d.oneOff=d.oneOff&&s);const u=makeEventUid(a,t.replace(namespaceRegex,"")),h=o?bootstrapDelegationHandler(e,n,a):bootstrapHandler(e,a);h.delegationSelector=o?n:null,h.callable=a,h.oneOff=s,h.uidEvent=u,c[u]=h,e.addEventListener(l,h,o)}function removeHandler(e,t,n,i,s){const o=findHandler(t[n],i,s);o&&(e.removeEventListener(n,o,Boolean(s)),delete t[n][o.uidEvent])}function removeNamespacedHandlers(e,t,n,i){const s=t[n]||{};for(const[o,a]of Object.entries(s))o.includes(i)&&removeHandler(e,t,n,a.callable,a.delegationSelector)}function getTypeEvent(e){return e=e.replace(stripNameRegex,""),customEvents[e]||e}const EventHandler={on(e,t,n,i){addHandler(e,t,n,i,!1)},one(e,t,n,i){addHandler(e,t,n,i,!0)},off(e,t,n,i){if("string"!=typeof t||!e)return;const[s,o,a]=normalizeParameters(t,n,i),l=a!==t,r=getElementEvents(e),c=r[a]||{},d=t.startsWith(".");if(void 0===o){if(d)for(const n of Object.keys(r))removeNamespacedHandlers(e,r,n,t.slice(1));for(const[n,i]of Object.entries(c)){const s=n.replace(stripUidRegex,"");l&&!t.includes(s)||removeHandler(e,r,a,i.callable,i.delegationSelector)}}else{if(!Object.keys(c).length)return;removeHandler(e,r,a,o,s?n:null)}},trigger(e,t,n){if("string"!=typeof t||!e)return null;const i=hydrateObj(new Event(t,{bubbles:!0,cancelable:!0}),n);return e.dispatchEvent(i),i}};function hydrateObj(e,t={}){for(const[n,i]of Object.entries(t))try{e[n]=i}catch{Object.defineProperty(e,n,{configurable:!0,get:()=>i})}return e}function normalizeData(e){if("true"===e)return!0;if("false"===e)return!1;if(e===Number(e).toString())return Number(e);if(""===e||"null"===e)return null;if("string"!=typeof e)return e;try{return JSON.parse(decodeURIComponent(e))}catch{return e}}function normalizeDataKey(e){return e.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}const Manipulator={setDataAttribute(e,t,n){e.setAttribute(`data-bs-${normalizeDataKey(t)}`,n)},removeDataAttribute(e,t){e.removeAttribute(`data-bs-${normalizeDataKey(t)}`)},getDataAttributes(e){if(!e)return{};const t={},n=Object.keys(e.dataset).filter(e=>e.startsWith("bs")&&!e.startsWith("bsConfig"));for(const i of n){let n=i.replace(/^bs/,"");n=n.charAt(0).toLowerCase()+n.slice(1),t[n]=normalizeData(e.dataset[i])}return t},getDataAttribute:(e,t)=>normalizeData(e.getAttribute(`data-bs-${normalizeDataKey(t)}`))},MAX_UID=1e6,MILLISECONDS_MULTIPLIER=1e3,TRANSITION_END="transitionend",parseSelector=e=>(e&&window.CSS&&window.CSS.escape&&(e=e.replace(/#([^\s"#']+)/g,(e,t)=>`#${CSS.escape(t)}`)),e),toType=e=>null==e?`${e}`:Object.prototype.toString.call(e).match(/\s([a-z]+)/i)[1].toLowerCase(),getUID=e=>{do{e+=Math.floor(1e6*Math.random())}while(document.getElementById(e));return e},getTransitionDurationFromElement=e=>{if(!e)return 0;let{transitionDuration:t,transitionDelay:n}=window.getComputedStyle(e);const i=Number.parseFloat(t),s=Number.parseFloat(n);return i||s?(t=t.split(",")[0],n=n.split(",")[0],1e3*(Number.parseFloat(t)+Number.parseFloat(n))):0},triggerTransitionEnd=e=>{e.dispatchEvent(new Event(TRANSITION_END))},isElement$1=e=>!(!e||"object"!=typeof e)&&void 0!==e.nodeType,getElement=e=>isElement$1(e)?e:"string"==typeof e&&e.length>0?document.querySelector(parseSelector(e)):null,isVisible=e=>{if(!isElement$1(e)||0===e.getClientRects().length)return!1;const t="visible"===getComputedStyle(e).getPropertyValue("visibility"),n=e.closest("details:not([open])");if(!n)return t;if(n!==e){const t=e.closest("summary");if(t&&t.parentNode!==n)return!1;if(null===t)return!1}return t},isDisabled=e=>!e||e.nodeType!==Node.ELEMENT_NODE||!!e.classList.contains("disabled")||(void 0!==e.disabled?e.disabled:e.hasAttribute("disabled")&&"false"!==e.getAttribute("disabled")),findShadowRoot=e=>{if(!document.documentElement.attachShadow)return null;if("function"==typeof e.getRootNode){const t=e.getRootNode();return t instanceof ShadowRoot?t:null}return e instanceof ShadowRoot?e:e.parentNode?findShadowRoot(e.parentNode):null},noop=()=>{},reflow=e=>{e.offsetHeight},isRTL$1=()=>"rtl"===document.documentElement.dir,execute=(e,t=[],n=e)=>"function"==typeof e?e.call(...t):n,executeAfterTransition=(e,t,n=!0)=>{if(!n)return void execute(e);const i=getTransitionDurationFromElement(t)+5;let s=!1;const o=({target:n})=>{n===t&&(s=!0,t.removeEventListener(TRANSITION_END,o),execute(e))};t.addEventListener(TRANSITION_END,o),setTimeout(()=>{s||triggerTransitionEnd(t)},i)},getNextActiveElement=(e,t,n,i)=>{const s=e.length;let o=e.indexOf(t);return-1===o?!n&&i?e[s-1]:e[0]:(o+=n?1:-1,i&&(o=(o+s)%s),e[Math.max(0,Math.min(o,s-1))])};class Config{static get Default(){return{}}static get DefaultType(){return{}}static get NAME(){throw new Error('You have to implement the static method "NAME", for each component!')}_getConfig(e){return e=this._mergeConfigObj(e),e=this._configAfterMerge(e),this._typeCheckConfig(e),e}_configAfterMerge(e){return e}_mergeConfigObj(e,t){const n=isElement$1(t)?Manipulator.getDataAttribute(t,"config"):{};return{...this.constructor.Default,..."object"==typeof n?n:{},...isElement$1(t)?Manipulator.getDataAttributes(t):{},..."object"==typeof e?e:{}}}_typeCheckConfig(e,t=this.constructor.DefaultType){for(const[n,i]of Object.entries(t)){const t=e[n],s=isElement$1(t)?"element":toType(t);if(!new RegExp(i).test(s))throw new TypeError(`${this.constructor.NAME.toUpperCase()}: Option "${n}" provided type "${s}" but expected type "${i}".`)}}}const VERSION="6.0.0-alpha1";class BaseComponent extends Config{constructor(e,t){if(super(),!(e=getElement(e)))return;this._element=e,this._config=this._getConfig(t);const n=Data.get(this._element,this.constructor.DATA_KEY);n&&n.dispose(),Data.set(this._element,this.constructor.DATA_KEY,this)}dispose(){Data.remove(this._element,this.constructor.DATA_KEY),EventHandler.off(this._element,this.constructor.EVENT_KEY);for(const e of Object.getOwnPropertyNames(this))this[e]=null}_queueCallback(e,t,n=!0){executeAfterTransition(()=>{this._element&&e()},t,n)}_getConfig(e){return e=this._mergeConfigObj(e,this._element),e=this._configAfterMerge(e),this._typeCheckConfig(e),e}static getInstance(e){return Data.get(getElement(e),this.DATA_KEY)}static getOrCreateInstance(e,t={}){return this.getInstance(e)||new this(e,"object"==typeof t?t:null)}static get VERSION(){return VERSION}static get DATA_KEY(){return`bs.${this.NAME}`}static get EVENT_KEY(){return`.${this.DATA_KEY}`}static eventName(e){return`${e}${this.EVENT_KEY}`}}const getSelector=e=>{let t=e.getAttribute("data-bs-target");if(!t||"#"===t){let n=e.getAttribute("href");if(!n||!n.includes("#")&&!n.startsWith("."))return null;n.includes("#")&&!n.startsWith("#")&&(n=`#${n.split("#")[1]}`),t=n&&"#"!==n?n.trim():null}return t?t.split(",").map(e=>parseSelector(e)).join(","):null},SelectorEngine={find:(e,t=document.documentElement)=>[...Element.prototype.querySelectorAll.call(t,e)],findOne:(e,t=document.documentElement)=>Element.prototype.querySelector.call(t,e),children:(e,t)=>[...e.children].filter(e=>e.matches(t)),parents(e,t){const n=[];let i=e.parentNode.closest(t);for(;i;)n.push(i),i=i.parentNode.closest(t);return n},closest:(e,t)=>Element.prototype.closest.call(e,t),prev(e,t){let n=e.previousElementSibling;for(;n;){if(n.matches(t))return[n];n=n.previousElementSibling}return[]},next(e,t){let n=e.nextElementSibling;for(;n;){if(n.matches(t))return[n];n=n.nextElementSibling}return[]},focusableChildren(e){const t=["a","button","input","textarea","select","details","[tabindex]",'[contenteditable="true"]'].map(e=>`${e}:not([tabindex^="-"])`).join(",");return this.find(t,e).filter(e=>!isDisabled(e)&&isVisible(e))},getSelectorFromElement(e){const t=getSelector(e);return t&&SelectorEngine.findOne(t)?t:null},getElementFromSelector(e){const t=getSelector(e);return t?SelectorEngine.findOne(t):null},getMultipleElementsFromSelector(e){const t=getSelector(e);return t?SelectorEngine.find(t):[]}},enableDismissTrigger=(e,t="hide")=>{const n=`click.dismiss${e.EVENT_KEY}`,i=e.NAME;EventHandler.on(document,n,`[data-bs-dismiss="${i}"]`,function(n){if(["A","AREA"].includes(this.tagName)&&n.preventDefault(),isDisabled(this))return;const s=SelectorEngine.getElementFromSelector(this)||this.closest(`.${i}`);e.getOrCreateInstance(s)[t]()})},eventActionOnPlugin=(e,t,n,i,s=null)=>{eventAction(`${t}.${e.NAME}`,n,t=>{const n=t.targets.filter(Boolean).map(t=>e.getOrCreateInstance(t));"function"==typeof s&&s({...t,instances:n});for(const e of n)e[i]()})},eventAction=(e,t,n)=>{const i=`${t}:not(.disabled):not(:disabled)`;EventHandler.on(document,e,i,function(e){["A","AREA"].includes(this.tagName)&&e.preventDefault();const t=SelectorEngine.getSelectorFromElement(this),i=t?SelectorEngine.find(t):[this];n({targets:i,event:e})})},NAME$l="alert",DATA_KEY$h="bs.alert",EVENT_KEY$i=".bs.alert",EVENT_CLOSE="close.bs.alert",EVENT_CLOSED="closed.bs.alert",CLASS_NAME_FADE$4="fade",CLASS_NAME_SHOW$6="show";class Alert extends BaseComponent{static get NAME(){return NAME$l}close(){if(EventHandler.trigger(this._element,EVENT_CLOSE).defaultPrevented)return;this._element.classList.remove("show");const e=this._element.classList.contains("fade");this._queueCallback(()=>this._destroyElement(),this._element,e)}_destroyElement(){this._element.remove(),EventHandler.trigger(this._element,EVENT_CLOSED),this.dispose()}}enableDismissTrigger(Alert,"close");const NAME$k="button",DATA_KEY$g="bs.button",EVENT_KEY$h=`.${DATA_KEY$g}`,DATA_API_KEY$c=".data-api",CLASS_NAME_ACTIVE$4="active",SELECTOR_DATA_TOGGLE$a='[data-bs-toggle="button"]',EVENT_CLICK_DATA_API$8=`click${EVENT_KEY$h}.data-api`;class Button extends BaseComponent{static get NAME(){return NAME$k}toggle(){this._element.setAttribute("aria-pressed",this._element.classList.toggle("active"))}}EventHandler.on(document,EVENT_CLICK_DATA_API$8,SELECTOR_DATA_TOGGLE$a,e=>{e.preventDefault();const t=e.target.closest(SELECTOR_DATA_TOGGLE$a);Button.getOrCreateInstance(t).toggle()});const NAME$j="carousel",DATA_KEY$f="bs.carousel",EVENT_KEY$g=`.${DATA_KEY$f}`,DATA_API_KEY$b=".data-api",ARROW_LEFT_KEY$2="ArrowLeft",ARROW_RIGHT_KEY$2="ArrowRight",DIRECTION_LEFT="left",DIRECTION_RIGHT="right",EVENT_SLIDE=`slide${EVENT_KEY$g}`,EVENT_SLID=`slid${EVENT_KEY$g}`,EVENT_KEYDOWN$2=`keydown${EVENT_KEY$g}`,EVENT_MOUSEENTER$2=`mouseenter${EVENT_KEY$g}`,EVENT_MOUSELEAVE$1=`mouseleave${EVENT_KEY$g}`,EVENT_POINTERDOWN$1=`pointerdown${EVENT_KEY$g}`,EVENT_LOAD_DATA_API$3=`load${EVENT_KEY$g}.data-api`,EVENT_CLICK_DATA_API$7=`click${EVENT_KEY$g}.data-api`,CLASS_NAME_CAROUSEL="carousel",CLASS_NAME_ACTIVE$3="active",CLASS_NAME_FADE$3="carousel-fade",CLASS_NAME_CENTER="carousel-center",CLASS_NAME_AUTO="carousel-auto",CLASS_NAME_CLONE="carousel-item-clone",CLASS_NAME_PAUSED="paused",CLASS_NAME_PLAYING="carousel-playing",PROPERTY_INTERVAL="--bs-carousel-interval",SCROLL_DURATION=300,ACTIVE_RATIO_TOLERANCE=.05,SELECTOR_ACTIVE=".active",SELECTOR_ITEM=`.carousel-item:not(.${CLASS_NAME_CLONE})`,SELECTOR_ACTIVE_ITEM=".active"+SELECTOR_ITEM,SELECTOR_INNER$1=".carousel-inner",SELECTOR_INDICATORS=".carousel-indicators",SELECTOR_PLAY_PAUSE=".carousel-control-play-pause",SELECTOR_DATA_SLIDE="[data-bs-slide], [data-bs-slide-to]",SELECTOR_DATA_SLIDE_PREV='[data-bs-slide="prev"]',SELECTOR_DATA_SLIDE_NEXT='[data-bs-slide="next"]',SELECTOR_DATA_AUTOPLAY='[data-bs-autoplay="true"]',KEY_TO_DIRECTION={[ARROW_LEFT_KEY$2]:"right",[ARROW_RIGHT_KEY$2]:"left"},ENDS_STOP="stop",ENDS_WRAP="wrap",ENDS_LOOP="loop",Default$i={autoplay:!1,ends:ENDS_LOOP,interval:5e3,keyboard:!0,pause:"hover"},DefaultType$i={autoplay:"boolean",ends:"string",interval:"number",keyboard:"boolean",pause:"(string|boolean)"},easeInOutCubic=e=>e<.5?4*e*e*e:1-(-2*e+2)**3/2;class Carousel extends BaseComponent{constructor(e,t){super(e,t),this._viewport=SelectorEngine.findOne(SELECTOR_INNER$1,this._element)||this._element,this._indicatorsElement=SelectorEngine.findOne(SELECTOR_INDICATORS,this._element),this._playPauseElement=SelectorEngine.findOne(SELECTOR_PLAY_PAUSE,this._element),this._prevControls=SelectorEngine.find('[data-bs-slide="prev"]',this._element),this._nextControls=SelectorEngine.find('[data-bs-slide="next"]',this._element),this._interval=null,this._observer=null,this._scrollFrame=null,this._looping=!1,this._visibility=new Map,this._playing=this._config.autoplay,this._activeIndex=this._initialActiveIndex(),this._addEventListeners(),this._observeItems(),this._refreshActiveState(),this._playing&&this.cycle(),this._updatePlayPauseControl()}static get Default(){return Default$i}static get DefaultType(){return DefaultType$i}static get NAME(){return NAME$j}next(){this.to(this._navIndex()+1)}nextWhenVisible(){"visible"===document.visibilityState&&isVisible(this._element)&&this.next()}prev(){this.to(this._navIndex()-1)}pause(){this._clearInterval(),this._element.classList.remove("carousel-playing")}cycle(){this._clearInterval(),this._scheduleAutoplay(),this._element.classList.add("carousel-playing")}to(e){if(this._looping)return;const t=this._getItems(),n=Number.parseInt(e,10);if(this._config.ends===ENDS_LOOP&&!this._prefersReducedMotion()&&this._canLoop()){if(n>t.length-1)return void this._loopTransition(!0);if(n<0)return void this._loopTransition(!1)}const i=this._normalizeIndex(n,t.length),s=this._navIndex();null!==i&&i!==s&&(EventHandler.trigger(this._element,EVENT_SLIDE,{relatedTarget:t[i],direction:this._direction(s,i),from:s,to:i}).defaultPrevented||(this._isFade()?this._fadeTo(i):this._scrollToIndex(i)))}dispose(){this._clearInterval(),this._observer&&this._observer.disconnect(),null!==this._scrollFrame&&cancelAnimationFrame(this._scrollFrame);for(const e of SelectorEngine.find(`.${CLASS_NAME_CLONE}`,this._viewport))e.remove();this._viewport.style.scrollSnapType="",EventHandler.off(this._viewport,EVENT_KEY$g),super.dispose()}_configAfterMerge(e){return[ENDS_STOP,ENDS_WRAP,ENDS_LOOP].includes(e.ends)||(e.ends=Default$i.ends),e}_initialActiveIndex(){const e=SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM,this._element),t=e?this._getItems().indexOf(e):0;return Math.max(t,0)}_addEventListeners(){this._config.keyboard&&EventHandler.on(this._element,EVENT_KEYDOWN$2,e=>this._keydown(e)),"hover"===this._config.pause&&(EventHandler.on(this._element,EVENT_MOUSEENTER$2,()=>this.pause()),EventHandler.on(this._element,EVENT_MOUSELEAVE$1,()=>this._maybeEnableCycle())),EventHandler.on(this._viewport,EVENT_POINTERDOWN$1,()=>this._pauseFromInteraction())}_keydown(e){if(/input|textarea/i.test(e.target.tagName))return;const t=KEY_TO_DIRECTION[e.key];t&&(e.preventDefault(),this._pauseFromInteraction(),"right"===t?this.prev():this.next())}_observeItems(){if(!this._isFade()&&"undefined"!=typeof IntersectionObserver){this._observer=new IntersectionObserver(e=>this._handleIntersection(e),{root:this._viewport,threshold:[0,.25,.5,.75,1]});for(const e of this._getItems())this._observer.observe(e)}}_handleIntersection(e){if(this._looping)return;for(const t of e)this._visibility.set(t.target,t.isIntersecting?t.intersectionRatio:0);const t=this._getItems().map(e=>this._visibility.get(e)??0),n=Math.max(...t);let i=this._activeIndex;n>0&&(i=t.findIndex(e=>e>=n-.05)),this._setActive(i),this._updateEndControls()}_navIndex(){if(this._isFade()||this._viewport.scrollWidth-this._viewport.clientWidth<=0)return this._activeIndex;let e=this._activeIndex,t=Number.POSITIVE_INFINITY;for(const[n,i]of this._getItems().entries()){const s=Math.abs(this._scrollDelta(i));s<t&&(t=s,e=n)}return e}_scrollToIndex(e){const t=this._getItems()[e];if(!t)return;const n=this._scrollDelta(t);if(Math.abs(n)<1)return;const i=this._viewport.scrollLeft+n;this._viewport.style.scrollSnapType="none",this._animateScroll(i,()=>{this._viewport.style.scrollSnapType="",this._observer||this._setActive(e),this._updateEndControls()})}_animateScroll(e,t){null!==this._scrollFrame&&(cancelAnimationFrame(this._scrollFrame),this._scrollFrame=null);const n=this._viewport.scrollLeft,i=e-n;if(this._prefersReducedMotion()||"undefined"==typeof requestAnimationFrame)return this._viewport.scrollTo({left:e,behavior:"instant"}),void t();let s=null;const o=a=>{null===s&&(s=a);const l=Math.min((a-s)/300,1);this._viewport.scrollTo({left:n+i*easeInOutCubic(l),behavior:"instant"}),l<1?this._scrollFrame=requestAnimationFrame(o):(this._viewport.scrollTo({left:e,behavior:"instant"}),this._scrollFrame=null,t())};this._scrollFrame=requestAnimationFrame(o)}_scrollDelta(e){const t=this._viewport.getBoundingClientRect(),n=e.getBoundingClientRect();if(this._element.classList.contains("carousel-center"))return n.left+n.width/2-(t.left+t.width/2);const i=Number.parseFloat(getComputedStyle(this._viewport).scrollPaddingInlineStart)||0;return isRTL$1()?n.right-(t.right-i):n.left-(t.left+i)}_loopTransition(e){const t=this._getItems(),n=t.length-1,i=this._activeIndex,s=e?0:n,o=this._loopDirection(e);if(EventHandler.trigger(this._element,EVENT_SLIDE,{relatedTarget:t[s],direction:o,from:i,to:s}).defaultPrevented)return;this._looping=!0;const a=(e?t[0]:t[n]).cloneNode(!0);a.classList.add(CLASS_NAME_CLONE),a.classList.remove("active"),a.removeAttribute("id");for(const e of SelectorEngine.find("[id]",a))e.removeAttribute("id");a.setAttribute("aria-hidden","true"),a.inert=!0,this._viewport.style.scrollSnapType="none",e?this._viewport.append(a):(this._viewport.prepend(a),this._jumpScroll(this._scrollDelta(t[i]))),this._animateScroll(this._viewport.scrollLeft+this._scrollDelta(a),()=>{a.remove(),this._jumpScroll(this._scrollDelta(t[s])),this._activeIndex=s,this._refreshActiveState(),EventHandler.trigger(this._element,EVENT_SLID,{relatedTarget:t[s],direction:o,from:i,to:s}),this._viewport.style.scrollSnapType="",this._looping=!1})}_loopDirection(e){return isRTL$1()?e?"right":"left":e?"left":"right"}_jumpScroll(e){this._viewport.style.scrollSnapType="none",this._viewport.scrollBy({left:e,top:0,behavior:"instant"})}_fadeTo(e){this._setActive(e)}_setActive(e){const t=this._getItems();if(e===this._activeIndex||!t[e])return;const n=this._activeIndex;this._activeIndex=e,this._refreshActiveState(),EventHandler.trigger(this._element,EVENT_SLID,{relatedTarget:t[e],direction:this._direction(n,e),from:n,to:e})}_refreshActiveState(){const e=this._getItems();for(const[t,n]of e.entries())n.classList.toggle("active",t===this._activeIndex);this._setActiveIndicatorElement(this._activeIndex),this._updateEndControls()}_updateEndControls(){if(this._config.ends!==ENDS_STOP)return;const e=this._viewport,t=e.scrollWidth-e.clientWidth;let n,i;if(t>0){const s=Math.abs(e.scrollLeft);n=s<=1,i=s>=t-1}else{const e=this._getItems().length-1;n=this._activeIndex<=0,i=this._activeIndex>=e}this._setControlsDisabled(this._prevControls,n),this._setControlsDisabled(this._nextControls,i)}_setControlsDisabled(e,t){for(const n of e)t&&n===document.activeElement&&((e===this._prevControls?this._nextControls:this._prevControls)[0]??this._viewport).focus({preventScroll:!0}),n.disabled=t}_setActiveIndicatorElement(e){if(!this._indicatorsElement)return;const t=SelectorEngine.findOne(".active",this._indicatorsElement);t&&(t.classList.remove("active"),t.removeAttribute("aria-current"));const n=SelectorEngine.findOne(`[data-bs-slide-to="${e}"]`,this._indicatorsElement);n&&(n.classList.add("active"),n.setAttribute("aria-current","true"))}_normalizeIndex(e,t){return Number.isNaN(e)||0===t?null:e<0?this._wrapsAround()?t-1:null:e>t-1?this._wrapsAround()?0:null:e}_wrapsAround(){return this._config.ends===ENDS_WRAP||this._config.ends===ENDS_LOOP}_canLoop(){if(this._isFade()||this._getItems().length<2)return!1;const e=getComputedStyle(this._element),t=t=>Number.parseFloat(e.getPropertyValue(t))||0;return 1===(t("--bs-carousel-items")||1)&&0===t("--bs-carousel-items-peek")&&!this._element.classList.contains("carousel-center")&&!this._element.classList.contains("carousel-auto")}_direction(e,t){const n=t>e;return isRTL$1()?n?"right":"left":n?"left":"right"}_scheduleAutoplay(e=this._activeIndex){const t=this._itemInterval(e);this._element.style.setProperty(PROPERTY_INTERVAL,`${t}ms`),this._interval=setTimeout(()=>{const e=this._upcomingIndex();this.nextWhenVisible(),null!==e?this._scheduleAutoplay(e):this.pause()},t)}_upcomingIndex(){return this._normalizeIndex(this._navIndex()+1,this._getItems().length)}_itemInterval(e=this._activeIndex){const t=this._getItems()[e],n=t?Number.parseInt(t.getAttribute("data-bs-interval"),10):Number.NaN;return Number.isNaN(n)?this._config.interval:n}_maybeEnableCycle(){this._playing&&this.cycle()}_pauseFromInteraction(){this._playing=!1,this.pause(),this._updatePlayPauseControl()}_togglePlayPause(){this._playing?this._pauseFromInteraction():(this._playing=!0,this.cycle(),this._updatePlayPauseControl())}_updatePlayPauseControl(){if(!this._playPauseElement)return;this._playPauseElement.classList.toggle("paused",!this._playing);const e=this._playPauseElement.getAttribute(this._playing?"data-bs-pause-label":"data-bs-play-label");e&&this._playPauseElement.setAttribute("aria-label",e)}_isFade(){return this._element.classList.contains("carousel-fade")}_prefersReducedMotion(){return"undefined"!=typeof window&&"function"==typeof window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}_getItems(){return SelectorEngine.find(SELECTOR_ITEM,this._element)}_clearInterval(){this._interval&&(clearTimeout(this._interval),this._interval=null)}}EventHandler.on(document,EVENT_CLICK_DATA_API$7,SELECTOR_DATA_SLIDE,function(e){const t=SelectorEngine.getElementFromSelector(this);if(!t||!t.classList.contains("carousel"))return;e.preventDefault();const n=Carousel.getOrCreateInstance(t);n._pauseFromInteraction();const i=this.getAttribute("data-bs-slide-to");i?n.to(i):"next"!==Manipulator.getDataAttribute(this,"slide")?n.prev():n.next()}),EventHandler.on(document,EVENT_CLICK_DATA_API$7,SELECTOR_PLAY_PAUSE,function(e){const t=SelectorEngine.getElementFromSelector(this);t&&t.classList.contains("carousel")&&(e.preventDefault(),Carousel.getOrCreateInstance(t)._togglePlayPause())}),EventHandler.on(window,EVENT_LOAD_DATA_API$3,()=>{const e=SelectorEngine.find(SELECTOR_DATA_AUTOPLAY);for(const t of e)Carousel.getOrCreateInstance(t)});const NAME$i="collapse",DATA_KEY$e="bs.collapse",EVENT_KEY$f=`.${DATA_KEY$e}`,DATA_API_KEY$a=".data-api",EVENT_SHOW$7=`show${EVENT_KEY$f}`,EVENT_SHOWN$6=`shown${EVENT_KEY$f}`,EVENT_HIDE$6=`hide${EVENT_KEY$f}`,EVENT_HIDDEN$8=`hidden${EVENT_KEY$f}`,EVENT_CLICK_DATA_API$6=`click${EVENT_KEY$f}.data-api`,CLASS_NAME_SHOW$5="show",CLASS_NAME_COLLAPSE="collapse",CLASS_NAME_COLLAPSING="collapsing",CLASS_NAME_COLLAPSED="collapsed",CLASS_NAME_DEEPER_CHILDREN=":scope .collapse .collapse",CLASS_NAME_HORIZONTAL="collapse-horizontal",WIDTH="width",HEIGHT="height",SELECTOR_ACTIVES=".collapse.show, .collapse.collapsing",SELECTOR_DATA_TOGGLE$9='[data-bs-toggle="collapse"]',Default$h={parent:null,toggle:!0},DefaultType$h={parent:"(null|element)",toggle:"boolean"};class Collapse extends BaseComponent{constructor(e,t){super(e,t),this._isTransitioning=!1,this._triggerArray=[];const n=SelectorEngine.find(SELECTOR_DATA_TOGGLE$9);for(const e of n){const t=SelectorEngine.getSelectorFromElement(e),n=SelectorEngine.find(t).filter(e=>e===this._element);null!==t&&n.length&&this._triggerArray.push(e)}this._initializeChildren(),this._config.parent||this._addAriaAndCollapsedClass(this._triggerArray,this._isShown()),this._config.toggle&&this.toggle()}static get Default(){return Default$h}static get DefaultType(){return DefaultType$h}static get NAME(){return NAME$i}toggle(){this._isShown()?this.hide():this.show()}show(){if(this._isTransitioning||this._isShown())return;let e=[];if(this._config.parent&&(e=this._getFirstLevelChildren(SELECTOR_ACTIVES).filter(e=>e!==this._element).map(e=>Collapse.getOrCreateInstance(e,{toggle:!1}))),e.length&&e[0]._isTransitioning)return;if(EventHandler.trigger(this._element,EVENT_SHOW$7).defaultPrevented)return;for(const t of e)t.hide();const t=this._getDimension();this._element.classList.remove("collapse"),this._element.classList.add("collapsing"),this._element.style[t]=0,this._addAriaAndCollapsedClass(this._triggerArray,!0),this._isTransitioning=!0;const n=`scroll${t[0].toUpperCase()+t.slice(1)}`;this._queueCallback(()=>{this._isTransitioning=!1,this._element.classList.remove("collapsing"),this._element.classList.add("collapse","show"),this._element.style[t]="",EventHandler.trigger(this._element,EVENT_SHOWN$6)},this._element,!0),this._element.style[t]=`${this._element[n]}px`}hide(){if(this._isTransitioning||!this._isShown())return;if(EventHandler.trigger(this._element,EVENT_HIDE$6).defaultPrevented)return;const e=this._getDimension();this._element.style[e]=`${this._element.getBoundingClientRect()[e]}px`,reflow(this._element),this._element.classList.add("collapsing"),this._element.classList.remove("collapse","show");for(const e of this._triggerArray){const t=SelectorEngine.getElementFromSelector(e);t&&!this._isShown(t)&&this._addAriaAndCollapsedClass([e],!1)}this._isTransitioning=!0,this._element.style[e]="",this._queueCallback(()=>{this._isTransitioning=!1,this._element.classList.remove("collapsing"),this._element.classList.add("collapse"),EventHandler.trigger(this._element,EVENT_HIDDEN$8)},this._element,!0)}_isShown(e=this._element){return e.classList.contains("show")}_configAfterMerge(e){return e.toggle=Boolean(e.toggle),e.parent=getElement(e.parent),e}_getDimension(){return this._element.classList.contains("collapse-horizontal")?WIDTH:HEIGHT}_initializeChildren(){if(!this._config.parent)return;const e=this._getFirstLevelChildren(SELECTOR_DATA_TOGGLE$9);for(const t of e){const e=SelectorEngine.getElementFromSelector(t);e&&this._addAriaAndCollapsedClass([t],this._isShown(e))}}_getFirstLevelChildren(e){const t=SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN,this._config.parent);return SelectorEngine.find(e,this._config.parent).filter(e=>!t.includes(e))}_addAriaAndCollapsedClass(e,t){if(e.length)for(const n of e)n.classList.toggle("collapsed",!t),n.setAttribute("aria-expanded",t)}}EventHandler.on(document,EVENT_CLICK_DATA_API$6,SELECTOR_DATA_TOGGLE$9,function(e){("A"===e.target.tagName||e.delegateTarget&&"A"===e.delegateTarget.tagName)&&e.preventDefault();for(const e of SelectorEngine.getMultipleElementsFromSelector(this))Collapse.getOrCreateInstance(e,{toggle:!1}).toggle()});const min=Math.min,max=Math.max,round=Math.round,floor=Math.floor,createCoords=e=>({x:e,y:e}),oppositeSideMap={left:"right",right:"left",bottom:"top",top:"bottom"};function clamp(e,t,n){return max(e,min(t,n))}function evaluate(e,t){return"function"==typeof e?e(t):e}function getSide(e){return e.split("-")[0]}function getAlignment(e){return e.split("-")[1]}function getOppositeAxis(e){return"x"===e?"y":"x"}function getAxisLength(e){return"y"===e?"height":"width"}function getSideAxis(e){const t=e[0];return"t"===t||"b"===t?"y":"x"}function getAlignmentAxis(e){return getOppositeAxis(getSideAxis(e))}function getAlignmentSides(e,t,n){void 0===n&&(n=!1);const i=getAlignment(e),s=getAlignmentAxis(e),o=getAxisLength(s);let a="x"===s?i===(n?"end":"start")?"right":"left":"start"===i?"bottom":"top";return t.reference[o]>t.floating[o]&&(a=getOppositePlacement(a)),[a,getOppositePlacement(a)]}function getExpandedPlacements(e){const t=getOppositePlacement(e);return[getOppositeAlignmentPlacement(e),t,getOppositeAlignmentPlacement(t)]}function getOppositeAlignmentPlacement(e){return e.includes("start")?e.replace("start","end"):e.replace("end","start")}const lrPlacement=["left","right"],rlPlacement=["right","left"],tbPlacement=["top","bottom"],btPlacement=["bottom","top"];function getSideList(e,t,n){switch(e){case"top":case"bottom":return n?t?rlPlacement:lrPlacement:t?lrPlacement:rlPlacement;case"left":case"right":return t?tbPlacement:btPlacement;default:return[]}}function getOppositeAxisPlacements(e,t,n,i){const s=getAlignment(e);let o=getSideList(getSide(e),"start"===n,i);return s&&(o=o.map(e=>e+"-"+s),t&&(o=o.concat(o.map(getOppositeAlignmentPlacement)))),o}function getOppositePlacement(e){const t=getSide(e);return oppositeSideMap[t]+e.slice(t.length)}function expandPaddingObject(e){return{top:0,right:0,bottom:0,left:0,...e}}function getPaddingObject(e){return"number"!=typeof e?expandPaddingObject(e):{top:e,right:e,bottom:e,left:e}}function rectToClientRect(e){const{x:t,y:n,width:i,height:s}=e;return{width:i,height:s,top:n,left:t,right:t+i,bottom:n+s,x:t,y:n}}function computeCoordsFromPlacement(e,t,n){let{reference:i,floating:s}=e;const o=getSideAxis(t),a=getAlignmentAxis(t),l=getAxisLength(a),r=getSide(t),c="y"===o,d=i.x+i.width/2-s.width/2,u=i.y+i.height/2-s.height/2,h=i[l]/2-s[l]/2;let _;switch(r){case"top":_={x:d,y:i.y-s.height};break;case"bottom":_={x:d,y:i.y+i.height};break;case"right":_={x:i.x+i.width,y:u};break;case"left":_={x:i.x-s.width,y:u};break;default:_={x:i.x,y:i.y}}switch(getAlignment(t)){case"start":_[a]-=h*(n&&c?-1:1);break;case"end":_[a]+=h*(n&&c?-1:1)}return _}async function detectOverflow(e,t){var n;void 0===t&&(t={});const{x:i,y:s,platform:o,rects:a,elements:l,strategy:r}=e,{boundary:c="clippingAncestors",rootBoundary:d="viewport",elementContext:u="floating",altBoundary:h=!1,padding:_=0}=evaluate(t,e),m=getPaddingObject(_),g=l[h?"floating"===u?"reference":"floating":u],p=rectToClientRect(await o.getClippingRect({element:null==(n=await(null==o.isElement?void 0:o.isElement(g)))||n?g:g.contextElement||await(null==o.getDocumentElement?void 0:o.getDocumentElement(l.floating)),boundary:c,rootBoundary:d,strategy:r})),E="floating"===u?{x:i,y:s,width:a.floating.width,height:a.floating.height}:a.reference,f=await(null==o.getOffsetParent?void 0:o.getOffsetParent(l.floating)),v=await(null==o.isElement?void 0:o.isElement(f))&&await(null==o.getScale?void 0:o.getScale(f))||{x:1,y:1},T=rectToClientRect(o.convertOffsetParentRelativeRectToViewportRelativeRect?await o.convertOffsetParentRelativeRectToViewportRelativeRect({elements:l,rect:E,offsetParent:f,strategy:r}):E);return{top:(p.top-T.top+m.top)/v.y,bottom:(T.bottom-p.bottom+m.bottom)/v.y,left:(p.left-T.left+m.left)/v.x,right:(T.right-p.right+m.right)/v.x}}const MAX_RESET_COUNT=50,computePosition$1=async(e,t,n)=>{const{placement:i="bottom",strategy:s="absolute",middleware:o=[],platform:a}=n,l=a.detectOverflow?a:{...a,detectOverflow:detectOverflow},r=await(null==a.isRTL?void 0:a.isRTL(t));let c=await a.getElementRects({reference:e,floating:t,strategy:s}),{x:d,y:u}=computeCoordsFromPlacement(c,i,r),h=i,_=0;const m={};for(let n=0;n<o.length;n++){const g=o[n];if(!g)continue;const{name:p,fn:E}=g,{x:f,y:v,data:T,reset:b}=await E({x:d,y:u,initialPlacement:i,placement:h,strategy:s,middlewareData:m,rects:c,platform:l,elements:{reference:e,floating:t}});d=null!=f?f:d,u=null!=v?v:u,m[p]={...m[p],...T},b&&_<50&&(_++,"object"==typeof b&&(b.placement&&(h=b.placement),b.rects&&(c=!0===b.rects?await a.getElementRects({reference:e,floating:t,strategy:s}):b.rects),({x:d,y:u}=computeCoordsFromPlacement(c,h,r))),n=-1)}return{x:d,y:u,placement:h,strategy:s,middlewareData:m}},arrow$1=e=>({name:"arrow",options:e,async fn(t){const{x:n,y:i,placement:s,rects:o,platform:a,elements:l,middlewareData:r}=t,{element:c,padding:d=0}=evaluate(e,t)||{};if(null==c)return{};const u=getPaddingObject(d),h={x:n,y:i},_=getAlignmentAxis(s),m=getAxisLength(_),g=await a.getDimensions(c),p="y"===_,E=p?"top":"left",f=p?"bottom":"right",v=p?"clientHeight":"clientWidth",T=o.reference[m]+o.reference[_]-h[_]-o.floating[m],b=h[_]-o.reference[_],A=await(null==a.getOffsetParent?void 0:a.getOffsetParent(c));let y=A?A[v]:0;y&&await(null==a.isElement?void 0:a.isElement(A))||(y=l.floating[v]||o.floating[m]);const S=T/2-b/2,D=y/2-g[m]/2-1,C=min(u[E],D),N=min(u[f],D),w=C,x=y-g[m]-N,L=y/2-g[m]/2+S,M=clamp(w,L,x),O=!r.arrow&&null!=getAlignment(s)&&L!==M&&o.reference[m]/2-(L<w?C:N)-g[m]/2<0,I=O?L<w?L-w:L-x:0;return{[_]:h[_]+I,data:{[_]:M,centerOffset:L-M-I,...O&&{alignmentOffset:I}},reset:O}}}),flip$1=function(e){return void 0===e&&(e={}),{name:"flip",options:e,async fn(t){var n,i;const{placement:s,middlewareData:o,rects:a,initialPlacement:l,platform:r,elements:c}=t,{mainAxis:d=!0,crossAxis:u=!0,fallbackPlacements:h,fallbackStrategy:_="bestFit",fallbackAxisSideDirection:m="none",flipAlignment:g=!0,...p}=evaluate(e,t);if(null!=(n=o.arrow)&&n.alignmentOffset)return{};const E=getSide(s),f=getSideAxis(l),v=getSide(l)===l,T=await(null==r.isRTL?void 0:r.isRTL(c.floating)),b=h||(v||!g?[getOppositePlacement(l)]:getExpandedPlacements(l)),A="none"!==m;!h&&A&&b.push(...getOppositeAxisPlacements(l,g,m,T));const y=[l,...b],S=await r.detectOverflow(t,p),D=[];let C=(null==(i=o.flip)?void 0:i.overflows)||[];if(d&&D.push(S[E]),u){const e=getAlignmentSides(s,a,T);D.push(S[e[0]],S[e[1]])}if(C=[...C,{placement:s,overflows:D}],!D.every(e=>e<=0)){var N,w;const e=((null==(N=o.flip)?void 0:N.index)||0)+1,t=y[e];if(t&&("alignment"!==u||f===getSideAxis(t)||C.every(e=>getSideAxis(e.placement)!==f||e.overflows[0]>0)))return{data:{index:e,overflows:C},reset:{placement:t}};let n=null==(w=C.filter(e=>e.overflows[0]<=0).sort((e,t)=>e.overflows[1]-t.overflows[1])[0])?void 0:w.placement;if(!n)switch(_){case"bestFit":{var x;const e=null==(x=C.filter(e=>{if(A){const t=getSideAxis(e.placement);return t===f||"y"===t}return!0}).map(e=>[e.placement,e.overflows.filter(e=>e>0).reduce((e,t)=>e+t,0)]).sort((e,t)=>e[1]-t[1])[0])?void 0:x[0];e&&(n=e);break}case"initialPlacement":n=l}if(s!==n)return{reset:{placement:n}}}return{}}}},originSides=new Set(["left","top"]);async function convertValueToCoords(e,t){const{placement:n,platform:i,elements:s}=e,o=await(null==i.isRTL?void 0:i.isRTL(s.floating)),a=getSide(n),l=getAlignment(n),r="y"===getSideAxis(n),c=originSides.has(a)?-1:1,d=o&&r?-1:1,u=evaluate(t,e);let{mainAxis:h,crossAxis:_,alignmentAxis:m}="number"==typeof u?{mainAxis:u,crossAxis:0,alignmentAxis:null}:{mainAxis:u.mainAxis||0,crossAxis:u.crossAxis||0,alignmentAxis:u.alignmentAxis};return l&&"number"==typeof m&&(_="end"===l?-1*m:m),r?{x:_*d,y:h*c}:{x:h*c,y:_*d}}const offset$1=function(e){return void 0===e&&(e=0),{name:"offset",options:e,async fn(t){var n,i;const{x:s,y:o,placement:a,middlewareData:l}=t,r=await convertValueToCoords(t,e);return a===(null==(n=l.offset)?void 0:n.placement)&&null!=(i=l.arrow)&&i.alignmentOffset?{}:{x:s+r.x,y:o+r.y,data:{...r,placement:a}}}}},shift$1=function(e){return void 0===e&&(e={}),{name:"shift",options:e,async fn(t){const{x:n,y:i,placement:s,platform:o}=t,{mainAxis:a=!0,crossAxis:l=!1,limiter:r={fn:e=>{let{x:t,y:n}=e;return{x:t,y:n}}},...c}=evaluate(e,t),d={x:n,y:i},u=await o.detectOverflow(t,c),h=getSideAxis(getSide(s)),_=getOppositeAxis(h);let m=d[_],g=d[h];if(a){const e="y"===_?"bottom":"right";m=clamp(m+u["y"===_?"top":"left"],m,m-u[e])}if(l){const e="y"===h?"bottom":"right";g=clamp(g+u["y"===h?"top":"left"],g,g-u[e])}const p=r.fn({...t,[_]:m,[h]:g});return{...p,data:{x:p.x-n,y:p.y-i,enabled:{[_]:a,[h]:l}}}}}};function hasWindow(){return"undefined"!=typeof window}function getNodeName(e){return isNode(e)?(e.nodeName||"").toLowerCase():"#document"}function getWindow(e){var t;return(null==e||null==(t=e.ownerDocument)?void 0:t.defaultView)||window}function getDocumentElement(e){var t;return null==(t=(isNode(e)?e.ownerDocument:e.document)||window.document)?void 0:t.documentElement}function isNode(e){return!!hasWindow()&&(e instanceof Node||e instanceof getWindow(e).Node)}function isElement(e){return!!hasWindow()&&(e instanceof Element||e instanceof getWindow(e).Element)}function isHTMLElement(e){return!!hasWindow()&&(e instanceof HTMLElement||e instanceof getWindow(e).HTMLElement)}function isShadowRoot(e){return!(!hasWindow()||"undefined"==typeof ShadowRoot)&&(e instanceof ShadowRoot||e instanceof getWindow(e).ShadowRoot)}function isOverflowElement(e){const{overflow:t,overflowX:n,overflowY:i,display:s}=getComputedStyle$1(e);return/auto|scroll|overlay|hidden|clip/.test(t+i+n)&&"inline"!==s&&"contents"!==s}function isTableElement(e){return/^(table|td|th)$/.test(getNodeName(e))}function isTopLayer(e){try{if(e.matches(":popover-open"))return!0}catch(e){}try{return e.matches(":modal")}catch(e){return!1}}const willChangeRe=/transform|translate|scale|rotate|perspective|filter/,containRe=/paint|layout|strict|content/,isNotNone=e=>!!e&&"none"!==e;let isWebKitValue;function isContainingBlock(e){const t=isElement(e)?getComputedStyle$1(e):e;return isNotNone(t.transform)||isNotNone(t.translate)||isNotNone(t.scale)||isNotNone(t.rotate)||isNotNone(t.perspective)||!isWebKit()&&(isNotNone(t.backdropFilter)||isNotNone(t.filter))||willChangeRe.test(t.willChange||"")||containRe.test(t.contain||"")}function getContainingBlock(e){let t=getParentNode(e);for(;isHTMLElement(t)&&!isLastTraversableNode(t);){if(isContainingBlock(t))return t;if(isTopLayer(t))return null;t=getParentNode(t)}return null}function isWebKit(){return null==isWebKitValue&&(isWebKitValue="undefined"!=typeof CSS&&CSS.supports&&CSS.supports("-webkit-backdrop-filter","none")),isWebKitValue}function isLastTraversableNode(e){return/^(html|body|#document)$/.test(getNodeName(e))}function getComputedStyle$1(e){return getWindow(e).getComputedStyle(e)}function getNodeScroll(e){return isElement(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.scrollX,scrollTop:e.scrollY}}function getParentNode(e){if("html"===getNodeName(e))return e;const t=e.assignedSlot||e.parentNode||isShadowRoot(e)&&e.host||getDocumentElement(e);return isShadowRoot(t)?t.host:t}function getNearestOverflowAncestor(e){const t=getParentNode(e);return isLastTraversableNode(t)?e.ownerDocument?e.ownerDocument.body:e.body:isHTMLElement(t)&&isOverflowElement(t)?t:getNearestOverflowAncestor(t)}function getOverflowAncestors(e,t,n){var i;void 0===t&&(t=[]),void 0===n&&(n=!0);const s=getNearestOverflowAncestor(e),o=s===(null==(i=e.ownerDocument)?void 0:i.body),a=getWindow(s);if(o){const e=getFrameElement(a);return t.concat(a,a.visualViewport||[],isOverflowElement(s)?s:[],e&&n?getOverflowAncestors(e):[])}return t.concat(s,getOverflowAncestors(s,[],n))}function getFrameElement(e){return e.parent&&Object.getPrototypeOf(e.parent)?e.frameElement:null}function getCssDimensions(e){const t=getComputedStyle$1(e);let n=parseFloat(t.width)||0,i=parseFloat(t.height)||0;const s=isHTMLElement(e),o=s?e.offsetWidth:n,a=s?e.offsetHeight:i,l=round(n)!==o||round(i)!==a;return l&&(n=o,i=a),{width:n,height:i,$:l}}function unwrapElement(e){return isElement(e)?e:e.contextElement}function getScale(e){const t=unwrapElement(e);if(!isHTMLElement(t))return createCoords(1);const n=t.getBoundingClientRect(),{width:i,height:s,$:o}=getCssDimensions(t);let a=(o?round(n.width):n.width)/i,l=(o?round(n.height):n.height)/s;return a&&Number.isFinite(a)||(a=1),l&&Number.isFinite(l)||(l=1),{x:a,y:l}}const noOffsets=createCoords(0);function getVisualOffsets(e){const t=getWindow(e);return isWebKit()&&t.visualViewport?{x:t.visualViewport.offsetLeft,y:t.visualViewport.offsetTop}:noOffsets}function shouldAddVisualOffsets(e,t,n){return void 0===t&&(t=!1),!(!n||t&&n!==getWindow(e))&&t}function getBoundingClientRect(e,t,n,i){void 0===t&&(t=!1),void 0===n&&(n=!1);const s=e.getBoundingClientRect(),o=unwrapElement(e);let a=createCoords(1);t&&(i?isElement(i)&&(a=getScale(i)):a=getScale(e));const l=shouldAddVisualOffsets(o,n,i)?getVisualOffsets(o):createCoords(0);let r=(s.left+l.x)/a.x,c=(s.top+l.y)/a.y,d=s.width/a.x,u=s.height/a.y;if(o){const e=getWindow(o),t=i&&isElement(i)?getWindow(i):i;let n=e,s=getFrameElement(n);for(;s&&i&&t!==n;){const e=getScale(s),t=s.getBoundingClientRect(),i=getComputedStyle$1(s),o=t.left+(s.clientLeft+parseFloat(i.paddingLeft))*e.x,a=t.top+(s.clientTop+parseFloat(i.paddingTop))*e.y;r*=e.x,c*=e.y,d*=e.x,u*=e.y,r+=o,c+=a,n=getWindow(s),s=getFrameElement(n)}}return rectToClientRect({width:d,height:u,x:r,y:c})}function getWindowScrollBarX(e,t){const n=getNodeScroll(e).scrollLeft;return t?t.left+n:getBoundingClientRect(getDocumentElement(e)).left+n}function getHTMLOffset(e,t){const n=e.getBoundingClientRect();return{x:n.left+t.scrollLeft-getWindowScrollBarX(e,n),y:n.top+t.scrollTop}}function convertOffsetParentRelativeRectToViewportRelativeRect(e){let{elements:t,rect:n,offsetParent:i,strategy:s}=e;const o="fixed"===s,a=getDocumentElement(i),l=!!t&&isTopLayer(t.floating);if(i===a||l&&o)return n;let r={scrollLeft:0,scrollTop:0},c=createCoords(1);const d=createCoords(0),u=isHTMLElement(i);if((u||!u&&!o)&&(("body"!==getNodeName(i)||isOverflowElement(a))&&(r=getNodeScroll(i)),u)){const e=getBoundingClientRect(i);c=getScale(i),d.x=e.x+i.clientLeft,d.y=e.y+i.clientTop}const h=!a||u||o?createCoords(0):getHTMLOffset(a,r);return{width:n.width*c.x,height:n.height*c.y,x:n.x*c.x-r.scrollLeft*c.x+d.x+h.x,y:n.y*c.y-r.scrollTop*c.y+d.y+h.y}}function getClientRects(e){return Array.from(e.getClientRects())}function getDocumentRect(e){const t=getDocumentElement(e),n=getNodeScroll(e),i=e.ownerDocument.body,s=max(t.scrollWidth,t.clientWidth,i.scrollWidth,i.clientWidth),o=max(t.scrollHeight,t.clientHeight,i.scrollHeight,i.clientHeight);let a=-n.scrollLeft+getWindowScrollBarX(e);const l=-n.scrollTop;return"rtl"===getComputedStyle$1(i).direction&&(a+=max(t.clientWidth,i.clientWidth)-s),{width:s,height:o,x:a,y:l}}const SCROLLBAR_MAX=25;function getViewportRect(e,t){const n=getWindow(e),i=getDocumentElement(e),s=n.visualViewport;let o=i.clientWidth,a=i.clientHeight,l=0,r=0;if(s){o=s.width,a=s.height;const e=isWebKit();(!e||e&&"fixed"===t)&&(l=s.offsetLeft,r=s.offsetTop)}const c=getWindowScrollBarX(i);if(c<=0){const e=i.ownerDocument,t=e.body,n=getComputedStyle(t),s="CSS1Compat"===e.compatMode&&parseFloat(n.marginLeft)+parseFloat(n.marginRight)||0,a=Math.abs(i.clientWidth-t.clientWidth-s);a<=25&&(o-=a)}else c<=25&&(o+=c);return{width:o,height:a,x:l,y:r}}function getInnerBoundingClientRect(e,t){const n=getBoundingClientRect(e,!0,"fixed"===t),i=n.top+e.clientTop,s=n.left+e.clientLeft,o=isHTMLElement(e)?getScale(e):createCoords(1);return{width:e.clientWidth*o.x,height:e.clientHeight*o.y,x:s*o.x,y:i*o.y}}function getClientRectFromClippingAncestor(e,t,n){let i;if("viewport"===t)i=getViewportRect(e,n);else if("document"===t)i=getDocumentRect(getDocumentElement(e));else if(isElement(t))i=getInnerBoundingClientRect(t,n);else{const n=getVisualOffsets(e);i={x:t.x-n.x,y:t.y-n.y,width:t.width,height:t.height}}return rectToClientRect(i)}function hasFixedPositionAncestor(e,t){const n=getParentNode(e);return!(n===t||!isElement(n)||isLastTraversableNode(n))&&("fixed"===getComputedStyle$1(n).position||hasFixedPositionAncestor(n,t))}function getClippingElementAncestors(e,t){const n=t.get(e);if(n)return n;let i=getOverflowAncestors(e,[],!1).filter(e=>isElement(e)&&"body"!==getNodeName(e)),s=null;const o="fixed"===getComputedStyle$1(e).position;let a=o?getParentNode(e):e;for(;isElement(a)&&!isLastTraversableNode(a);){const t=getComputedStyle$1(a),n=isContainingBlock(a);n||"fixed"!==t.position||(s=null),(o?!n&&!s:!n&&"static"===t.position&&s&&("absolute"===s.position||"fixed"===s.position)||isOverflowElement(a)&&!n&&hasFixedPositionAncestor(e,a))?i=i.filter(e=>e!==a):s=t,a=getParentNode(a)}return t.set(e,i),i}function getClippingRect(e){let{element:t,boundary:n,rootBoundary:i,strategy:s}=e;const o=[..."clippingAncestors"===n?isTopLayer(t)?[]:getClippingElementAncestors(t,this._c):[].concat(n),i],a=getClientRectFromClippingAncestor(t,o[0],s);let l=a.top,r=a.right,c=a.bottom,d=a.left;for(let e=1;e<o.length;e++){const n=getClientRectFromClippingAncestor(t,o[e],s);l=max(n.top,l),r=min(n.right,r),c=min(n.bottom,c),d=max(n.left,d)}return{width:r-d,height:c-l,x:d,y:l}}function getDimensions(e){const{width:t,height:n}=getCssDimensions(e);return{width:t,height:n}}function getRectRelativeToOffsetParent(e,t,n){const i=isHTMLElement(t),s=getDocumentElement(t),o="fixed"===n,a=getBoundingClientRect(e,!0,o,t);let l={scrollLeft:0,scrollTop:0};const r=createCoords(0);function c(){r.x=getWindowScrollBarX(s)}if(i||!i&&!o)if(("body"!==getNodeName(t)||isOverflowElement(s))&&(l=getNodeScroll(t)),i){const e=getBoundingClientRect(t,!0,o,t);r.x=e.x+t.clientLeft,r.y=e.y+t.clientTop}else s&&c();o&&!i&&s&&c();const d=!s||i||o?createCoords(0):getHTMLOffset(s,l);return{x:a.left+l.scrollLeft-r.x-d.x,y:a.top+l.scrollTop-r.y-d.y,width:a.width,height:a.height}}function isStaticPositioned(e){return"static"===getComputedStyle$1(e).position}function getTrueOffsetParent(e,t){if(!isHTMLElement(e)||"fixed"===getComputedStyle$1(e).position)return null;if(t)return t(e);let n=e.offsetParent;return getDocumentElement(e)===n&&(n=n.ownerDocument.body),n}function getOffsetParent(e,t){const n=getWindow(e);if(isTopLayer(e))return n;if(!isHTMLElement(e)){let t=getParentNode(e);for(;t&&!isLastTraversableNode(t);){if(isElement(t)&&!isStaticPositioned(t))return t;t=getParentNode(t)}return n}let i=getTrueOffsetParent(e,t);for(;i&&isTableElement(i)&&isStaticPositioned(i);)i=getTrueOffsetParent(i,t);return i&&isLastTraversableNode(i)&&isStaticPositioned(i)&&!isContainingBlock(i)?n:i||getContainingBlock(e)||n}const getElementRects=async function(e){const t=this.getOffsetParent||getOffsetParent,n=this.getDimensions,i=await n(e.floating);return{reference:getRectRelativeToOffsetParent(e.reference,await t(e.floating),e.strategy),floating:{x:0,y:0,width:i.width,height:i.height}}};function isRTL(e){return"rtl"===getComputedStyle$1(e).direction}const platform={convertOffsetParentRelativeRectToViewportRelativeRect:convertOffsetParentRelativeRectToViewportRelativeRect,getDocumentElement:getDocumentElement,getClippingRect:getClippingRect,getOffsetParent:getOffsetParent,getElementRects:getElementRects,getClientRects:getClientRects,getDimensions:getDimensions,getScale:getScale,isElement:isElement,isRTL:isRTL};function rectsAreEqual(e,t){return e.x===t.x&&e.y===t.y&&e.width===t.width&&e.height===t.height}function observeMove(e,t){let n,i=null;const s=getDocumentElement(e);function o(){var e;clearTimeout(n),null==(e=i)||e.disconnect(),i=null}return function a(l,r){void 0===l&&(l=!1),void 0===r&&(r=1),o();const c=e.getBoundingClientRect(),{left:d,top:u,width:h,height:_}=c;if(l||t(),!h||!_)return;const m={rootMargin:-floor(u)+"px "+-floor(s.clientWidth-(d+h))+"px "+-floor(s.clientHeight-(u+_))+"px "+-floor(d)+"px",threshold:max(0,min(1,r))||1};let g=!0;function p(t){const i=t[0].intersectionRatio;if(i!==r){if(!g)return a();i?a(!1,i):n=setTimeout(()=>{a(!1,1e-7)},1e3)}1!==i||rectsAreEqual(c,e.getBoundingClientRect())||a(),g=!1}try{i=new IntersectionObserver(p,{...m,root:s.ownerDocument})}catch(e){i=new IntersectionObserver(p,m)}i.observe(e)}(!0),o}function autoUpdate(e,t,n,i){void 0===i&&(i={});const{ancestorScroll:s=!0,ancestorResize:o=!0,elementResize:a="function"==typeof ResizeObserver,layoutShift:l="function"==typeof IntersectionObserver,animationFrame:r=!1}=i,c=unwrapElement(e),d=s||o?[...c?getOverflowAncestors(c):[],...t?getOverflowAncestors(t):[]]:[];d.forEach(e=>{s&&e.addEventListener("scroll",n,{passive:!0}),o&&e.addEventListener("resize",n)});const u=c&&l?observeMove(c,n):null;let h,_=-1,m=null;a&&(m=new ResizeObserver(e=>{let[i]=e;i&&i.target===c&&m&&t&&(m.unobserve(t),cancelAnimationFrame(_),_=requestAnimationFrame(()=>{var e;null==(e=m)||e.observe(t)})),n()}),c&&!r&&m.observe(c),t&&m.observe(t));let g=r?getBoundingClientRect(e):null;return r&&function t(){const i=getBoundingClientRect(e);g&&!rectsAreEqual(g,i)&&n(),g=i,h=requestAnimationFrame(t)}(),n(),()=>{var e;d.forEach(e=>{s&&e.removeEventListener("scroll",n),o&&e.removeEventListener("resize",n)}),null==u||u(),null==(e=m)||e.disconnect(),m=null,r&&cancelAnimationFrame(h)}}const offset=offset$1,shift=shift$1,flip=flip$1,arrow=arrow$1,computePosition=(e,t,n)=>{const i=new Map,s={platform:platform,...n},o={...s.platform,_c:i};return computePosition$1(e,t,{...s,platform:o})},BREAKPOINTS={sm:576,md:768,lg:1024,xl:1280,"2xl":1536},parseResponsivePlacement=(e,t="bottom")=>{if(!e||!e.includes(":"))return null;const n=e.split(/\s+/),i={xs:t};for(const e of n)if(e.includes(":")){const[t,n]=e.split(":");void 0!==BREAKPOINTS[t]&&(i[t]=n)}else i.xs=e;return i},getResponsivePlacement=(e,t="bottom")=>{if(!e)return t;const n=window.innerWidth;let i=e.xs||t;const s=["sm","md","lg","xl","2xl"];for(const t of s)n>=BREAKPOINTS[t]&&e[t]&&(i=e[t]);return i},createBreakpointListeners=e=>{const t=[];for(const n of Object.keys(BREAKPOINTS)){const i=BREAKPOINTS[n],s=window.matchMedia(`(min-width: ${i}px)`);s.addEventListener("change",e),t.push({mql:s,handler:e})}return t},disposeBreakpointListeners=e=>{for(const{mql:t,handler:n}of e)t.removeEventListener("change",n)},NAME$h="menu",DATA_KEY$d="bs.menu",EVENT_KEY$e=".bs.menu",DATA_API_KEY$9=".data-api",ESCAPE_KEY$2="Escape",TAB_KEY$1="Tab",ARROW_UP_KEY$2="ArrowUp",ARROW_DOWN_KEY$2="ArrowDown",ARROW_LEFT_KEY$1="ArrowLeft",ARROW_RIGHT_KEY$1="ArrowRight",HOME_KEY$2="Home",END_KEY$2="End",ENTER_KEY$1="Enter",SPACE_KEY$1=" ",RIGHT_MOUSE_BUTTON=2,SUBMENU_CLOSE_DELAY=100,EVENT_HIDE$5="hide.bs.menu",EVENT_HIDDEN$7="hidden.bs.menu",EVENT_SHOW$6="show.bs.menu",EVENT_SHOWN$5="shown.bs.menu",EVENT_CLICK_DATA_API$5="click.bs.menu.data-api",EVENT_KEYDOWN_DATA_API="keydown.bs.menu.data-api",EVENT_KEYUP_DATA_API="keyup.bs.menu.data-api",CLASS_NAME_SHOW$4="show",SELECTOR_DATA_TOGGLE$8='[data-bs-toggle="menu"]:not(.disabled):not(:disabled)',SELECTOR_MENU$2=".menu",SELECTOR_SUBMENU=".submenu",SELECTOR_SUBMENU_TOGGLE=".submenu > .menu-item",SELECTOR_NAVBAR_NAV=".navbar-nav",SELECTOR_VISIBLE_ITEMS$1=".menu-item:not(.disabled):not(:disabled)",DEFAULT_PLACEMENT="bottom-start",SUBMENU_PLACEMENT="end-start",resolveLogicalPlacement=e=>isRTL$1()?e.replace(/^start(?=-|$)/,"right").replace(/^end(?=-|$)/,"left"):e.replace(/^start(?=-|$)/,"left").replace(/^end(?=-|$)/,"right"),triangleSign=(e,t,n)=>(e.x-n.x)*(t.y-n.y)-(t.x-n.x)*(e.y-n.y),Default$g={autoClose:!0,boundary:"clippingParents",container:!1,display:"dynamic",offset:[0,2],floatingConfig:null,menu:null,placement:"bottom-start",reference:"toggle",strategy:"absolute",submenuTrigger:"both",submenuDelay:100},DefaultType$g={autoClose:"(boolean|string)",boundary:"(string|element)",container:"(string|element|boolean)",display:"string",offset:"(array|string|function)",floatingConfig:"(null|object|function)",menu:"(null|element)",placement:"string",reference:"(string|element|object)",strategy:"string",submenuTrigger:"string",submenuDelay:"number"};class Menu extends BaseComponent{static _openInstances=new Set;constructor(e,t){super(e,t),this._floatingCleanup=null,this._mediaQueryListeners=[],this._responsivePlacements=null,this._parent=this._element.parentNode,this._openSubmenus=new Map,this._submenuCloseTimeouts=new Map,this._hoverIntentData=null,this._menu=this._config.menu||this._findMenu(),!this._config.menu&&this._menu&&(this._parent=this._findWrapper(this._menu)),this._isSubmenu=this._parent.classList?.contains("submenu"),this._menuOriginalParent=this._menu?.parentNode,this._parseResponsivePlacements(),this._setupSubmenuListeners()}static get Default(){return Default$g}static get DefaultType(){return DefaultType$g}static get NAME(){return"menu"}toggle(){return this._isShown()?this.hide():this.show()}show(){if(isDisabled(this._element)||this._isShown())return;const e={relatedTarget:this._element};if(!EventHandler.trigger(this._element,EVENT_SHOW$6,e).defaultPrevented){if(this._moveMenuToContainer(),this._createFloating(),"ontouchstart"in document.documentElement&&!this._parent.closest(".navbar-nav"))for(const e of document.body.children)EventHandler.on(e,"mouseover",noop);this._element.focus({focusVisible:!1}),this._element.setAttribute("aria-expanded","true"),this._menu.classList.add("show"),this._element.classList.add("show"),this._parent&&this._parent.classList.add("show"),Menu._openInstances.add(this),EventHandler.trigger(this._element,EVENT_SHOWN$5,e)}}hide(){if(isDisabled(this._element)||!this._isShown())return;const e={relatedTarget:this._element};this._completeHide(e)}dispose(){this._disposeFloating(),this._restoreMenuToOriginalParent(),this._disposeMediaQueryListeners(),this._closeAllSubmenus(),this._clearAllSubmenuTimeouts(),Menu._openInstances.delete(this),super.dispose()}update(){this._floatingCleanup&&this._updateFloatingPosition()}_findMenu(){const e=SelectorEngine.closest(this._element,":has(.menu)");return SelectorEngine.next(this._element,".menu")[0]||SelectorEngine.prev(this._element,".menu")[0]||SelectorEngine.findOne(".menu",e||this._parent)}_findWrapper(e){let t=this._element.parentNode;for(;t instanceof Element&&!t.contains(e);)t=t.parentNode;return t instanceof Element?t:this._element.parentNode}_completeHide(e){if(!EventHandler.trigger(this._element,EVENT_HIDE$5,e).defaultPrevented){if(this._closeAllSubmenus(),"ontouchstart"in document.documentElement)for(const e of document.body.children)EventHandler.off(e,"mouseover",noop);this._disposeFloating(),this._restoreMenuToOriginalParent(),this._menu.classList.remove("show"),this._element.classList.remove("show"),this._parent&&this._parent.classList.remove("show"),this._element.setAttribute("aria-expanded","false"),Manipulator.removeDataAttribute(this._menu,"placement"),Manipulator.removeDataAttribute(this._menu,"display"),Menu._openInstances.delete(this),EventHandler.trigger(this._element,EVENT_HIDDEN$7,e)}}_getConfig(e){if("object"==typeof(e=super._getConfig(e)).reference&&!isElement$1(e.reference)&&"function"!=typeof e.reference.getBoundingClientRect)throw new TypeError(`${"menu".toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`);return e}_createFloating(){if("static"===this._config.display)return void Manipulator.setDataAttribute(this._menu,"display","static");let e=this._element;"parent"===this._config.reference?e=this._parent:isElement$1(this._config.reference)?e=getElement(this._config.reference):"object"==typeof this._config.reference&&(e=this._config.reference),this._updateFloatingPosition(e),this._floatingCleanup=autoUpdate(e,this._menu,()=>this._updateFloatingPosition(e))}async _updateFloatingPosition(e=null){if(!this._menu)return;e||(e="parent"===this._config.reference?this._parent:isElement$1(this._config.reference)?getElement(this._config.reference):"object"==typeof this._config.reference?this._config.reference:this._element);const t=this._getPlacement(),n=this._getFloatingMiddleware(),i=this._getFloatingConfig(t,n);await this._applyFloatingPosition(e,this._menu,i.placement,i.middleware,i.strategy)}_isShown(){return this._menu.classList.contains("show")}_getPlacement(){const e=this._responsivePlacements?getResponsivePlacement(this._responsivePlacements,"bottom-start"):this._config.placement;return resolveLogicalPlacement(e)}_parseResponsivePlacements(){this._responsivePlacements=parseResponsivePlacement(this._config.placement,"bottom-start"),this._responsivePlacements&&this._setupMediaQueryListeners()}_setupMediaQueryListeners(){this._disposeMediaQueryListeners(),this._mediaQueryListeners=createBreakpointListeners(()=>{this._isShown()&&this._updateFloatingPosition()})}_disposeMediaQueryListeners(){disposeBreakpointListeners(this._mediaQueryListeners),this._mediaQueryListeners=[]}_getOffset(){const{offset:e}=this._config;return"string"==typeof e?e.split(",").map(e=>Number.parseInt(e,10)):"function"==typeof e?({placement:t,rects:n})=>e({placement:t,reference:n.reference,floating:n.floating},this._element):e}_getFloatingMiddleware(){const e=this._getOffset();return[offset("function"==typeof e?e:{mainAxis:e[1]||0,crossAxis:e[0]||0}),flip({fallbackPlacements:this._getFallbackPlacements()}),shift({boundary:"clippingParents"===this._config.boundary?"clippingAncestors":this._config.boundary})]}_getFallbackPlacements(){return{bottom:["top","bottom-start","bottom-end","top-start","top-end"],"bottom-start":["top-start","bottom-end","top-end"],"bottom-end":["top-end","bottom-start","top-start"],top:["bottom","top-start","top-end","bottom-start","bottom-end"],"top-start":["bottom-start","top-end","bottom-end"],"top-end":["bottom-end","top-start","bottom-start"],right:["left","right-start","right-end","left-start","left-end"],"right-start":["left-start","right-end","left-end","top-start","bottom-start"],"right-end":["left-end","right-start","left-start","top-end","bottom-end"],left:["right","left-start","left-end","right-start","right-end"],"left-start":["right-start","left-end","right-end","top-start","bottom-start"],"left-end":["right-end","left-start","right-start","top-end","bottom-end"]}[this._getPlacement()]||["top","bottom","right","left"]}_getFloatingConfig(e,t){const n={placement:e,middleware:t,strategy:this._config.strategy};return{...n,...execute(this._config.floatingConfig,[void 0,n])}}_disposeFloating(){this._floatingCleanup&&(this._floatingCleanup(),this._floatingCleanup=null)}_getContainer(){const{container:e}=this._config;return!1===e?null:!0===e?document.body:getElement(e)}_moveMenuToContainer(){const e=this._getContainer();e&&this._menu&&this._menu.parentNode!==e&&e.append(this._menu)}_restoreMenuToOriginalParent(){this._menuOriginalParent&&this._menu&&this._menu.parentNode!==this._menuOriginalParent&&this._menuOriginalParent.append(this._menu)}async _applyFloatingPosition(e,t,n,i,s="absolute"){if(!t.isConnected)return null;const{x:o,y:a,placement:l}=await computePosition(e,t,{placement:n,middleware:i,strategy:s});return t.isConnected?(Object.assign(t.style,{position:s,left:`${o}px`,top:`${a}px`,margin:"0"}),Manipulator.setDataAttribute(t,"placement",l),l):null}_setupSubmenuListeners(){"hover"!==this._config.submenuTrigger&&"both"!==this._config.submenuTrigger||(EventHandler.on(this._menu,"mouseenter",".submenu > .menu-item",e=>{this._onSubmenuTriggerEnter(e)}),EventHandler.on(this._menu,"mouseleave",".submenu",e=>{this._onSubmenuLeave(e)}),EventHandler.on(this._menu,"mousemove",e=>{this._trackMousePosition(e)})),"click"!==this._config.submenuTrigger&&"both"!==this._config.submenuTrigger||EventHandler.on(this._menu,"click",".submenu > .menu-item",e=>{this._onSubmenuTriggerClick(e)})}_onSubmenuTriggerEnter(e){const t=e.target.closest(".submenu > .menu-item");if(!t)return;const n=t.closest(".submenu"),i=SelectorEngine.findOne(".menu",n);i&&(this._cancelSubmenuCloseTimeout(i),this._closeSiblingSubmenus(n),this._openSubmenu(t,i,n))}_onSubmenuLeave(e){const t=e.target.closest(".submenu"),n=SelectorEngine.findOne(".menu",t);n&&this._openSubmenus.has(n)&&(this._isMovingTowardSubmenu(e,n)||this._scheduleSubmenuClose(n,t))}_onSubmenuTriggerClick(e){const t=e.target.closest(".submenu > .menu-item");if(!t)return;e.preventDefault(),e.stopPropagation();const n=t.closest(".submenu"),i=SelectorEngine.findOne(".menu",n);i&&(this._openSubmenus.has(i)?this._closeSubmenu(i,n):(this._closeSiblingSubmenus(n),this._openSubmenu(t,i,n)))}_openSubmenu(e,t,n){if(this._openSubmenus.has(t))return;e.setAttribute("aria-expanded","true"),e.setAttribute("aria-haspopup","true"),t.style.opacity="0",t.classList.add("show"),n.classList.add("show");const i=this._createSubmenuFloating(e,t,n);this._openSubmenus.set(t,i),EventHandler.on(t,"mouseenter",()=>{this._cancelSubmenuCloseTimeout(t)})}_closeSubmenu(e,t){if(!this._openSubmenus.has(e))return;const n=SelectorEngine.find(".submenu .menu.show",e);for(const e of n){const t=e.closest(".submenu");this._closeSubmenu(e,t)}const i=SelectorEngine.findOne(".submenu > .menu-item",t),s=this._openSubmenus.get(e);s&&s(),this._openSubmenus.delete(e),EventHandler.off(e,"mouseenter"),i&&i.setAttribute("aria-expanded","false"),e.classList.remove("show"),t.classList.remove("show"),e.style.opacity=""}_closeAllSubmenus(){for(const[e]of this._openSubmenus){const t=e.closest(".submenu");this._closeSubmenu(e,t)}}_closeSiblingSubmenus(e){const t=e.parentNode,n=SelectorEngine.find(".submenu > .menu.show",t);for(const t of n){const n=t.closest(".submenu");n!==e&&this._closeSubmenu(t,n)}}_createSubmenuFloating(e,t,n){const i=n,s=resolveLogicalPlacement("end-start"),o=[offset({mainAxis:0,crossAxis:-4}),flip({fallbackPlacements:[resolveLogicalPlacement("start-start"),resolveLogicalPlacement("end-end"),resolveLogicalPlacement("start-end")]}),shift({padding:8})],a=()=>this._applyFloatingPosition(i,t,s,o).then(e=>(t.style.opacity="",e));return a(),autoUpdate(i,t,a)}_scheduleSubmenuClose(e,t){this._cancelSubmenuCloseTimeout(e);const n=setTimeout(()=>{this._closeSubmenu(e,t),this._submenuCloseTimeouts.delete(e)},this._config.submenuDelay);this._submenuCloseTimeouts.set(e,n)}_cancelSubmenuCloseTimeout(e){const t=this._submenuCloseTimeouts.get(e);t&&(clearTimeout(t),this._submenuCloseTimeouts.delete(e))}_clearAllSubmenuTimeouts(){for(const e of this._submenuCloseTimeouts.values())clearTimeout(e);this._submenuCloseTimeouts.clear()}_trackMousePosition(e){this._hoverIntentData={x:e.clientX,y:e.clientY,timestamp:Date.now()}}_isMovingTowardSubmenu(e,t){if(!this._hoverIntentData)return!1;const n=t.getBoundingClientRect(),i={x:e.clientX,y:e.clientY},s={x:this._hoverIntentData.x,y:this._hoverIntentData.y},o=isRTL$1()?n.right:n.left,a={x:o,y:n.top},l={x:o,y:n.bottom};return this._pointInTriangle(i,s,a,l)}_pointInTriangle(e,t,n,i){const s=triangleSign(e,t,n),o=triangleSign(e,n,i),a=triangleSign(e,i,t);return!((s<0||o<0||a<0)&&(s>0||o>0||a>0))}_selectMenuItem({key:e,target:t}){const n=t.closest(".menu")||this._menu,i=SelectorEngine.find(`:scope > ${SELECTOR_VISIBLE_ITEMS$1}`,n).filter(e=>isVisible(e));i.length&&getNextActiveElement(i,t,e===ARROW_DOWN_KEY$2,!i.includes(t)).focus()}_handleSubmenuKeydown(e){const{key:t,target:n}=e,i=isRTL$1(),s=i?ARROW_LEFT_KEY$1:ARROW_RIGHT_KEY$1,o=i?ARROW_RIGHT_KEY$1:ARROW_LEFT_KEY$1,a=n.closest(".submenu"),l=a&&n.matches(".submenu > .menu-item");if((t===ENTER_KEY$1||t===SPACE_KEY$1)&&l){e.preventDefault(),e.stopPropagation();const t=SelectorEngine.findOne(".menu",a);return t&&(this._closeSiblingSubmenus(a),this._openSubmenu(n,t,a),requestAnimationFrame(()=>{const e=SelectorEngine.findOne(SELECTOR_VISIBLE_ITEMS$1,t);e&&e.focus()})),!0}if(t===s&&l){e.preventDefault(),e.stopPropagation();const t=SelectorEngine.findOne(".menu",a);return t&&(this._closeSiblingSubmenus(a),this._openSubmenu(n,t,a),requestAnimationFrame(()=>{const e=SelectorEngine.findOne(SELECTOR_VISIBLE_ITEMS$1,t);e&&e.focus()})),!0}if(t===o){const t=n.closest(".menu"),i=t?.closest(".submenu");if(i){e.preventDefault(),e.stopPropagation();const n=SelectorEngine.findOne(".submenu > .menu-item",i);return this._closeSubmenu(t,i),n&&n.focus(),!0}}if(t===HOME_KEY$2||t===END_KEY$2){e.preventDefault(),e.stopPropagation();const i=n.closest(".menu"),s=SelectorEngine.find(`:scope > ${SELECTOR_VISIBLE_ITEMS$1}`,i).filter(e=>isVisible(e));return s.length&&(t===HOME_KEY$2?s[0]:s.at(-1)).focus(),!0}return!1}static clearMenus(e){if(2!==e.button&&("keyup"!==e.type||"Tab"===e.key))for(const t of Menu._openInstances){if(!1===t._config.autoClose)continue;const n=e.composedPath(),i=n.includes(t._menu);if(n.includes(t._element)||"inside"===t._config.autoClose&&!i||"outside"===t._config.autoClose&&i)continue;const s=e.target.closest?.("form"),o=Boolean(s)&&t._menu.contains(s);if(t._menu.contains(e.target)&&("keyup"===e.type&&"Tab"===e.key||/input|select|option|textarea|form/i.test(e.target.tagName)||o))continue;const a={relatedTarget:t._element};"click"===e.type&&(a.clickEvent=e),t._completeHide(a)}}static dataApiKeydownHandler(e){const t=/input|textarea/i.test(e.target.tagName)||e.target.isContentEditable,n="Escape"===e.key,i=[ARROW_UP_KEY$2,ARROW_DOWN_KEY$2].includes(e.key),s=[ARROW_LEFT_KEY$1,ARROW_RIGHT_KEY$1].includes(e.key),o=[HOME_KEY$2,END_KEY$2].includes(e.key),a=[ENTER_KEY$1,SPACE_KEY$1].includes(e.key),l=e.target.matches(".submenu > .menu-item");if(!(i||n||s||o||a&&l))return;if(t&&!n)return;const r=this.matches(SELECTOR_DATA_TOGGLE$8)?this:SelectorEngine.prev(this,SELECTOR_DATA_TOGGLE$8)[0]||SelectorEngine.next(this,SELECTOR_DATA_TOGGLE$8)[0]||SelectorEngine.findOne(SELECTOR_DATA_TOGGLE$8,e.delegateTarget.parentNode);if(!r)return;const c=Menu.getOrCreateInstance(r);if(!(s||o||a&&l)||!c._handleSubmenuKeydown(e)){if(i)return e.preventDefault(),e.stopPropagation(),c.show(),void c._selectMenuItem(e);if(n&&c._isShown()){e.preventDefault(),e.stopPropagation();const t=e.target.closest(".menu"),n=t?.closest(".submenu");if(n&&c._openSubmenus.size>0){const e=SelectorEngine.findOne(".submenu > .menu-item",n);return c._closeSubmenu(t,n),void(e&&e.focus())}c.hide(),r.focus()}}}}EventHandler.on(document,EVENT_KEYDOWN_DATA_API,SELECTOR_DATA_TOGGLE$8,Menu.dataApiKeydownHandler),EventHandler.on(document,EVENT_KEYDOWN_DATA_API,".menu",Menu.dataApiKeydownHandler),EventHandler.on(document,EVENT_CLICK_DATA_API$5,Menu.clearMenus),EventHandler.on(document,EVENT_KEYUP_DATA_API,Menu.clearMenus),EventHandler.on(document,EVENT_CLICK_DATA_API$5,SELECTOR_DATA_TOGGLE$8,function(e){e.preventDefault(),Menu.getOrCreateInstance(this).toggle()});const NAME$g="combobox",DATA_KEY$c="bs.combobox",EVENT_KEY$d=`.${DATA_KEY$c}`,DATA_API_KEY$8=".data-api",ESCAPE_KEY$1="Escape",TAB_KEY="Tab",ARROW_UP_KEY$1="ArrowUp",ARROW_DOWN_KEY$1="ArrowDown",HOME_KEY$1="Home",END_KEY$1="End",ENTER_KEY="Enter",SPACE_KEY=" ",EVENT_CHANGE$3=`change${EVENT_KEY$d}`,EVENT_SHOW$5=`show${EVENT_KEY$d}`,EVENT_SHOWN$4=`shown${EVENT_KEY$d}`,EVENT_HIDE$4=`hide${EVENT_KEY$d}`,EVENT_HIDDEN$6=`hidden${EVENT_KEY$d}`,EVENT_CLICK_DATA_API$4=`click${EVENT_KEY$d}.data-api`,CLASS_NAME_SHOW$3="show",CLASS_NAME_SELECTED="selected",CLASS_NAME_PLACEHOLDER="combobox-placeholder",SELECTOR_DATA_TOGGLE$7='[data-bs-toggle="combobox"]',SELECTOR_MENU$1=".menu",SELECTOR_MENU_ITEM=".menu-item[data-bs-value]",SELECTOR_VISIBLE_ITEMS=".menu-item[data-bs-value]:not(.disabled):not(:disabled)",SELECTOR_VALUE=".combobox-value",SELECTOR_SEARCH_INPUT=".combobox-search-input",SELECTOR_NO_RESULTS=".combobox-no-results",Default$f={boundary:"clippingParents",multiple:!1,name:null,offset:[0,2],placeholder:"",placement:"bottom-start",search:!1,searchNormalize:!1},DefaultType$f={boundary:"(string|element)",multiple:"boolean",name:"(string|null)",offset:"(array|string|function)",placeholder:"string",placement:"string",search:"boolean",searchNormalize:"boolean"};class Combobox extends BaseComponent{constructor(e,t){super(e,t),this._toggle=this._element,this._menu=SelectorEngine.next(this._toggle,".menu")[0],this._valueDisplay=SelectorEngine.findOne(SELECTOR_VALUE,this._toggle),this._searchInput=SelectorEngine.findOne(SELECTOR_SEARCH_INPUT,this._menu),this._noResults=SelectorEngine.findOne(SELECTOR_NO_RESULTS,this._menu),this._hiddenInput=null,this._menuInstance=null,this._createHiddenInput(),this._createMenuInstance(),this._syncInitialSelection(),this._addEventListeners()}static get Default(){return Default$f}static get DefaultType(){return DefaultType$f}static get NAME(){return NAME$g}toggle(){return this._isShown()?this.hide():this.show()}show(){isDisabled(this._toggle)||this._isShown()||EventHandler.trigger(this._toggle,EVENT_SHOW$5).defaultPrevented||(this._menuInstance.show(),this._searchInput&&(this._searchInput.value="",this._filterItems(""),requestAnimationFrame(()=>this._searchInput.focus())),EventHandler.trigger(this._toggle,EVENT_SHOWN$4))}hide(){this._isShown()&&(EventHandler.trigger(this._toggle,EVENT_HIDE$4).defaultPrevented||(this._menuInstance.hide(),EventHandler.trigger(this._toggle,EVENT_HIDDEN$6)))}dispose(){this._menuInstance&&(this._menuInstance.dispose(),this._menuInstance=null),this._hiddenInput&&(this._hiddenInput.remove(),this._hiddenInput=null),EventHandler.off(this._menu,EVENT_KEY$d),EventHandler.off(this._toggle,EVENT_KEY$d),super.dispose()}_isShown(){return this._menu.classList.contains("show")}_createHiddenInput(){const{name:e}=this._config;e&&(this._hiddenInput=document.createElement("input"),this._hiddenInput.type="hidden",this._hiddenInput.name=e,this._hiddenInput.value="",this._toggle.parentNode.insertBefore(this._hiddenInput,this._toggle))}_createMenuInstance(){this._menuInstance=new Menu(this._toggle,{menu:this._menu,autoClose:!this._config.multiple||"outside",boundary:this._config.boundary,offset:this._config.offset,placement:this._config.placement})}_syncInitialSelection(){this._getSelectedItems().length>0?(this._updateToggleText(),this._updateHiddenInput()):this._showPlaceholder()}_addEventListeners(){EventHandler.on(this._menu,"click",SELECTOR_MENU_ITEM,e=>{const t=e.target.closest(SELECTOR_MENU_ITEM);t&&!isDisabled(t)&&(e.preventDefault(),e.stopPropagation(),this._selectItem(t))}),EventHandler.on(this._toggle,"keydown",e=>{this._handleToggleKeydown(e)}),EventHandler.on(this._menu,"keydown",e=>{this._handleMenuKeydown(e)}),this._searchInput&&(EventHandler.on(this._searchInput,"input",()=>{this._filterItems(this._searchInput.value)}),EventHandler.on(this._searchInput,"keydown",e=>{if("ArrowDown"===e.key){e.preventDefault();const t=this._getVisibleItems();t.length>0&&t[0].focus()}"Escape"===e.key&&(this.hide(),this._toggle.focus())}))}_selectItem(e){if(this._config.multiple)e.classList.toggle("selected"),e.setAttribute("aria-selected",e.classList.contains("selected"));else{const t=SelectorEngine.find(".selected",this._menu);for(const e of t)e.classList.remove("selected"),e.setAttribute("aria-selected","false");e.classList.add("selected"),e.setAttribute("aria-selected","true")}this._updateToggleText(),this._updateHiddenInput();const t=this._config.multiple?this._getSelectedItems().map(e=>e.dataset.bsValue):e.dataset.bsValue;EventHandler.trigger(this._toggle,EVENT_CHANGE$3,{value:t,item:e}),this._config.multiple||(this.hide(),this._toggle.focus())}_updateToggleText(){const e=this._getSelectedItems();if(0!==e.length)if(this._valueDisplay.classList.remove("combobox-placeholder"),this._config.multiple&&e.length>1)this._valueDisplay.textContent=`${e.length} selected`;else{const t=e[0],n=SelectorEngine.findOne(".menu-item-content > span:first-child",t);this._valueDisplay.textContent=n?n.textContent:t.textContent.trim()}else this._showPlaceholder()}_showPlaceholder(){const{placeholder:e}=this._config;e&&(this._valueDisplay.textContent=e,this._valueDisplay.classList.add("combobox-placeholder"))}_updateHiddenInput(){if(!this._hiddenInput)return;const e=this._getSelectedItems().map(e=>e.dataset.bsValue);this._hiddenInput.value=this._config.multiple?e.join(","):e[0]||""}_getSelectedItems(){return SelectorEngine.find(".selected",this._menu)}_getVisibleItems(){return SelectorEngine.find(SELECTOR_VISIBLE_ITEMS,this._menu).filter(e=>isVisible(e))}_filterItems(e){const t=this._normalizeText(e.toLowerCase().trim()),n=SelectorEngine.find(SELECTOR_MENU_ITEM,this._menu);let i=0;for(const e of n){const n=this._normalizeText(e.textContent.toLowerCase().trim()),s=!t||n.includes(t);e.style.display=s?"":"none",s&&i++}this._noResults&&this._noResults.classList.toggle("d-none",i>0)}_normalizeText(e){return this._config.searchNormalize?e.normalize("NFD").replace(/[\u0300-\u036F]/g,""):e}_handleToggleKeydown(e){const{key:t}=e;if("ArrowDown"===t||"ArrowUp"===t){e.preventDefault(),this._isShown()||this.show();const n=this._getVisibleItems();return void(n.length>0&&("ArrowDown"===t?n[0]:n.at(-1)).focus())}"Enter"!==t&&" "!==t||this._isShown()||(e.preventDefault(),this.show())}_handleMenuKeydown(e){const{key:t,target:n}=e;if("Escape"===t)return e.preventDefault(),e.stopPropagation(),this.hide(),void this._toggle.focus();if("Tab"===t)return void this.hide();const i=n.matches("input");if("ArrowDown"===t||"ArrowUp"===t){e.preventDefault();const i=this._getVisibleItems();return void(i.length>0&&getNextActiveElement(i,n,"ArrowDown"===t,!i.includes(n)).focus())}if("Home"===t||"End"===t){e.preventDefault();const n=this._getVisibleItems();return void(n.length>0&&("Home"===t?n[0]:n.at(-1)).focus())}if(("Enter"===t||" "===t)&&!i){e.preventDefault();const t=n.closest(SELECTOR_MENU_ITEM);t&&!isDisabled(t)&&this._selectItem(t)}}static jQueryInterface(e){return this.each(function(){const t=Combobox.getOrCreateInstance(this,e);if("string"==typeof e){if(void 0===t[e])throw new TypeError(`No method named "${e}"`);t[e]()}})}}EventHandler.on(document,EVENT_CLICK_DATA_API$4,SELECTOR_DATA_TOGGLE$7,function(e){e.preventDefault(),Combobox.getOrCreateInstance(this).toggle()}),EventHandler.on(document,"DOMContentLoaded",()=>{for(const e of SelectorEngine.find(SELECTOR_DATA_TOGGLE$7))Combobox.getOrCreateInstance(e)});
-/*! name: vanilla-calendar-pro v3.1.0 | url: https://github.com/uvarov-frontend/vanilla-calendar-pro */
-var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,n)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,__spreadValues=(e,t)=>{for(var n in t||(t={}))__hasOwnProp.call(t,n)&&__defNormalProp(e,n,t[n]);if(__getOwnPropSymbols)for(var n of __getOwnPropSymbols(t))__propIsEnum.call(t,n)&&__defNormalProp(e,n,t[n]);return e},__spreadProps=(e,t)=>__defProps(e,__getOwnPropDescs(t)),__publicField=(e,t,n)=>(__defNormalProp(e,"symbol"!=typeof t?t+"":t,n),n);const errorMessages={notFoundSelector:e=>`${e} is not found, check the first argument passed to new Calendar.`,notInit:'The calendar has not been initialized, please initialize it using the "init()" method first.',notLocale:"You specified an incorrect language label or did not specify the required number of values ​​for «locale.weekdays» or «locale.months».",incorrectTime:"The value of the time property can be: false, 12 or 24.",incorrectMonthsCount:"For the «multiple» calendar type, the «displayMonthsCount» parameter can have a value from 2 to 12, and for all others it cannot be greater than 1."},setContext=(e,t,n)=>{e.context[t]=n},destroy=e=>{var t,n,i,s,o;if(!e.context.isInit)throw new Error(errorMessages.notInit);e.inputMode?(null==(t=e.context.mainElement.parentElement)||t.removeChild(e.context.mainElement),null==(i=null==(n=e.context.inputElement)?void 0:n.replaceWith)||i.call(n,e.context.originalElement),setContext(e,"inputElement",void 0)):null==(o=(s=e.context.mainElement).replaceWith)||o.call(s,e.context.originalElement),setContext(e,"mainElement",e.context.originalElement),e.onDestroy&&e.onDestroy(e)},skipOpenOnFocus=new WeakSet,shouldSkipOpenOnFocus=e=>skipOpenOnFocus.has(e),setSkipOpenOnFocus=e=>{skipOpenOnFocus.add(e)},clearSkipOpenOnFocus=e=>{skipOpenOnFocus.delete(e)},PREV_TABINDEX_ATTR="data-vc-prev-tabindex",isFocusable=e=>e.tabIndex>=0&&!e.hasAttribute("disabled")&&"true"!==e.getAttribute("aria-disabled"),storePrevTabIndex=e=>{if(e.hasAttribute(PREV_TABINDEX_ATTR))return;const t=e.getAttribute("tabindex");e.setAttribute(PREV_TABINDEX_ATTR,null!=t?t:"")},restorePrevTabIndex=e=>{if(!e.hasAttribute(PREV_TABINDEX_ATTR))return;const t=e.getAttribute(PREV_TABINDEX_ATTR);""===t||null===t?e.removeAttribute("tabindex"):e.setAttribute("tabindex",t),e.removeAttribute(PREV_TABINDEX_ATTR)},disableTabbing=e=>{isFocusable(e)&&(storePrevTabIndex(e),e.tabIndex=-1);const t=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:e=>isFocusable(e)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP});for(;t.nextNode();){const e=t.currentNode;storePrevTabIndex(e),e.tabIndex=-1}},restoreTabbing=e=>{restorePrevTabIndex(e),e.querySelectorAll(`[${PREV_TABINDEX_ATTR}]`).forEach(restorePrevTabIndex)},hide=e=>{e.context.isShowInInputMode&&e.context.currentType&&(e.context.mainElement.dataset.vcCalendarHidden="",setContext(e,"isShowInInputMode",!1),e.inputMode&&disableTabbing(e.context.mainElement),e.context.cleanupHandlers[0]&&(e.context.cleanupHandlers.forEach(e=>e()),setContext(e,"cleanupHandlers",[])),e.inputMode&&e.context.inputElement&&e.context.mainElement.contains(document.activeElement)&&(("function"==typeof e.openOnFocus||!0===e.openOnFocus)&&setSkipOpenOnFocus(e),e.context.inputElement.focus()),e.onHide&&e.onHide(e))};function getOffset(e){if(!e||!e.getBoundingClientRect)return{top:0,bottom:0,left:0,right:0};const t=e.getBoundingClientRect(),n=document.documentElement;return{bottom:t.bottom,right:t.right,top:t.top+window.scrollY-n.clientTop,left:t.left+window.scrollX-n.clientLeft}}function getViewportDimensions(){return{vw:Math.max(document.documentElement.clientWidth||0,window.innerWidth||0),vh:Math.max(document.documentElement.clientHeight||0,window.innerHeight||0)}}function getWindowScrollPosition(){return{left:window.scrollX||document.documentElement.scrollLeft||0,top:window.scrollY||document.documentElement.scrollTop||0}}function calculateAvailableSpace(e){const{top:t,left:n}=getWindowScrollPosition(),{top:i,left:s}=getOffset(e),{vh:o,vw:a}=getViewportDimensions(),l=i-t,r=s-n;return{top:l,bottom:o-(l+e.clientHeight),left:r,right:a-(r+e.clientWidth)}}function getAvailablePosition(e,t,n=5){const i={top:!0,bottom:!0,left:!0,right:!0},s=[];if(!t||!e)return{canShow:i,parentPositions:s};const{bottom:o,top:a}=calculateAvailableSpace(e),{top:l,left:r}=getOffset(e),{height:c,width:d}=t.getBoundingClientRect(),{vh:u,vw:h}=getViewportDimensions(),_=h/2,m=u/2;return[{condition:l<m,position:"top"},{condition:l>m,position:"bottom"},{condition:r<_,position:"left"},{condition:r>_,position:"right"}].forEach(({condition:e,position:t})=>{e&&s.push(t)}),Object.assign(i,{top:c<=a-n,bottom:c<=o-n,left:d<=r,right:d<=h-r}),{canShow:i,parentPositions:s}}const handleDay=(e,t,n,i)=>{var s;const o=i.querySelector(`[data-vc-date="${t}"]`),a=null==o?void 0:o.querySelector("[data-vc-date-btn]");if(!o||!a)return;if((null==n?void 0:n.modifier)&&a.classList.add(...n.modifier.trim().split(" ")),!(null==n?void 0:n.html))return;const l=document.createElement("div");l.className=e.styles.datePopup,l.dataset.vcDatePopup="",l.innerHTML=e.sanitizerHTML(n.html),a.ariaExpanded="true",a.ariaLabel=`${a.ariaLabel}, ${null==(s=null==l?void 0:l.textContent)?void 0:s.replace(/^\s+|\s+(?=\s)|\s+$/g,"").replace(/&nbsp;/g," ")}`,o.appendChild(l),requestAnimationFrame(()=>{if(!l)return;const{canShow:e}=getAvailablePosition(o,l),t=e.bottom?o.offsetHeight:-l.offsetHeight,n=e.left&&!e.right?o.offsetWidth-l.offsetWidth/2:!e.left&&e.right?l.offsetWidth/2:0;Object.assign(l.style,{left:`${n}px`,top:`${t}px`})})},createDatePopup=(e,t)=>{var n;e.popups&&(null==(n=Object.entries(e.popups))||n.forEach(([n,i])=>handleDay(e,n,i,t)))},getDate=e=>new Date(`${e}T00:00:00`),getDateString=e=>`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`,parseDates=e=>e.reduce((e,t)=>{if(t instanceof Date||"number"==typeof t){const n=t instanceof Date?t:new Date(t);e.push(n.toISOString().substring(0,10))}else t.match(/^(\d{4}-\d{2}-\d{2})$/g)?e.push(t):t.replace(/(\d{4}-\d{2}-\d{2}).*?(\d{4}-\d{2}-\d{2})/g,(t,n,i)=>{const s=getDate(n),o=getDate(i),a=new Date(s.getTime());for(;a<=o;a.setDate(a.getDate()+1))e.push(getDateString(a));return t});return e},[]),updateAttribute=(e,t,n,i="")=>{t?e.setAttribute(n,i):e.getAttribute(n)===i&&e.removeAttribute(n)},setDateModifier=(e,t,n,i,s,o,a)=>{var l,r,c,d;const u=getDate(e.context.displayDateMin)>getDate(o)||getDate(e.context.displayDateMax)<getDate(o)||(null==(l=e.context.disableDates)?void 0:l.includes(o))||!e.selectionMonthsMode&&"current"!==a||!e.selectionYearsMode&&getDate(o).getFullYear()!==t;updateAttribute(n,u,"data-vc-date-disabled"),i&&updateAttribute(i,u,"aria-disabled","true"),i&&updateAttribute(i,u,"tabindex","-1"),updateAttribute(n,!e.disableToday&&e.context.dateToday===o,"data-vc-date-today"),updateAttribute(n,!e.disableToday&&e.context.dateToday===o,"aria-current","date"),updateAttribute(n,null==(r=e.selectedWeekends)?void 0:r.includes(s),"data-vc-date-weekend");const h=(null==(c=e.selectedHolidays)?void 0:c[0])?parseDates(e.selectedHolidays):[];if(updateAttribute(n,h.includes(o),"data-vc-date-holiday"),(null==(d=e.context.selectedDates)?void 0:d.includes(o))?(n.setAttribute("data-vc-date-selected",""),i&&i.setAttribute("aria-selected","true"),e.context.selectedDates.length>1&&"multiple-ranged"===e.selectionDatesMode&&(e.context.selectedDates[0]===o&&e.context.selectedDates[e.context.selectedDates.length-1]===o?n.setAttribute("data-vc-date-selected","first-and-last"):e.context.selectedDates[0]===o?n.setAttribute("data-vc-date-selected","first"):e.context.selectedDates[e.context.selectedDates.length-1]===o&&n.setAttribute("data-vc-date-selected","last"),e.context.selectedDates[0]!==o&&e.context.selectedDates[e.context.selectedDates.length-1]!==o&&n.setAttribute("data-vc-date-selected","middle"))):n.hasAttribute("data-vc-date-selected")&&(n.removeAttribute("data-vc-date-selected"),i&&i.removeAttribute("aria-selected")),!e.context.disableDates.includes(o)&&e.enableEdgeDatesOnly&&e.context.selectedDates.length>1&&"multiple-ranged"===e.selectionDatesMode){const t=getDate(e.context.selectedDates[0]),i=getDate(e.context.selectedDates[e.context.selectedDates.length-1]),s=getDate(o);updateAttribute(n,s>t&&s<i,"data-vc-date-selected","middle")}},getLocaleString=(e,t,n)=>new Date(`${e}T00:00:00.000Z`).toLocaleString(t,n),getWeekNumber=(e,t)=>{const n=getDate(e),i=(n.getDay()-t+7)%7;n.setDate(n.getDate()+4-i);const s=new Date(n.getFullYear(),0,1),o=Math.ceil(((+n-+s)/864e5+1)/7);return{year:n.getFullYear(),week:o}},addWeekNumberForDate=(e,t,n)=>{const i=getWeekNumber(n,e.firstWeekday);i&&(t.dataset.vcDateWeekNumber=String(i.week))},setDaysAsDisabled=(e,t,n)=>{var i,s,o,a,l;const r=null==(i=e.disableWeekdays)?void 0:i.includes(n),c=e.disableAllDates&&!!(null==(s=e.context.enableDates)?void 0:s[0]);!r&&!c||(null==(o=e.context.enableDates)?void 0:o.includes(t))||(null==(a=e.context.disableDates)?void 0:a.includes(t))||(e.context.disableDates.push(t),null==(l=e.context.disableDates)||l.sort((e,t)=>+new Date(e)-+new Date(t)))},createDate=(e,t,n,i,s,o)=>{const a=getDate(s).getDay(),l="string"==typeof e.locale&&e.locale.length?e.locale:"en",r=document.createElement("div");let c;r.className=e.styles.date,r.dataset.vcDate=s,r.dataset.vcDateMonth=o,r.dataset.vcDateWeekDay=String(a),r.role="gridcell",("current"===o||e.displayDatesOutside)&&(c=document.createElement("button"),c.className=e.styles.dateBtn,c.type="button",c.ariaLabel=getLocaleString(s,l,{dateStyle:"long",timeZone:"UTC"}),c.dataset.vcDateBtn="",c.innerText=String(i),r.appendChild(c)),e.enableWeekNumbers&&addWeekNumberForDate(e,r,s),setDaysAsDisabled(e,s,a),setDateModifier(e,t,r,c,a,s,o),n.addDate(r),e.onCreateDateEls&&e.onCreateDateEls(e,r)},createDatesFromCurrentMonth=(e,t,n,i,s)=>{for(let o=1;o<=n;o++){const n=new Date(i,s,o);createDate(e,i,t,o,getDateString(n),"current")}},createDatesFromNextMonth=(e,t,n,i,s)=>{const o=s+1===12?i+1:i,a=s+1===12?"01":s+2<10?`0${s+2}`:s+2;for(let s=1;s<=n;s++){const n=s<10?`0${s}`:String(s);createDate(e,i,t,s,`${o}-${a}-${n}`,"next")}},createDatesFromPrevMonth=(e,t,n,i,s)=>{let o=new Date(n,i,0).getDate()-(s-1);const a=0===i?n-1:n,l=0===i?12:i<10?`0${i}`:i;for(let i=s;i>0;i--,o++)createDate(e,n,t,o,`${a}-${l}-${o}`,"prev")},createWeekNumbers=(e,t,n,i,s)=>{if(!e.enableWeekNumbers)return;i.textContent="";const o=document.createElement("b");o.className=e.styles.weekNumbersTitle,o.innerText="#",o.dataset.vcWeekNumbers="title",i.appendChild(o);const a=document.createElement("div");a.className=e.styles.weekNumbersContent,a.dataset.vcWeekNumbers="content",i.appendChild(a);const l=document.createElement("button");l.type="button",l.className=e.styles.weekNumber;const r=s.querySelectorAll("[data-vc-date]"),c=Math.ceil((t+n)/7);for(let t=0;t<c;t++){const n=r[0===t?6:7*t].dataset.vcDate,i=getWeekNumber(n,e.firstWeekday);if(!i)return;const s=l.cloneNode(!0);s.innerText=String(i.week),s.dataset.vcWeekNumber=String(i.week),s.dataset.vcWeekYear=String(i.year),s.role="rowheader",s.ariaLabel=`${i.week}`,a.appendChild(s)}},createDates=e=>{const t=new Date(e.context.selectedYear,e.context.selectedMonth,1),n=e.context.mainElement.querySelectorAll('[data-vc="dates"]'),i=e.context.mainElement.querySelectorAll('[data-vc-week="numbers"]');n.forEach((n,s)=>{e.selectionDatesMode||(n.dataset.vcDatesDisabled=""),n.textContent="";const o=new Date(t);o.setMonth(o.getMonth()+s);const a=o.getMonth(),l=o.getFullYear(),r=(new Date(l,a,1).getDay()-e.firstWeekday+7)%7,c=new Date(l,a+1,0).getDate(),d=r+c,u=Math.ceil(d/7),h=7*u-d,_=[];for(let t=0;t<u;t++){const t=document.createElement("div");t.className=e.styles.datesRow,t.setAttribute("data-vc-dates","row"),t.setAttribute("role","row"),_.push(t)}let m=0,g=0;const p={addDate:e=>{_[m].appendChild(e),g++,g>=7&&(m++,g=0)}};createDatesFromPrevMonth(e,p,l,a,r),createDatesFromCurrentMonth(e,p,c,l,a),createDatesFromNextMonth(e,p,h,l,a);for(const e of _)n.appendChild(e);createDatePopup(e,n),createWeekNumbers(e,r,c,i[s],n)})},layoutDefault=e=>`\n  <div class="${e.styles.header}" data-vc="header" role="toolbar" aria-label="${e.labels.navigation}">\n    <#ArrowPrev [month] />\n    <div class="${e.styles.headerContent}" data-vc-header="content">\n      <#Month />\n      <#Year />\n    </div>\n    <#ArrowNext [month] />\n  </div>\n  <div class="${e.styles.wrapper}" data-vc="wrapper">\n    <#WeekNumbers />\n    <div class="${e.styles.content}" data-vc="content" role="grid">\n      <#Week />\n      <#Dates />\n      <#DateRangeTooltip />\n    </div>\n  </div>\n  <#ControlTime />\n`,layoutMonths=e=>`\n  <div class="${e.styles.header}" data-vc="header" role="toolbar" aria-label="${e.labels.navigation}">\n    <div class="${e.styles.headerContent}" data-vc-header="content">\n      <#Month />\n      <#Year />\n    </div>\n  </div>\n  <div class="${e.styles.wrapper}" data-vc="wrapper">\n    <div class="${e.styles.content}" data-vc="content">\n      <#Months />\n    </div>\n  </div>\n`,layoutMultiple=e=>`\n  <div class="${e.styles.controls}" data-vc="controls" role="toolbar" aria-label="${e.labels.navigation}">\n    <#ArrowPrev [month] />\n    <#ArrowNext [month] />\n  </div>\n  <div class="${e.styles.grid}" data-vc="grid">\n    <#Multiple>\n      <div class="${e.styles.column}" data-vc="column" role="region">\n        <div class="${e.styles.header}" data-vc="header">\n          <div class="${e.styles.headerContent}" data-vc-header="content">\n            <#Month />\n            <#Year />\n          </div>\n        </div>\n        <div class="${e.styles.wrapper}" data-vc="wrapper">\n          <#WeekNumbers />\n          <div class="${e.styles.content}" data-vc="content" role="grid">\n            <#Week />\n            <#Dates />\n          </div>\n        </div>\n      </div>\n    <#/Multiple>\n    <#DateRangeTooltip />\n  </div>\n  <#ControlTime />\n`,layoutYears=e=>`\n  <div class="${e.styles.header}" data-vc="header" role="toolbar" aria-label="${e.labels.navigation}">\n    <#ArrowPrev [year] />\n    <div class="${e.styles.headerContent}" data-vc-header="content">\n      <#Month />\n      <#Year />\n    </div>\n    <#ArrowNext [year] />\n  </div>\n  <div class="${e.styles.wrapper}" data-vc="wrapper">\n    <div class="${e.styles.content}" data-vc="content">\n      <#Years />\n    </div>\n  </div>\n`,ArrowNext=(e,t)=>`<button type="button" class="${e.styles.arrowNext}" data-vc-arrow="next" aria-label="${e.labels.arrowNext[t]}"></button>`,ArrowPrev=(e,t)=>`<button type="button" class="${e.styles.arrowPrev}" data-vc-arrow="prev" aria-label="${e.labels.arrowPrev[t]}"></button>`,ControlTime=e=>e.selectionTimeMode?`<div class="${e.styles.time}" data-vc="time" role="group" aria-label="${e.labels.selectingTime}"></div>`:"",DateRangeTooltip=e=>e.onCreateDateRangeTooltip?`<div class="${e.styles.dateRangeTooltip}" data-vc-date-range-tooltip="hidden"></div>`:"",Dates=e=>`<div class="${e.styles.dates}" data-vc="dates" aria-live="assertive" aria-label="${e.labels.dates}" ${"multiple"===e.type?"aria-multiselectable":""}></div>`,Month=e=>`<button type="button" class="${e.styles.month}" data-vc="month"></button>`,Months=e=>`<div class="${e.styles.months}" data-vc="months" role="grid" aria-live="assertive" aria-label="${e.labels.months}"></div>`,Week=e=>`<div class="${e.styles.week}" data-vc="week" role="row" aria-label="${e.labels.week}"></div>`,WeekNumbers=e=>e.enableWeekNumbers?`<div class="${e.styles.weekNumbers}" data-vc-week="numbers" role="row" aria-label="${e.labels.weekNumber}"></div>`:"",Year=e=>`<button type="button" class="${e.styles.year}" data-vc="year"></button>`,Years=e=>`<div class="${e.styles.years}" data-vc="years" role="grid" aria-live="assertive" aria-label="${e.labels.years}"></div>`,components={ArrowNext:ArrowNext,ArrowPrev:ArrowPrev,ControlTime:ControlTime,Dates:Dates,DateRangeTooltip:DateRangeTooltip,Month:Month,Months:Months,Week:Week,WeekNumbers:WeekNumbers,Year:Year,Years:Years},getComponent=e=>components[e],parseLayout=(e,t)=>t.replace(/[\n\t]/g,"").replace(/<#(?!\/?Multiple)(.*?)>/g,(t,n)=>{const i=(n.match(/\[(.*?)\]/)||[])[1],s=n.replace(/[/\s\n\t]|\[(.*?)\]/g,""),o=getComponent(s),a=o?o(e,null!=i?i:null):"";return e.sanitizerHTML(a)}).replace(/[\n\t]/g,""),parseMultipleLayout=(e,t)=>t.replace(new RegExp("<#Multiple>(.*?)<#\\/Multiple>","gs"),(t,n)=>{const i=Array(e.context.displayMonthsCount).fill(n).join("");return e.sanitizerHTML(i)}).replace(/[\n\t]/g,""),createLayouts=(e,t)=>{const n={default:layoutDefault,month:layoutMonths,year:layoutYears,multiple:layoutMultiple};if(Object.keys(n).forEach(t=>{const i=t;e.layouts[i].length||(e.layouts[i]=n[i](e))}),e.context.mainElement.className=e.styles.calendar,e.context.mainElement.dataset.vc="calendar",e.context.mainElement.dataset.vcType=e.context.currentType,e.context.mainElement.role="application",e.context.mainElement.tabIndex=0,e.context.mainElement.ariaLabel=e.labels.application,"multiple"!==e.context.currentType){if("multiple"===e.type&&t){const n=e.context.mainElement.querySelector('[data-vc="controls"]'),i=e.context.mainElement.querySelector('[data-vc="grid"]'),s=t.closest('[data-vc="column"]');return n&&n.remove(),i&&(i.dataset.vcGrid="hidden"),s&&(s.dataset.vcColumn=e.context.currentType),void(s&&(s.innerHTML=e.sanitizerHTML(parseLayout(e,e.layouts[e.context.currentType]))))}e.context.mainElement.innerHTML=e.sanitizerHTML(parseLayout(e,e.layouts[e.context.currentType]))}else e.context.mainElement.innerHTML=e.sanitizerHTML(parseMultipleLayout(e,parseLayout(e,e.layouts[e.context.currentType])))},setVisibilityArrows=(e,t,n,i)=>{e.style.visibility=n?"hidden":"",t.style.visibility=i?"hidden":""},handleDefaultType=(e,t,n)=>{const i=getDate(getDateString(new Date(e.context.selectedYear,e.context.selectedMonth,1))),s=new Date(i.getTime()),o=new Date(i.getTime());s.setMonth(s.getMonth()-e.monthsToSwitch),o.setMonth(o.getMonth()+e.monthsToSwitch);const a=getDate(e.context.dateMin),l=getDate(e.context.dateMax);e.selectionYearsMode||(a.setFullYear(i.getFullYear()),l.setFullYear(i.getFullYear()));const r=!e.selectionMonthsMode||s.getFullYear()<a.getFullYear()||s.getFullYear()===a.getFullYear()&&s.getMonth()<a.getMonth(),c=!e.selectionMonthsMode||o.getFullYear()>l.getFullYear()||o.getFullYear()===l.getFullYear()&&o.getMonth()>l.getMonth()-(e.context.displayMonthsCount-1);setVisibilityArrows(t,n,r,c)},handleYearType=(e,t,n)=>{const i=getDate(e.context.dateMin),s=getDate(e.context.dateMax),o=!!(i.getFullYear()&&e.context.displayYear-7<=i.getFullYear()),a=!!(s.getFullYear()&&e.context.displayYear+7>=s.getFullYear());setVisibilityArrows(t,n,o,a)},visibilityArrows=e=>{if("month"===e.context.currentType)return;const t=e.context.mainElement.querySelector('[data-vc-arrow="prev"]'),n=e.context.mainElement.querySelector('[data-vc-arrow="next"]');t&&n&&{default:()=>handleDefaultType(e,t,n),year:()=>handleYearType(e,t,n)}["multiple"===e.context.currentType?"default":e.context.currentType]()},visibilityHandler=(e,t,n,i,s)=>{const o=new Date(i.setFullYear(e.context.selectedYear,e.context.selectedMonth+n)).getFullYear(),a=new Date(i.setMonth(e.context.selectedMonth+n)).getMonth(),l=e.context.locale.months.long[a],r=t.closest('[data-vc="column"]');r&&(r.ariaLabel=`${l} ${o}`);const c={month:{id:a,label:l},year:{id:o,label:o}};t.innerText=String(c[s].label),t.dataset[`vc${s.charAt(0).toUpperCase()+s.slice(1)}`]=String(c[s].id),t.ariaLabel=`${e.labels[s]} ${c[s].label}`;const d={month:e.selectionMonthsMode,year:e.selectionYearsMode},u=!1===d[s]||"only-arrows"===d[s];u&&(t.tabIndex=-1),t.disabled=u},visibilityTitle=e=>{const t=e.context.mainElement.querySelectorAll('[data-vc="month"]'),n=e.context.mainElement.querySelectorAll('[data-vc="year"]'),i=new Date(e.context.selectedYear,e.context.selectedMonth,1);[t,n].forEach(t=>null==t?void 0:t.forEach((t,n)=>visibilityHandler(e,t,n,i,t.dataset.vc)))},setYearModifier=(e,t,n,i,s)=>{var o;const a={month:{selected:"data-vc-months-month-selected",aria:"aria-selected",value:"vcMonthsMonth",selectedProperty:"selectedMonth"},year:{selected:"data-vc-years-year-selected",aria:"aria-selected",value:"vcYearsYear",selectedProperty:"selectedYear"}};s&&(null==(o=e.context.mainElement.querySelectorAll({month:"[data-vc-months-month]",year:"[data-vc-years-year]"}[n]))||o.forEach(e=>{e.removeAttribute(a[n].selected),e.removeAttribute(a[n].aria)}),setContext(e,a[n].selectedProperty,Number(t.dataset[a[n].value])),visibilityTitle(e),"year"===n&&visibilityArrows(e)),i&&(t.setAttribute(a[n].selected,""),t.setAttribute(a[n].aria,"true"))},getColumnID=(e,t)=>{var n;if("multiple"!==e.type)return{currentValue:null,columnID:0};const i=e.context.mainElement.querySelectorAll('[data-vc="column"]'),s=Array.from(i).findIndex(e=>e.closest(`[data-vc-column="${t}"]`));return{currentValue:s>=0?Number(null==(n=i[s].querySelector(`[data-vc="${t}"]`))?void 0:n.getAttribute(`data-vc-${t}`)):null,columnID:Math.max(s,0)}},createMonthEl=(e,t,n,i,s,o,a)=>{const l=t.cloneNode(!1);return l.className=e.styles.monthsMonth,l.innerText=i,l.ariaLabel=s,l.role="gridcell",l.dataset.vcMonthsMonth=`${a}`,o&&(l.ariaDisabled="true"),o&&(l.tabIndex=-1),l.disabled=o,setYearModifier(e,l,"month",n===a,!1),l},createMonths=(e,t)=>{var n,i;const s=null==(n=null==t?void 0:t.closest('[data-vc="header"]'))?void 0:n.querySelector('[data-vc="year"]'),o=s?Number(s.dataset.vcYear):e.context.selectedYear,a=(null==t?void 0:t.dataset.vcMonth)?Number(t.dataset.vcMonth):e.context.selectedMonth;setContext(e,"currentType","month"),createLayouts(e,t),visibilityTitle(e);const l=e.context.mainElement.querySelector('[data-vc="months"]');if(!e.selectionMonthsMode||!l)return;const r=e.monthsToSwitch>1?e.context.locale.months.long.map((t,n)=>a-e.monthsToSwitch*n).concat(e.context.locale.months.long.map((t,n)=>a+e.monthsToSwitch*n)).filter(e=>e>=0&&e<=12):Array.from(Array(12).keys()),c=document.createElement("button");c.type="button";for(let t=0;t<12;t++){const n=getDate(e.context.dateMin),i=getDate(e.context.dateMax),s=e.context.displayMonthsCount-1,{columnID:d}=getColumnID(e,"month"),u=o<=n.getFullYear()&&t<n.getMonth()+d||o>=i.getFullYear()&&t>i.getMonth()-s+d||o>i.getFullYear()||t!==a&&!r.includes(t),h=createMonthEl(e,c,a,e.context.locale.months.short[t],e.context.locale.months.long[t],u,t);l.appendChild(h),e.onCreateMonthEls&&e.onCreateMonthEls(e,h)}null==(i=e.context.mainElement.querySelector("[data-vc-months-month]:not([disabled])"))||i.focus()},TimeInput=(e,t,n,i,s)=>`\n  <label class="${t}" data-vc-time-input="${e}">\n    <input type="text" name="${e}" maxlength="2" aria-label="${n[`input${e.charAt(0).toUpperCase()+e.slice(1)}`]}" value="${i}" ${s?"disabled":""}>\n  </label>\n`,TimeRange=(e,t,n,i,s,o,a)=>`\n  <label class="${t}" data-vc-time-range="${e}">\n    <input type="range" name="${e}" min="${i}" max="${s}" step="${o}" aria-label="${n[`range${e.charAt(0).toUpperCase()+e.slice(1)}`]}" value="${a}">\n  </label>\n`,handleActions=(e,t,n,i)=>{({hour:()=>setContext(e,"selectedHours",n),minute:()=>setContext(e,"selectedMinutes",n)})[i](),setContext(e,"selectedTime",`${e.context.selectedHours}:${e.context.selectedMinutes}${e.context.selectedKeeping?` ${e.context.selectedKeeping}`:""}`),e.onChangeTime&&e.onChangeTime(e,t,!1),e.inputMode&&e.context.inputElement&&e.context.mainElement&&e.onChangeToInput&&e.onChangeToInput(e,t)},transformTime24=(e,t)=>{var n;return(null==(n={0:{AM:"00",PM:"12"},1:{AM:"01",PM:"13"},2:{AM:"02",PM:"14"},3:{AM:"03",PM:"15"},4:{AM:"04",PM:"16"},5:{AM:"05",PM:"17"},6:{AM:"06",PM:"18"},7:{AM:"07",PM:"19"},8:{AM:"08",PM:"20"},9:{AM:"09",PM:"21"},10:{AM:"10",PM:"22"},11:{AM:"11",PM:"23"},12:{AM:"00",PM:"12"}}[Number(e)])?void 0:n[t])||String(e)},handleClickKeepingTime=(e,t,n,i,s)=>{const o=o=>{const a="AM"===e.context.selectedKeeping?"PM":"AM",l=transformTime24(e.context.selectedHours,a);Number(l)<=i&&Number(l)>=s?(setContext(e,"selectedKeeping",a),n.value=l,handleActions(e,o,e.context.selectedHours,"hour"),t.ariaLabel=`${e.labels.btnKeeping} ${e.context.selectedKeeping}`,t.innerText=e.context.selectedKeeping):e.onChangeTime&&e.onChangeTime(e,o,!0)};return t.addEventListener("click",o),()=>{t.removeEventListener("click",o)}},transformTime12=e=>({0:"12",13:"01",14:"02",15:"03",16:"04",17:"05",18:"06",19:"07",20:"08",21:"09",22:"10",23:"11"}[Number(e)]||String(e)),updateInputAndRange=(e,t,n,i)=>{e.value=n,t.value=i},updateKeepingTime$1=(e,t,n)=>{t&&n&&(setContext(e,"selectedKeeping",n),t.innerText=n)},handleInput$1=(e,t,n,i,s,o,a)=>{const l={hour:(l,r,c)=>{e.selectionTimeMode&&{12:()=>{if(!e.context.selectedKeeping)return;const d=Number(transformTime24(r,e.context.selectedKeeping));if(!(d<=o&&d>=a))return updateInputAndRange(n,t,e.context.selectedHours,e.context.selectedHours),void(e.onChangeTime&&e.onChangeTime(e,c,!0));updateInputAndRange(n,t,transformTime12(r),transformTime24(r,e.context.selectedKeeping)),l>12&&updateKeepingTime$1(e,i,"PM"),handleActions(e,c,transformTime12(r),s)},24:()=>{if(!(l<=o&&l>=a))return updateInputAndRange(n,t,e.context.selectedHours,e.context.selectedHours),void(e.onChangeTime&&e.onChangeTime(e,c,!0));updateInputAndRange(n,t,r,r),handleActions(e,c,r,s)}}[e.selectionTimeMode]()},minute:(i,l,r)=>{if(!(i<=o&&i>=a))return n.value=e.context.selectedMinutes,void(e.onChangeTime&&e.onChangeTime(e,r,!0));n.value=l,t.value=l,handleActions(e,r,l,s)}},r=e=>{const t=Number(n.value),i=n.value.padStart(2,"0");l[s]&&l[s](t,i,e)};return n.addEventListener("change",r),()=>{n.removeEventListener("change",r)}},updateInputAndTime=(e,t,n,i,s)=>{t.value=s,handleActions(e,n,s,i)},updateKeepingTime=(e,t,n)=>{t&&(setContext(e,"selectedKeeping",n),t.innerText=n)},handleRange=(e,t,n,i,s)=>{const o=o=>{const a=Number(t.value),l=t.value.padStart(2,"0"),r="hour"===s,c=24===e.selectionTimeMode,d=a>0&&a<12;r&&!c&&updateKeepingTime(e,i,0===a||d?"AM":"PM"),updateInputAndTime(e,n,o,s,!r||c||d?l:transformTime12(t.value))};return t.addEventListener("input",o),()=>{t.removeEventListener("input",o)}},handleMouseOver=e=>e.setAttribute("data-vc-input-focus",""),handleMouseOut=e=>e.removeAttribute("data-vc-input-focus"),handleTime=(e,t)=>{const n=t.querySelector('[data-vc-time-range="hour"] input[name="hour"]'),i=t.querySelector('[data-vc-time-range="minute"] input[name="minute"]'),s=t.querySelector('[data-vc-time-input="hour"] input[name="hour"]'),o=t.querySelector('[data-vc-time-input="minute"] input[name="minute"]'),a=t.querySelector('[data-vc-time="keeping"]');if(!(n&&i&&s&&o))return;const l=e=>{e.target===n&&handleMouseOver(s),e.target===i&&handleMouseOver(o)},r=e=>{e.target===n&&handleMouseOut(s),e.target===i&&handleMouseOut(o)};return t.addEventListener("mouseover",l),t.addEventListener("mouseout",r),handleInput$1(e,n,s,a,"hour",e.timeMaxHour,e.timeMinHour),handleInput$1(e,i,o,a,"minute",e.timeMaxMinute,e.timeMinMinute),handleRange(e,n,s,a,"hour"),handleRange(e,i,o,a,"minute"),a&&handleClickKeepingTime(e,a,n,e.timeMaxHour,e.timeMinHour),()=>{t.removeEventListener("mouseover",l),t.removeEventListener("mouseout",r)}},createTime=e=>{const t=e.context.mainElement.querySelector('[data-vc="time"]');if(!e.selectionTimeMode||!t)return;const[n,i]=[e.timeMinHour,e.timeMaxHour],[s,o]=[e.timeMinMinute,e.timeMaxMinute],a=e.context.selectedKeeping?transformTime24(e.context.selectedHours,e.context.selectedKeeping):e.context.selectedHours,l="range"===e.timeControls;var r;t.innerHTML=e.sanitizerHTML(`\n    <div class="${e.styles.timeContent}" data-vc-time="content">\n      ${TimeInput("hour",e.styles.timeHour,e.labels,e.context.selectedHours,l)}\n      ${TimeInput("minute",e.styles.timeMinute,e.labels,e.context.selectedMinutes,l)}\n      ${12===e.selectionTimeMode?(r=e.context.selectedKeeping,`<button type="button" class="${e.styles.timeKeeping}" aria-label="${e.labels.btnKeeping} ${r}" data-vc-time="keeping" ${l?"disabled":""}>${r}</button>`):""}\n    </div>\n    <div class="${e.styles.timeRanges}" data-vc-time="ranges">\n      ${TimeRange("hour",e.styles.timeRange,e.labels,n,i,e.timeStepHour,a)}\n      ${TimeRange("minute",e.styles.timeRange,e.labels,s,o,e.timeStepMinute,e.context.selectedMinutes)}\n    </div>\n  `),handleTime(e,t)},createWeek=e=>{const t=e.selectedWeekends?[...e.selectedWeekends]:[],n=[...e.context.locale.weekdays.long].reduce((n,i,s)=>[...n,{id:s,titleShort:e.context.locale.weekdays.short[s],titleLong:i,isWeekend:t.includes(s)}],[]),i=[...n.slice(e.firstWeekday),...n.slice(0,e.firstWeekday)];e.context.mainElement.querySelectorAll('[data-vc="week"]').forEach(t=>{const n=e.onClickWeekDay?document.createElement("button"):document.createElement("b");e.onClickWeekDay&&(n.type="button"),i.forEach(i=>{const s=n.cloneNode(!0);s.innerText=i.titleShort,s.className=e.styles.weekDay,s.role="columnheader",s.ariaLabel=i.titleLong,s.dataset.vcWeekDay=String(i.id),i.isWeekend&&(s.dataset.vcWeekDayOff=""),t.appendChild(s)})})},createYearEl=(e,t,n,i,s)=>{const o=t.cloneNode(!1);return o.className=e.styles.yearsYear,o.innerText=String(s),o.ariaLabel=String(s),o.role="gridcell",o.dataset.vcYearsYear=`${s}`,i&&(o.ariaDisabled="true"),i&&(o.tabIndex=-1),o.disabled=i,setYearModifier(e,o,"year",n===s,!1),o},createYears=(e,t)=>{var n;const i=(null==t?void 0:t.dataset.vcYear)?Number(t.dataset.vcYear):e.context.selectedYear;setContext(e,"currentType","year"),createLayouts(e,t),visibilityTitle(e),visibilityArrows(e);const s=e.context.mainElement.querySelector('[data-vc="years"]');if(!e.selectionYearsMode||!s)return;const o="multiple"!==e.type||e.context.selectedYear===i?0:1,a=document.createElement("button");a.type="button";for(let t=e.context.displayYear-7;t<e.context.displayYear+8;t++){const n=t<getDate(e.context.dateMin).getFullYear()+o||t>getDate(e.context.dateMax).getFullYear(),l=createYearEl(e,a,i,n,t);s.appendChild(l),e.onCreateYearEls&&e.onCreateYearEls(e,l)}null==(n=e.context.mainElement.querySelector("[data-vc-years-year]:not([disabled])"))||n.focus()},trackChangesHTMLElement=(e,t,n)=>{new MutationObserver(e=>{for(let i=0;i<e.length;i++)if(e[i].attributeName===t){n();break}}).observe(e,{attributes:!0})},haveListener={value:!1,set:()=>haveListener.value=!0,check:()=>haveListener.value},setTheme=(e,t)=>e.dataset.vcTheme=t,trackChangesThemeInSystemSettings=(e,t)=>{if(setTheme(e.context.mainElement,t.matches?"dark":"light"),"system"!==e.selectedTheme||haveListener.check())return;const n=e=>{const t=document.querySelectorAll('[data-vc="calendar"]');null==t||t.forEach(t=>setTheme(t,e.matches?"dark":"light"))};t.addEventListener?t.addEventListener("change",n):t.addListener(n),haveListener.set()},detectTheme=(e,t)=>{const n=e.themeAttrDetect.length?document.querySelector(e.themeAttrDetect):null,i=e.themeAttrDetect.replace(/^.*\[(.+)\]/g,(e,t)=>t);if(!n||"system"===n.getAttribute(i))return void trackChangesThemeInSystemSettings(e,t);const s=n.getAttribute(i);s?(setTheme(e.context.mainElement,s),trackChangesHTMLElement(n,i,()=>{const t=n.getAttribute(i);t&&setTheme(e.context.mainElement,t)})):trackChangesThemeInSystemSettings(e,t)},handleTheme=e=>{"not all"!==window.matchMedia("(prefers-color-scheme)").media?"system"===e.selectedTheme?detectTheme(e,window.matchMedia("(prefers-color-scheme: dark)")):setTheme(e.context.mainElement,e.selectedTheme):setTheme(e.context.mainElement,"light")},capitalizeFirstLetter=e=>e.charAt(0).toUpperCase()+e.slice(1).replace(/\./,""),getLocaleWeekday=(e,t,n)=>{const i=new Date(`1978-01-0${t+1}T00:00:00.000Z`),s=i.toLocaleString(n,{weekday:"short",timeZone:"UTC"}),o=i.toLocaleString(n,{weekday:"long",timeZone:"UTC"});e.context.locale.weekdays.short.push(capitalizeFirstLetter(s)),e.context.locale.weekdays.long.push(capitalizeFirstLetter(o))},getLocaleMonth=(e,t,n)=>{const i=new Date(`1978-${String(t+1).padStart(2,"0")}-01T00:00:00.000Z`),s=i.toLocaleString(n,{month:"short",timeZone:"UTC"}),o=i.toLocaleString(n,{month:"long",timeZone:"UTC"});e.context.locale.months.short.push(capitalizeFirstLetter(s)),e.context.locale.months.long.push(capitalizeFirstLetter(o))},getLocale=e=>{var t,n,i,s,o,a,l,r;if(!(e.context.locale.weekdays.short[6]&&e.context.locale.weekdays.long[6]&&e.context.locale.months.short[11]&&e.context.locale.months.long[11]))if("string"==typeof e.locale){if("string"==typeof e.locale&&!e.locale.length)throw new Error(errorMessages.notLocale);Array.from({length:7},(t,n)=>getLocaleWeekday(e,n,e.locale)),Array.from({length:12},(t,n)=>getLocaleMonth(e,n,e.locale))}else{if(!((null==(n=null==(t=e.locale)?void 0:t.weekdays)?void 0:n.short[6])&&(null==(s=null==(i=e.locale)?void 0:i.weekdays)?void 0:s.long[6])&&(null==(a=null==(o=e.locale)?void 0:o.months)?void 0:a.short[11])&&(null==(r=null==(l=e.locale)?void 0:l.months)?void 0:r.long[11])))throw new Error(errorMessages.notLocale);setContext(e,"locale",__spreadValues({},e.locale))}},create=e=>{const t={default:()=>{createWeek(e),createDates(e)},multiple:()=>{createWeek(e),createDates(e)},month:()=>createMonths(e),year:()=>createYears(e)};handleTheme(e),getLocale(e),createLayouts(e),visibilityTitle(e),visibilityArrows(e),createTime(e),t[e.context.currentType]()},handleArrowKeys=e=>{const t=t=>{var n;const i=t.target;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key)||"button"!==i.localName)return;const s=Array.from(e.context.mainElement.querySelectorAll('[data-vc="calendar"] button')),o=s.indexOf(i);if(-1===o)return;const a=(l=s[o]).hasAttribute("data-vc-date-btn")?7:l.hasAttribute("data-vc-months-month")?4:l.hasAttribute("data-vc-years-year")?5:1;var l;const r=(0,{ArrowUp:()=>Math.max(0,o-a),ArrowDown:()=>Math.min(s.length-1,o+a),ArrowLeft:()=>Math.max(0,o-1),ArrowRight:()=>Math.min(s.length-1,o+1)}[t.key])();null==(n=s[r])||n.focus()};return e.context.mainElement.addEventListener("keydown",t),()=>e.context.mainElement.removeEventListener("keydown",t)},handleMonth=(e,t)=>{const n=getDate(getDateString(new Date(e.context.selectedYear,e.context.selectedMonth,1)));({prev:()=>n.setMonth(n.getMonth()-e.monthsToSwitch),next:()=>n.setMonth(n.getMonth()+e.monthsToSwitch)})[t](),setContext(e,"selectedMonth",n.getMonth()),setContext(e,"selectedYear",n.getFullYear()),visibilityTitle(e),visibilityArrows(e),createDates(e)},handleClickArrow=(e,t)=>{const n=t.target.closest("[data-vc-arrow]");if(n){if(["default","multiple"].includes(e.context.currentType))handleMonth(e,n.dataset.vcArrow);else if("year"===e.context.currentType&&void 0!==e.context.displayYear){const i={prev:-15,next:15}[n.dataset.vcArrow];setContext(e,"displayYear",e.context.displayYear+i),createYears(e,t.target)}e.onClickArrow&&e.onClickArrow(e,t)}},resolveToggle=(e,t)=>void 0===t||("function"==typeof t?t(e):t),canToggleSelection=e=>resolveToggle(e,e.enableDateToggle),handleSelectDate=(e,t,n)=>{const i=t.dataset.vcDate,s=t.closest("[data-vc-date][data-vc-date-selected]"),o=canToggleSelection(e);if(s&&!o)return;const a=s?e.context.selectedDates.filter(e=>e!==i):n?[...e.context.selectedDates,i]:[i];setContext(e,"selectedDates",a)},createDateRangeTooltip=(e,t,n)=>{if(!t)return;if(!n)return t.dataset.vcDateRangeTooltip="hidden",void(t.textContent="");const i=e.context.mainElement.getBoundingClientRect(),s=n.getBoundingClientRect();t.style.left=s.left-i.left+s.width/2+"px",t.style.top=s.bottom-i.top-s.height+"px",t.dataset.vcDateRangeTooltip="visible",t.innerHTML=e.sanitizerHTML(e.onCreateDateRangeTooltip(e,n,t,s,i))},state={self:null,lastDateEl:null,isHovering:!1,rangeMin:void 0,rangeMax:void 0,tooltipEl:null,timeoutId:null},addHoverEffect=(e,t,n)=>{var i,s,o;if(!(null==(s=null==(i=state.self)?void 0:i.context)?void 0:s.selectedDates[0]))return;const a=getDateString(e);(null==(o=state.self.context.disableDates)?void 0:o.includes(a))||(state.self.context.mainElement.querySelectorAll(`[data-vc-date="${a}"]`).forEach(e=>e.dataset.vcDateHover=""),t.forEach(e=>e.dataset.vcDateHover="first"),n.forEach(e=>{"first"===e.dataset.vcDateHover?e.dataset.vcDateHover="first-and-last":e.dataset.vcDateHover="last"}))},removeHoverEffect=()=>{var e,t;(null==(t=null==(e=state.self)?void 0:e.context)?void 0:t.mainElement)&&state.self.context.mainElement.querySelectorAll("[data-vc-date-hover]").forEach(e=>e.removeAttribute("data-vc-date-hover"))},handleHoverDatesEvent=e=>{var t,n;if(!e||!(null==(n=null==(t=state.self)?void 0:t.context)?void 0:n.selectedDates[0]))return;if(!e.closest('[data-vc="dates"]'))return state.lastDateEl=null,createDateRangeTooltip(state.self,state.tooltipEl,null),void removeHoverEffect();const i=e.closest("[data-vc-date]");if(!i||state.lastDateEl===i)return;state.lastDateEl=i,createDateRangeTooltip(state.self,state.tooltipEl,i),removeHoverEffect();const s=i.dataset.vcDate,o=getDate(state.self.context.selectedDates[0]),a=getDate(s),l=state.self.context.mainElement.querySelectorAll(`[data-vc-date="${state.self.context.selectedDates[0]}"]`),r=state.self.context.mainElement.querySelectorAll(`[data-vc-date="${s}"]`),[c,d]=o<a?[l,r]:[r,l],[u,h]=o<a?[o,a]:[a,o];for(let e=new Date(u);e<=h;e.setDate(e.getDate()+1))addHoverEffect(e,c,d)},handleHoverSelectedDatesRangeEvent=e=>{const t=null==e?void 0:e.closest("[data-vc-date-selected]");if(!t&&state.lastDateEl)return state.lastDateEl=null,void createDateRangeTooltip(state.self,state.tooltipEl,null);t&&state.lastDateEl!==t&&(state.lastDateEl=t,createDateRangeTooltip(state.self,state.tooltipEl,t))},optimizedHoverHandler=e=>t=>{const n=t.target;state.isHovering||(state.isHovering=!0,requestAnimationFrame(()=>{e(n),state.isHovering=!1}))},optimizedHandleHoverDatesEvent=optimizedHoverHandler(handleHoverDatesEvent),optimizedHandleHoverSelectedDatesRangeEvent=optimizedHoverHandler(handleHoverSelectedDatesRangeEvent),handleCancelSelectionDates=e=>{state.self&&"Escape"===e.key&&(state.lastDateEl=null,setContext(state.self,"selectedDates",[]),state.self.context.mainElement.removeEventListener("mousemove",optimizedHandleHoverDatesEvent),state.self.context.mainElement.removeEventListener("keydown",handleCancelSelectionDates),createDateRangeTooltip(state.self,state.tooltipEl,null),removeHoverEffect())},handleMouseLeave=()=>{null!==state.timeoutId&&clearTimeout(state.timeoutId),state.timeoutId=setTimeout(()=>{state.lastDateEl=null,createDateRangeTooltip(state.self,state.tooltipEl,null),removeHoverEffect()},50)},updateDisabledDates=()=>{var e,t,n,i;if(!(null==(n=null==(t=null==(e=state.self)?void 0:e.context)?void 0:t.selectedDates)?void 0:n[0])||!(null==(i=state.self.context.disableDates)?void 0:i[0]))return;const s=getDate(state.self.context.selectedDates[0]),[o,a]=state.self.context.disableDates.map(e=>getDate(e)).reduce(([e,t],n)=>[s>=n?n:e,s<n&&null===t?n:t],[null,null]);o&&setContext(state.self,"displayDateMin",getDateString(new Date(o.setDate(o.getDate()+1)))),a&&setContext(state.self,"displayDateMax",getDateString(new Date(a.setDate(a.getDate()-1)))),state.self.disableDatesPast&&!state.self.disableAllDates&&getDate(state.self.context.displayDateMin)<getDate(state.self.context.dateToday)&&setContext(state.self,"displayDateMin",state.self.context.dateToday)},handleSelectDateRange=(e,t)=>{state.self=e,state.lastDateEl=t,removeHoverEffect(),e.disableDatesGaps&&(state.rangeMin=state.rangeMin?state.rangeMin:e.context.displayDateMin,state.rangeMax=state.rangeMax?state.rangeMax:e.context.displayDateMax),e.onCreateDateRangeTooltip&&(state.tooltipEl=e.context.mainElement.querySelector("[data-vc-date-range-tooltip]"));const n=null==t?void 0:t.dataset.vcDate;if(n){const t=1===e.context.selectedDates.length&&e.context.selectedDates[0].includes(n),i=t&&!canToggleSelection(e)?[n,n]:t&&canToggleSelection(e)?[]:e.context.selectedDates.length>1?[n]:[...e.context.selectedDates,n];setContext(e,"selectedDates",i),e.context.selectedDates.length>1&&e.context.selectedDates.sort((e,t)=>+new Date(e)-+new Date(t))}({set:()=>(e.disableDatesGaps&&updateDisabledDates(),createDateRangeTooltip(state.self,state.tooltipEl,t),state.self.context.mainElement.removeEventListener("mousemove",optimizedHandleHoverSelectedDatesRangeEvent),state.self.context.mainElement.removeEventListener("mouseleave",handleMouseLeave),state.self.context.mainElement.removeEventListener("keydown",handleCancelSelectionDates),state.self.context.mainElement.addEventListener("mousemove",optimizedHandleHoverDatesEvent),state.self.context.mainElement.addEventListener("mouseleave",handleMouseLeave),state.self.context.mainElement.addEventListener("keydown",handleCancelSelectionDates),()=>{state.self.context.mainElement.removeEventListener("mousemove",optimizedHandleHoverDatesEvent),state.self.context.mainElement.removeEventListener("mouseleave",handleMouseLeave),state.self.context.mainElement.removeEventListener("keydown",handleCancelSelectionDates)}),reset:()=>{const[n,i]=[e.context.selectedDates[0],e.context.selectedDates[e.context.selectedDates.length-1]],s=e.context.selectedDates[0]!==e.context.selectedDates[e.context.selectedDates.length-1],o=parseDates([`${n}:${i}`]).filter(t=>!e.context.disableDates.includes(t)),a=s?e.enableEdgeDatesOnly?[n,i]:o:[e.context.selectedDates[0],e.context.selectedDates[0]];if(setContext(e,"selectedDates",a),e.disableDatesGaps&&(setContext(e,"displayDateMin",state.rangeMin),setContext(e,"displayDateMax",state.rangeMax)),state.self.context.mainElement.removeEventListener("mousemove",optimizedHandleHoverDatesEvent),state.self.context.mainElement.removeEventListener("mouseleave",handleMouseLeave),state.self.context.mainElement.removeEventListener("keydown",handleCancelSelectionDates),e.onCreateDateRangeTooltip)return e.context.selectedDates[0]||(state.self.context.mainElement.removeEventListener("mousemove",optimizedHandleHoverSelectedDatesRangeEvent),state.self.context.mainElement.removeEventListener("mouseleave",handleMouseLeave),createDateRangeTooltip(state.self,state.tooltipEl,null)),e.context.selectedDates[0]&&(state.self.context.mainElement.addEventListener("mousemove",optimizedHandleHoverSelectedDatesRangeEvent),state.self.context.mainElement.addEventListener("mouseleave",handleMouseLeave),createDateRangeTooltip(state.self,state.tooltipEl,t)),()=>{state.self.context.mainElement.removeEventListener("mousemove",optimizedHandleHoverSelectedDatesRangeEvent),state.self.context.mainElement.removeEventListener("mouseleave",handleMouseLeave)}}})[1===e.context.selectedDates.length?"set":"reset"]()},updateDateModifier=e=>{e.context.mainElement.querySelectorAll("[data-vc-date]").forEach(t=>{const n=t.querySelector("[data-vc-date-btn]"),i=t.dataset.vcDate,s=getDate(i).getDay();setDateModifier(e,e.context.selectedYear,t,n,s,i,"current")})},handleClickDate=(e,t)=>{var n;const i=t.target,s=i.closest("[data-vc-date-btn]");if(!e.selectionDatesMode||!["single","multiple","multiple-ranged"].includes(e.selectionDatesMode)||!s)return;const o=s.closest("[data-vc-date]");({single:()=>handleSelectDate(e,o,!1),multiple:()=>handleSelectDate(e,o,!0),"multiple-ranged":()=>handleSelectDateRange(e,o)})[e.selectionDatesMode](),null==(n=e.context.selectedDates)||n.sort((e,t)=>+new Date(e)-+new Date(t)),e.onClickDate&&e.onClickDate(e,t),e.inputMode&&e.context.inputElement&&e.context.mainElement&&e.onChangeToInput&&e.onChangeToInput(e,t);const a=i.closest('[data-vc-date-month="prev"]'),l=i.closest('[data-vc-date-month="next"]');({prev:()=>e.enableMonthChangeOnDayClick?handleMonth(e,"prev"):updateDateModifier(e),next:()=>e.enableMonthChangeOnDayClick?handleMonth(e,"next"):updateDateModifier(e),current:()=>updateDateModifier(e)})[a?"prev":l?"next":"current"]()},typeClick=["month","year"],getValue=(e,t,n)=>{const{currentValue:i,columnID:s}=getColumnID(e,t);return"month"===e.context.currentType&&s>=0?n-s:"year"===e.context.currentType&&e.context.selectedYear!==i?n-1:n},handleMultipleYearSelection=(e,t)=>{const n=getValue(e,"year",Number(t.dataset.vcYearsYear)),i=getDate(e.context.dateMin),s=getDate(e.context.dateMax),o=e.context.displayMonthsCount-1,{columnID:a}=getColumnID(e,"year"),l=e.context.selectedMonth<i.getMonth()&&n<=i.getFullYear(),r=e.context.selectedMonth>s.getMonth()-o+a&&n>=s.getFullYear(),c=n<i.getFullYear(),d=n>s.getFullYear(),u=l||c?i.getFullYear():r||d?s.getFullYear():n,h=l||c?i.getMonth():r||d?s.getMonth()-o+a:e.context.selectedMonth;setContext(e,"selectedYear",u),setContext(e,"selectedMonth",h)},handleMultipleMonthSelection=(e,t)=>{const n=t.closest('[data-vc-column="month"]').querySelector('[data-vc="year"]'),i=getValue(e,"month",Number(t.dataset.vcMonthsMonth)),s=Number(n.dataset.vcYear),o=getDate(e.context.dateMin),a=getDate(e.context.dateMax),l=i<o.getMonth()&&s<=o.getFullYear(),r=i>a.getMonth()&&s>=a.getFullYear();setContext(e,"selectedYear",s),setContext(e,"selectedMonth",l?o.getMonth():r?a.getMonth():i)},handleItemClick=(e,t,n,i)=>{var s;({year:()=>{if("multiple"===e.type)return handleMultipleYearSelection(e,i);setContext(e,"selectedYear",Number(i.dataset.vcYearsYear))},month:()=>{if("multiple"===e.type)return handleMultipleMonthSelection(e,i);setContext(e,"selectedMonth",Number(i.dataset.vcMonthsMonth))}})[n](),{year:()=>{var n;return null==(n=e.onClickYear)?void 0:n.call(e,e,t)},month:()=>{var n;return null==(n=e.onClickMonth)?void 0:n.call(e,e,t)}}[n](),e.context.currentType!==e.type?(setContext(e,"currentType",e.type),create(e),null==(s=e.context.mainElement.querySelector(`[data-vc="${n}"]`))||s.focus()):setYearModifier(e,i,n,!0,!0)},handleClickType=(e,t,n)=>{var i;const s=t.target,o=s.closest(`[data-vc="${n}"]`),a={year:()=>createYears(e,s),month:()=>createMonths(e,s)};if(o&&e.onClickTitle&&e.onClickTitle(e,t),o&&e.context.currentType!==n)return a[n]();const l=s.closest(`[data-vc-${n}s-${n}]`);if(l)return handleItemClick(e,t,n,l);const r=s.closest('[data-vc="grid"]'),c=s.closest('[data-vc="column"]');(e.context.currentType===n&&o||"multiple"===e.type&&e.context.currentType===n&&r&&!c)&&(setContext(e,"currentType",e.type),create(e),null==(i=e.context.mainElement.querySelector(`[data-vc="${n}"]`))||i.focus())},handleClickMonthOrYear=(e,t)=>{const n={month:e.selectionMonthsMode,year:e.selectionYearsMode};typeClick.forEach(i=>{n[i]&&t.target&&handleClickType(e,t,i)})},handleClickWeekNumber=(e,t)=>{if(!e.enableWeekNumbers||!e.onClickWeekNumber)return;const n=t.target.closest("[data-vc-week-number]"),i=e.context.mainElement.querySelectorAll("[data-vc-date-week-number]");if(!n||!i[0])return;const s=Number(n.innerText),o=Number(n.dataset.vcWeekYear),a=Array.from(i).filter(e=>Number(e.dataset.vcDateWeekNumber)===s);e.onClickWeekNumber(e,s,o,a,t)},handleClickWeekDay=(e,t)=>{if(!e.onClickWeekDay)return;const n=t.target.closest("[data-vc-week-day]"),i=t.target.closest('[data-vc="column"]'),s=i?i.querySelectorAll("[data-vc-date-week-day]"):e.context.mainElement.querySelectorAll("[data-vc-date-week-day]");if(!n||!s[0])return;const o=Number(n.dataset.vcWeekDay),a=Array.from(s).filter(e=>Number(e.dataset.vcDateWeekDay)===o);e.onClickWeekDay(e,o,a,t)},handleClick=e=>{const t=t=>{handleClickArrow(e,t),handleClickWeekDay(e,t),handleClickWeekNumber(e,t),handleClickDate(e,t),handleClickMonthOrYear(e,t)};return e.context.mainElement.addEventListener("click",t),()=>e.context.mainElement.removeEventListener("click",t)},initMonthsCount=e=>{if("multiple"===e.type&&(e.displayMonthsCount<=1||e.displayMonthsCount>12))throw new Error(errorMessages.incorrectMonthsCount);if("multiple"!==e.type&&e.displayMonthsCount>1)throw new Error(errorMessages.incorrectMonthsCount);setContext(e,"displayMonthsCount",e.displayMonthsCount?e.displayMonthsCount:"multiple"===e.type?2:1)},getLocalDate=()=>{const e=new Date;return new Date(e.getTime()-6e4*e.getTimezoneOffset()).toISOString().substring(0,10)},resolveDate=(e,t)=>"today"===e?getLocalDate():e instanceof Date||"number"==typeof e||"string"==typeof e?parseDates([e])[0]:t,initRange=e=>{var t,n,i;const s=resolveDate(e.dateMin,e.dateMin),o=resolveDate(e.dateMax,e.dateMax),a=resolveDate(e.displayDateMin,s),l=resolveDate(e.displayDateMax,o);setContext(e,"dateToday",resolveDate(e.dateToday,e.dateToday)),setContext(e,"displayDateMin",a?getDate(s)>=getDate(a)?s:a:s),setContext(e,"displayDateMax",l?getDate(o)<=getDate(l)?o:l:o);const r=e.disableDatesPast&&!e.disableAllDates&&getDate(a)<getDate(e.context.dateToday);setContext(e,"displayDateMin",r||e.disableAllDates?e.context.dateToday:a),setContext(e,"displayDateMax",e.disableAllDates?e.context.dateToday:l),setContext(e,"disableDates",e.disableDates[0]&&!e.disableAllDates?parseDates(e.disableDates):e.disableAllDates?[e.context.displayDateMin]:[]),e.context.disableDates.length>1&&e.context.disableDates.sort((e,t)=>+new Date(e)-+new Date(t)),setContext(e,"enableDates",e.enableDates[0]?parseDates(e.enableDates):[]),(null==(t=e.context.enableDates)?void 0:t[0])&&(null==(n=e.context.disableDates)?void 0:n[0])&&setContext(e,"disableDates",e.context.disableDates.filter(t=>!e.context.enableDates.includes(t))),e.context.enableDates.length>1&&e.context.enableDates.sort((e,t)=>+new Date(e)-+new Date(t)),(null==(i=e.context.enableDates)?void 0:i[0])&&e.disableAllDates&&(setContext(e,"displayDateMin",e.context.enableDates[0]),setContext(e,"displayDateMax",e.context.enableDates[e.context.enableDates.length-1])),setContext(e,"dateMin",e.displayDisabledDates?s:e.context.displayDateMin),setContext(e,"dateMax",e.displayDisabledDates?o:e.context.displayDateMax)},initSelectedDates=e=>{var t;setContext(e,"selectedDates",(null==(t=e.selectedDates)?void 0:t[0])?parseDates(e.selectedDates):[])},displayClosestValidDate=e=>{const t=t=>{const n=new Date(t);setInitialContext(e,n.getMonth(),n.getFullYear())};if(e.displayDateMin&&"today"!==e.displayDateMin&&(n=e.displayDateMin,i=new Date,new Date(n).getTime()>i.getTime())){const n=e.selectedDates.length&&e.selectedDates[0]?parseDates(e.selectedDates)[0]:e.displayDateMin;return t(getDate(resolveDate(n,e.displayDateMin))),!0}var n,i;if(e.displayDateMax&&"today"!==e.displayDateMax&&((e,t)=>new Date(e).getTime()<t.getTime())(e.displayDateMax,new Date)){const n=e.selectedDates.length&&e.selectedDates[0]?parseDates(e.selectedDates)[0]:e.displayDateMax;return t(getDate(resolveDate(n,e.displayDateMax))),!0}return!1},setInitialContext=(e,t,n)=>{setContext(e,"selectedMonth",t),setContext(e,"selectedYear",n),setContext(e,"displayYear",n)},initSelectedMonthYear=e=>{var t;if(e.enableJumpToSelectedDate&&(null==(t=e.selectedDates)?void 0:t[0])&&void 0===e.selectedMonth&&void 0===e.selectedYear){const t=getDate(parseDates(e.selectedDates)[0]);return void setInitialContext(e,t.getMonth(),t.getFullYear())}if(displayClosestValidDate(e))return;const n=void 0!==e.selectedMonth&&Number(e.selectedMonth)>=0&&Number(e.selectedMonth)<12,i=void 0!==e.selectedYear&&Number(e.selectedYear)>=0&&Number(e.selectedYear)<=9999;setInitialContext(e,n?Number(e.selectedMonth):getDate(e.context.dateToday).getMonth(),i?Number(e.selectedYear):getDate(e.context.dateToday).getFullYear())},initTime=e=>{var t,n,i;if(!e.selectionTimeMode)return;if(![12,24].includes(e.selectionTimeMode))throw new Error(errorMessages.incorrectTime);const s=12===e.selectionTimeMode,o=s?/^(0[1-9]|1[0-2]):([0-5][0-9]) ?(AM|PM)?$/i:/^([0-1]?[0-9]|2[0-3]):([0-5][0-9])$/;let[a,l,r]=null!=(i=null==(n=null==(t=e.selectedTime)?void 0:t.match(o))?void 0:n.slice(1))?i:[];a?s&&!r&&(r="AM"):(a=s?transformTime12(String(e.timeMinHour)):String(e.timeMinHour),l=String(e.timeMinMinute),r=s?Number(transformTime12(String(e.timeMinHour)))>=12?"PM":"AM":null),setContext(e,"selectedHours",a.padStart(2,"0")),setContext(e,"selectedMinutes",l.padStart(2,"0")),setContext(e,"selectedKeeping",r),setContext(e,"selectedTime",`${e.context.selectedHours}:${e.context.selectedMinutes}${r?` ${r}`:""}`)},initAllVariables=e=>{setContext(e,"currentType",e.type),initMonthsCount(e),initRange(e),initSelectedMonthYear(e),initSelectedDates(e),initTime(e)},reset=(e,{year:t,month:n,dates:i,time:s,locale:o},a=!0)=>{var l;const r={year:e.selectedYear,month:e.selectedMonth,dates:e.selectedDates,time:e.selectedTime};e.selectedYear=t?r.year:e.context.selectedYear,e.selectedMonth=n?r.month:e.context.selectedMonth,e.selectedTime=s?r.time:e.context.selectedTime,e.selectedDates="only-first"===i&&(null==(l=e.context.selectedDates)?void 0:l[0])?[e.context.selectedDates[0]]:!0===i?r.dates:e.context.selectedDates,o&&setContext(e,"locale",{months:{short:[],long:[]},weekdays:{short:[],long:[]}}),initAllVariables(e),a&&create(e),e.selectedYear=r.year,e.selectedMonth=r.month,e.selectedDates=r.dates,e.selectedTime=r.time,"multiple-ranged"===e.selectionDatesMode&&i&&handleSelectDateRange(e,null)},createToInput=e=>{const t=document.createElement("div");return t.className=e.styles.calendar,t.dataset.vc="calendar",t.dataset.vcInput="",t.dataset.vcCalendarHidden="",setContext(e,"inputModeInit",!0),setContext(e,"isShowInInputMode",!1),setContext(e,"mainElement",t),document.body.appendChild(e.context.mainElement),reset(e,{year:!0,month:!0,dates:!0,time:!0,locale:!0}),setTimeout(()=>show(e)),e.onInit&&e.onInit(e),handleArrowKeys(e),handleClick(e)},canOpenOnFocus=e=>resolveToggle(e,e.openOnFocus),handleInput=e=>{setContext(e,"inputElement",e.context.mainElement);const t=()=>{e.context.inputModeInit?setTimeout(()=>show(e)):createToInput(e)};e.context.inputElement.addEventListener("click",t);const n="function"==typeof e.openOnFocus||!0===e.openOnFocus,i=()=>{shouldSkipOpenOnFocus(e)?clearSkipOpenOnFocus(e):canOpenOnFocus(e)&&t()};n&&e.context.inputElement.addEventListener("focus",i);const s=t=>{const n="Tab"===t.key&&!t.shiftKey,i=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key);(n||i)&&(t=>{var n;if(!e.context.isShowInInputMode)return!1;if(document.activeElement!==e.context.inputElement)return!1;const i=e=>e.tabIndex>=0&&!e.hasAttribute("disabled")&&"true"!==e.getAttribute("aria-disabled"),s=null!=(n=document.createTreeWalker(e.context.mainElement,NodeFilter.SHOW_ELEMENT,{acceptNode:e=>i(e)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}).nextNode())?n:i(e.context.mainElement)?e.context.mainElement:null;!s||s.tabIndex<0||(t.preventDefault(),s.focus())})(t)};return e.context.inputElement.addEventListener("keydown",s),()=>{e.context.inputElement.removeEventListener("click",t),n&&e.context.inputElement.removeEventListener("focus",i),e.context.inputElement.removeEventListener("keydown",s)}},init=e=>(setContext(e,"originalElement",e.context.mainElement.cloneNode(!0)),setContext(e,"isInit",!0),e.inputMode?handleInput(e):(initAllVariables(e),create(e),e.onInit&&e.onInit(e),handleArrowKeys(e),handleClick(e))),update=(e,t)=>{if(!e.context.isInit)throw new Error(errorMessages.notInit);reset(e,__spreadValues(__spreadValues({},{year:!0,month:!0,dates:!0,time:!0,locale:!0}),t),!(e.inputMode&&!e.context.inputModeInit)),e.onUpdate&&e.onUpdate(e)},replaceProperties=(e,t)=>{const n=Object.keys(t);for(let i=0;i<n.length;i++){const s=n[i];"object"!=typeof e[s]||"object"!=typeof t[s]||t[s]instanceof Date||Array.isArray(t[s])?void 0!==t[s]&&(e[s]=t[s]):replaceProperties(e[s],t[s])}},set=(e,t,n)=>{replaceProperties(e,t),e.context.isInit&&update(e,n)};function findBestPickerPosition(e,t){const n="left";if(!t||!e)return n;const{canShow:i,parentPositions:s}=getAvailablePosition(e,t),o=i.left&&i.right;return(o&&i.bottom?"center":o&&i.top?["top","center"]:Array.isArray(s)?["bottom"===s[0]?"top":"bottom",...s.slice(1)]:s)||n}const setPosition=(e,t,n)=>{if(!e)return;const i="auto"===n?findBestPickerPosition(e,t):n,s={top:-t.offsetHeight,bottom:e.offsetHeight,left:0,center:e.offsetWidth/2-t.offsetWidth/2,right:e.offsetWidth-t.offsetWidth},o=Array.isArray(i)?i[0]:"bottom",a=Array.isArray(i)?i[1]:i;t.dataset.vcPosition=o;const{top:l,left:r}=getOffset(e),c=l+s[o];let d=r+s[a];const{vw:u}=getViewportDimensions();if(d+t.clientWidth>u){const e=window.innerWidth-document.body.clientWidth;d=u-t.clientWidth-e}else d<0&&(d=0);Object.assign(t.style,{left:`${d}px`,top:`${c}px`})},show=e=>{if(e.context.isShowInInputMode)return;if(!e.context.currentType)return void e.context.mainElement.click();setContext(e,"cleanupHandlers",[]),setContext(e,"isShowInInputMode",!0),e.inputMode&&restoreTabbing(e.context.mainElement),setPosition(e.context.inputElement,e.context.mainElement,e.positionToInput),e.context.mainElement.removeAttribute("data-vc-calendar-hidden");const t=()=>{setPosition(e.context.inputElement,e.context.mainElement,e.positionToInput)};window.addEventListener("resize",t),e.context.cleanupHandlers.push(()=>window.removeEventListener("resize",t));const n=t=>{"Escape"===t.key&&hide(e)};document.addEventListener("keydown",n),e.context.cleanupHandlers.push(()=>document.removeEventListener("keydown",n));const i=t=>{t.target===e.context.inputElement||e.context.mainElement.contains(t.target)||hide(e)};document.addEventListener("click",i,{capture:!0}),e.context.cleanupHandlers.push(()=>document.removeEventListener("click",i,{capture:!0})),e.onShow&&e.onShow(e)},labels={application:"Calendar",navigation:"Calendar Navigation",arrowNext:{month:"Next month",year:"Next list of years"},arrowPrev:{month:"Previous month",year:"Previous list of years"},month:"Select month, current selected month:",months:"List of months",year:"Select year, current selected year:",years:"List of years",week:"Days of the week",weekNumber:"Numbers of weeks in a year",dates:"Dates in the current month",selectingTime:"Selecting a time ",inputHour:"Hours",inputMinute:"Minutes",rangeHour:"Slider for selecting hours",rangeMinute:"Slider for selecting minutes",btnKeeping:"Switch AM/PM, current position:"},styles={calendar:"vc",controls:"vc-controls",grid:"vc-grid",column:"vc-column",header:"vc-header",headerContent:"vc-header__content",month:"vc-month",year:"vc-year",arrowPrev:"vc-arrow vc-arrow_prev",arrowNext:"vc-arrow vc-arrow_next",wrapper:"vc-wrapper",content:"vc-content",months:"vc-months",monthsMonth:"vc-months__month",years:"vc-years",yearsYear:"vc-years__year",week:"vc-week",weekDay:"vc-week__day",weekNumbers:"vc-week-numbers",weekNumbersTitle:"vc-week-numbers__title",weekNumbersContent:"vc-week-numbers__content",weekNumber:"vc-week-number",dates:"vc-dates",datesRow:"vc-dates__row",date:"vc-date",dateBtn:"vc-date__btn",datePopup:"vc-date__popup",dateRangeTooltip:"vc-date-range-tooltip",time:"vc-time",timeContent:"vc-time__content",timeHour:"vc-time__hour",timeMinute:"vc-time__minute",timeKeeping:"vc-time__keeping",timeRanges:"vc-time__ranges",timeRange:"vc-time__range"};class OptionsCalendar{constructor(){__publicField(this,"type","default"),__publicField(this,"inputMode",!1),__publicField(this,"openOnFocus",!0),__publicField(this,"positionToInput","left"),__publicField(this,"firstWeekday",1),__publicField(this,"monthsToSwitch",1),__publicField(this,"themeAttrDetect","html[data-theme]"),__publicField(this,"locale","en"),__publicField(this,"dateToday","today"),__publicField(this,"dateMin","1970-01-01"),__publicField(this,"dateMax","2470-12-31"),__publicField(this,"displayDateMin"),__publicField(this,"displayDateMax"),__publicField(this,"displayDatesOutside",!0),__publicField(this,"displayDisabledDates",!1),__publicField(this,"displayMonthsCount"),__publicField(this,"disableDates",[]),__publicField(this,"disableAllDates",!1),__publicField(this,"disableDatesPast",!1),__publicField(this,"disableDatesGaps",!1),__publicField(this,"disableWeekdays",[]),__publicField(this,"disableToday",!1),__publicField(this,"enableDates",[]),__publicField(this,"enableEdgeDatesOnly",!0),__publicField(this,"enableDateToggle",!0),__publicField(this,"enableWeekNumbers",!1),__publicField(this,"enableMonthChangeOnDayClick",!0),__publicField(this,"enableJumpToSelectedDate",!1),__publicField(this,"selectionDatesMode","single"),__publicField(this,"selectionMonthsMode",!0),__publicField(this,"selectionYearsMode",!0),__publicField(this,"selectionTimeMode",!1),__publicField(this,"selectedDates",[]),__publicField(this,"selectedMonth"),__publicField(this,"selectedYear"),__publicField(this,"selectedHolidays",[]),__publicField(this,"selectedWeekends",[0,6]),__publicField(this,"selectedTime"),__publicField(this,"selectedTheme","system"),__publicField(this,"timeMinHour",0),__publicField(this,"timeMaxHour",23),__publicField(this,"timeMinMinute",0),__publicField(this,"timeMaxMinute",59),__publicField(this,"timeControls","all"),__publicField(this,"timeStepHour",1),__publicField(this,"timeStepMinute",1),__publicField(this,"sanitizerHTML",e=>e),__publicField(this,"onClickDate"),__publicField(this,"onClickWeekDay"),__publicField(this,"onClickWeekNumber"),__publicField(this,"onClickTitle"),__publicField(this,"onClickMonth"),__publicField(this,"onClickYear"),__publicField(this,"onClickArrow"),__publicField(this,"onChangeTime"),__publicField(this,"onChangeToInput"),__publicField(this,"onCreateDateRangeTooltip"),__publicField(this,"onCreateDateEls"),__publicField(this,"onCreateMonthEls"),__publicField(this,"onCreateYearEls"),__publicField(this,"onInit"),__publicField(this,"onUpdate"),__publicField(this,"onDestroy"),__publicField(this,"onShow"),__publicField(this,"onHide"),__publicField(this,"popups",{}),__publicField(this,"labels",__spreadValues({},labels)),__publicField(this,"layouts",{default:"",multiple:"",month:"",year:""}),__publicField(this,"styles",__spreadValues({},styles))}}const _Calendar=class e extends OptionsCalendar{constructor(t,n){var i;super(),__publicField(this,"init",()=>init(this)),__publicField(this,"update",e=>update(this,e)),__publicField(this,"destroy",()=>destroy(this)),__publicField(this,"show",()=>show(this)),__publicField(this,"hide",()=>hide(this)),__publicField(this,"set",(e,t)=>set(this,e,t)),__publicField(this,"context"),this.context=__spreadProps(__spreadValues({},this.context),{locale:{months:{short:[],long:[]},weekdays:{short:[],long:[]}}}),setContext(this,"mainElement","string"==typeof t?null!=(i=e.memoizedElements.get(t))?i:this.queryAndMemoize(t):t),n&&replaceProperties(this,n)}queryAndMemoize(t){const n=document.querySelector(t);if(!n)throw new Error(errorMessages.notFoundSelector(t));return e.memoizedElements.set(t,n),n}};__publicField(_Calendar,"memoizedElements",new Map);let Calendar=_Calendar;const NAME$f="datepicker",DATA_KEY$b="bs.datepicker",EVENT_KEY$c=`.${DATA_KEY$b}`,DATA_API_KEY$7=".data-api",EVENT_CHANGE$2=`change${EVENT_KEY$c}`,EVENT_SHOW$4=`show${EVENT_KEY$c}`,EVENT_SHOWN$3=`shown${EVENT_KEY$c}`,EVENT_HIDE$3=`hide${EVENT_KEY$c}`,EVENT_HIDDEN$5=`hidden${EVENT_KEY$c}`,EVENT_CLICK_DATA_API$3=`click${EVENT_KEY$c}.data-api`,EVENT_FOCUSIN_DATA_API=`focusin${EVENT_KEY$c}.data-api`,SELECTOR_DATA_TOGGLE$6='[data-bs-toggle="datepicker"]',HIDE_DELAY=100,Default$e={datepickerTheme:null,dateMin:null,dateMax:null,dateFormat:null,displayElement:null,displayMonthsCount:1,firstWeekday:1,inline:!1,locale:"default",positionElement:null,selectedDates:[],selectionMode:"single",placement:"left",vcpOptions:{}},DefaultType$e={datepickerTheme:"(null|string)",dateMin:"(null|string|number|object)",dateMax:"(null|string|number|object)",dateFormat:"(null|object|function)",displayElement:"(null|string|element|boolean)",displayMonthsCount:"number",firstWeekday:"number",inline:"boolean",locale:"string",positionElement:"(null|string|element)",selectedDates:"array",selectionMode:"string",placement:"string",vcpOptions:"object"};class Datepicker extends BaseComponent{constructor(e,t){super(e,t),this._calendar=null,this._isShown=!1,this._initCalendar()}static get Default(){return Default$e}static get DefaultType(){return DefaultType$e}static get NAME(){return NAME$f}toggle(){if(!this._config.inline)return this._isShown?this.hide():this.show()}show(){this._config.inline||!this._calendar||isDisabled(this._element)||this._isShown||EventHandler.trigger(this._element,EVENT_SHOW$4).defaultPrevented||(this._calendar.show(),this._isShown=!0,EventHandler.trigger(this._element,EVENT_SHOWN$3))}hide(){this._config.inline||this._calendar&&this._isShown&&(EventHandler.trigger(this._element,EVENT_HIDE$3).defaultPrevented||(this._calendar.hide(),this._isShown=!1,EventHandler.trigger(this._element,EVENT_HIDDEN$5)))}dispose(){this._themeObserver&&(this._themeObserver.disconnect(),this._themeObserver=null),this._calendar&&this._calendar.destroy(),this._calendar=null,super.dispose()}getSelectedDates(){const e=this._calendar?.context?.selectedDates;return e?[...e]:[]}setSelectedDates(e){this._calendar&&this._calendar.set({selectedDates:e})}_initCalendar(){this._isInput="INPUT"===this._element.tagName,this._isInline=this._config.inline,this._isInline&&!this._isInput&&(this._boundInput=this._element.querySelector('input[type="hidden"], input[name]')),this._positionElement=this._resolvePositionElement(),this._displayElement=this._resolveDisplayElement();const e=this._buildCalendarOptions();this._calendar=new Calendar(this._positionElement,e),this._calendar.init(),this._setupThemeObserver(),this._isInput&&this._element.value&&this._parseInputValue(),this._updateDisplayWithSelectedDates()}_updateDisplayWithSelectedDates(){const{selectedDates:e}=this._config;if(!e||0===e.length)return;const t=this._formatDateForInput(e);this._isInput&&(this._element.value=t),this._boundInput&&(this._boundInput.value=e.join(",")),this._displayElement&&(this._displayElement.textContent=t)}_resolvePositionElement(){let{positionElement:e}=this._config;if("string"==typeof e&&(e=document.querySelector(e)),!e&&this._isInput&&!this._isInline){const t=this._element.closest(".form-adorn");t&&(e=t)}return e||this._element}_resolveDisplayElement(){const{displayElement:e}=this._config;return"string"==typeof e?document.querySelector(e):!0===e||null===e&&!this._isInput&&!this._isInline?this._element.querySelector("[data-bs-datepicker-display]")||this._element:e}_getThemeAncestor(){return this._element.closest("[data-bs-theme]")}_getEffectiveTheme(){const{datepickerTheme:e}=this._config;if(e)return e;const t=this._getThemeAncestor();return t?.getAttribute("data-bs-theme")||null}_syncThemeAttribute(e){if(!e)return;const t=this._getEffectiveTheme();t?e.setAttribute("data-bs-theme",t):e.removeAttribute("data-bs-theme")}_setupThemeObserver(){const e=this._getThemeAncestor();e&&!this._config.datepickerTheme&&(this._themeObserver=new MutationObserver(()=>{this._syncThemeAttribute(this._calendar?.context?.mainElement)}),this._themeObserver.observe(e,{attributes:!0,attributeFilter:["data-bs-theme"]}))}_buildCalendarOptions(){const e=this._getEffectiveTheme(),t=e&&"auto"!==e?e:"system",n={...this._config.vcpOptions,inputMode:!this._isInline,positionToInput:this._config.placement,firstWeekday:this._config.firstWeekday,locale:this._config.locale,selectionDatesMode:this._config.selectionMode,selectedDates:this._config.selectedDates,displayMonthsCount:this._config.displayMonthsCount,type:this._config.displayMonthsCount>1?"multiple":"default",selectedTheme:t,themeAttrDetect:"[data-bs-theme]",onClickDate:(e,t)=>this._handleDateClick(e,t),onInit:e=>{this._syncThemeAttribute(e.context.mainElement)},onShow:()=>{this._isShown=!0,this._syncThemeAttribute(this._calendar.context.mainElement)},onHide:()=>{this._isShown=!1}};if(this._config.selectedDates.length>0){const e=this._parseDate(this._config.selectedDates[0]);n.selectedMonth=e.getMonth(),n.selectedYear=e.getFullYear()}return this._config.dateMin&&(n.dateMin=this._config.dateMin),this._config.dateMax&&(n.dateMax=this._config.dateMax),n}_handleDateClick(e,t){const n=[...e.context.selectedDates];if(n.length>0){const e=this._formatDateForInput(n);this._isInput&&(this._element.value=e),this._boundInput&&(this._boundInput.value=n.join(",")),this._displayElement&&(this._displayElement.textContent=e)}EventHandler.trigger(this._element,EVENT_CHANGE$2,{dates:n,event:t}),this._maybeHideAfterSelection(n)}_maybeHideAfterSelection(e){this._isInline||("single"===this._config.selectionMode&&e.length>0||"multiple-ranged"===this._config.selectionMode&&e.length>=2)&&setTimeout(()=>this.hide(),100)}_parseDate(e){const[t,n,i]=e.split("-");return new Date(t,n-1,i)}_formatDate(e){const t=this._parseDate(e),n="default"===this._config.locale?void 0:this._config.locale,{dateFormat:i}=this._config;return"function"==typeof i?i(t,n):i&&"object"==typeof i?new Intl.DateTimeFormat(n,i).format(t):t.toLocaleDateString(n)}_formatDateForInput(e){if(0===e.length)return"";if(1===e.length)return this._formatDate(e[0]);const t="multiple-ranged"===this._config.selectionMode?" – ":", ";return e.map(e=>this._formatDate(e)).join(t)}_parseInputValue(){const e=this._element.value.trim();if(!e)return;const t=new Date(e);if(!Number.isNaN(t.getTime())){const e=`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`;this._calendar.set({selectedDates:[e]})}}}EventHandler.on(document,EVENT_CLICK_DATA_API$3,SELECTOR_DATA_TOGGLE$6,function(e){"INPUT"!==this.tagName&&"true"!==this.dataset.bsInline&&(e.preventDefault(),Datepicker.getOrCreateInstance(this).toggle())}),EventHandler.on(document,EVENT_FOCUSIN_DATA_API,SELECTOR_DATA_TOGGLE$6,function(){"INPUT"===this.tagName&&Datepicker.getOrCreateInstance(this).show()}),EventHandler.on(document,`DOMContentLoaded${EVENT_KEY$c}.data-api`,()=>{const e=`${SELECTOR_DATA_TOGGLE$6}[data-bs-inline="true"], ${SELECTOR_DATA_TOGGLE$6}[data-bs-selected-dates]`;for(const t of document.querySelectorAll(e))Datepicker.getOrCreateInstance(t)});const CLASS_NAME_OPEN="dialog-open";class DialogBase extends BaseComponent{constructor(e,t){super(e,t),this._isTransitioning=!1,this._openedAsModal=!1,this._addDialogListeners()}static get NAME(){return"dialogbase"}toggle(e){return this._element.open?this.hide():this.show(e)}show(e){if(this._element.open||this._isTransitioning)return;if(EventHandler.trigger(this._element,this.constructor.eventName("show"),{relatedTarget:e}).defaultPrevented)return;this._isTransitioning=!0,this._onBeforeShow();const{modal:t,preventBodyScroll:n}=this._getShowOptions();this._showElement({modal:t,preventBodyScroll:n}),this._queueCallback(()=>{this._isTransitioning=!1,EventHandler.trigger(this._element,this.constructor.eventName("shown"),{relatedTarget:e})},this._element,this._isAnimated())}hide(){this._element.open&&!this._isTransitioning&&(EventHandler.trigger(this._element,this.constructor.eventName("hide")).defaultPrevented||(this._isTransitioning=!0,this._hideElement(),this._queueCallback(()=>{this._element.open&&this._closeAndCleanup(),this._element.classList.remove("hiding"),this._onAfterHide(),this._isTransitioning=!1,EventHandler.trigger(this._element,this.constructor.eventName("hidden"))},this._element,this._isAnimated())))}dispose(){this._element.open&&this._closeAndCleanup(),super.dispose()}_getShowOptions(){return{modal:!0,preventBodyScroll:!0}}_onBeforeShow(){}_onAfterHide(){}_isAnimated(){return!this._element.classList.contains(this._getInstantClassName())}_getInstantClassName(){return"dialog-instant"}_getStaticClassName(){return"dialog-static"}_onCancel(){}_showElement({modal:e=!0,preventBodyScroll:t=!0}={}){this._openedAsModal=e,e?this._element.showModal():this._element.show(),t&&document.documentElement.classList.add("dialog-open")}_hideElement(){this._hideChildComponents(),this._element.classList.add("hiding"),this._shouldDeferClose()||this._closeAndCleanup()}_closeAndCleanup(){this._element.close(),this._openedAsModal=!1,document.querySelector("dialog[open]:modal")||document.documentElement.classList.remove("dialog-open")}_shouldDeferClose(){return!1}_triggerBackdropTransition(){if(EventHandler.trigger(this._element,this.constructor.eventName("hidePrevented")).defaultPrevented)return;const e=this._getStaticClassName();this._element.classList.add(e),this._queueCallback(()=>{this._element.classList.remove(e)},this._element)}_hideChildComponents(){for(const e of SelectorEngine.find('[data-bs-toggle="tooltip"], [data-bs-toggle="popover"]',this._element)){const t=Data.getAny(e);t&&"function"==typeof t.hide&&t.hide()}for(const e of SelectorEngine.find(".toast.show",this._element)){const t=Data.getAny(e);t&&"function"==typeof t.hide&&t.hide()}}_addDialogListeners(){const e=this.constructor.EVENT_KEY;EventHandler.on(this._element,"cancel",e=>{e.preventDefault(),this._config.keyboard?(this._onCancel(),this.hide()):this._triggerBackdropTransition()}),EventHandler.on(this._element,`keydown${e}`,e=>{"Escape"!==e.key||this._openedAsModal||(e.preventDefault(),this._config.keyboard&&(this._onCancel(),this.hide()))}),EventHandler.on(this._element,`click${e}`,e=>{e.target===this._element&&this._openedAsModal&&("static"!==this._config.backdrop?this.hide():this._triggerBackdropTransition())})}}const NAME$e="dialog",DATA_KEY$a="bs.dialog",EVENT_KEY$b=`.${DATA_KEY$a}`,DATA_API_KEY$6=".data-api",EVENT_SHOW$3=`show${EVENT_KEY$b}`,EVENT_HIDDEN$4=`hidden${EVENT_KEY$b}`,EVENT_CANCEL=`cancel${EVENT_KEY$b}`,EVENT_CLICK_DATA_API$2=`click${EVENT_KEY$b}.data-api`,CLASS_NAME_NONMODAL="dialog-nonmodal",CLASS_NAME_INSTANT="dialog-instant",CLASS_NAME_SWAP_IN="dialog-swap-in",SELECTOR_DATA_TOGGLE$5='[data-bs-toggle="dialog"]',Default$d={backdrop:!0,keyboard:!0,modal:!0},DefaultType$d={backdrop:"(boolean|string)",keyboard:"boolean",modal:"boolean"};class Dialog extends DialogBase{static get Default(){return Default$d}static get DefaultType(){return DefaultType$d}static get NAME(){return NAME$e}handleUpdate(){}_getShowOptions(){return{modal:this._config.modal,preventBodyScroll:this._config.modal}}_onBeforeShow(){this._config.modal||this._element.classList.add("dialog-nonmodal")}_onAfterHide(){this._element.classList.remove("dialog-nonmodal")}_shouldDeferClose(){return this._isAnimated()}_onCancel(){EventHandler.trigger(this._element,EVENT_CANCEL)}}EventHandler.on(document,EVENT_CLICK_DATA_API$2,SELECTOR_DATA_TOGGLE$5,function(e){const t=SelectorEngine.getElementFromSelector(this);["A","AREA"].includes(this.tagName)&&e.preventDefault(),EventHandler.one(t,EVENT_SHOW$3,e=>{e.defaultPrevented||EventHandler.one(t,EVENT_HIDDEN$4,()=>{isVisible(this)&&this.focus({preventScroll:!0})})});const n=Manipulator.getDataAttributes(this),i=this.closest("dialog[open]");if(i&&i!==t){const e=Dialog.getOrCreateInstance(t,n);t.classList.add("dialog-swap-in"),e.show(this),EventHandler.one(t,`shown${EVENT_KEY$b}`,()=>{t.classList.remove("dialog-swap-in")});const s=Dialog.getInstance(i);return void(s&&(i.classList.add("dialog-instant"),EventHandler.one(i,EVENT_HIDDEN$4,()=>{i.classList.remove("dialog-instant")}),s.hide()))}Dialog.getOrCreateInstance(t,n).toggle(this)}),enableDismissTrigger(Dialog);const NAME$d="navoverflow",DATA_KEY$9="bs.navoverflow",EVENT_KEY$a=`.${DATA_KEY$9}`,EVENT_UPDATE=`update${EVENT_KEY$a}`,EVENT_OVERFLOW=`overflow${EVENT_KEY$a}`,CLASS_NAME_OVERFLOW="nav-overflow",CLASS_NAME_OVERFLOW_MENU="nav-overflow-menu",CLASS_NAME_HIDDEN="d-none",SELECTOR_NAV_ITEM=".nav-item",SELECTOR_NAV_LINK=".nav-link",SELECTOR_OVERFLOW_TOGGLE=".nav-overflow-toggle",SELECTOR_OVERFLOW_MENU=".nav-overflow-menu",SELECTOR_CUSTOM_ICON="[data-bs-overflow-icon]",CLASS_NAME_KEEP="nav-overflow-keep",Default$c={collapseBelow:0,iconPlacement:"start",menuPlacement:"bottom-end",moreText:"More",moreIcon:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"/></svg>',threshold:0},DefaultType$c={collapseBelow:"(number|string)",iconPlacement:"string",menuPlacement:"string",moreText:"string",moreIcon:"string",threshold:"number"};class NavOverflow extends BaseComponent{constructor(e,t){super(e,t),this._items=[],this._overflowItems=[],this._overflowMenu=null,this._overflowToggle=null,this._resizeObserver=null,this._collapseBelow=0,this._isInitialized=!1,this._init()}static get Default(){return Default$c}static get DefaultType(){return DefaultType$c}static get NAME(){return NAME$d}update(){this._calculateOverflow(),EventHandler.trigger(this._element,EVENT_UPDATE)}dispose(){this._resizeObserver&&this._resizeObserver.disconnect(),this._restoreItems(),this._overflowToggle&&this._overflowToggle.parentElement&&this._overflowToggle.parentElement.remove(),super.dispose()}_init(){this._element.classList.add("nav-overflow"),this._items=[...SelectorEngine.find(".nav-item",this._element)];for(const[e,t]of this._items.entries())t.dataset.bsNavOrder=e;this._collapseBelow=this._resolveCollapseBelow(),this._createOverflowMenu(),this._setupResizeObserver(),this._calculateOverflow(),this._isInitialized=!0}_createOverflowMenu(){if(this._overflowToggle=SelectorEngine.findOne(".nav-overflow-toggle",this._element),this._overflowToggle)return void(this._overflowMenu=SelectorEngine.findOne(".nav-overflow-menu",this._element));const e=`<span class="nav-overflow-icon">${this._resolveIcon()}</span>`,t=`<span class="nav-overflow-text">${this._config.moreText}</span>`,n="end"===this._config.iconPlacement?`${t}${e}`:`${e}${t}`,i=document.createElement("li");i.className="nav-item nav-overflow-item",i.innerHTML=`\n      <button class="nav-link nav-overflow-toggle" type="button" data-bs-toggle="menu" data-bs-placement="${this._config.menuPlacement}" aria-expanded="false">\n        ${n}\n      </button>\n      <div class="nav-overflow-menu menu"></div>\n    `,this._element.append(i),this._overflowToggle=i.querySelector(".nav-overflow-toggle"),this._overflowMenu=i.querySelector(".nav-overflow-menu")}_resolveIcon(){const e=SelectorEngine.findOne(SELECTOR_CUSTOM_ICON,this._element);if(!e)return this._config.moreIcon;const t=e.cloneNode(!0);t.removeAttribute("data-bs-overflow-icon");const n=t.outerHTML;return e.remove(),n}_resolveCollapseBelow(){const e=this._config.collapseBelow;if("number"==typeof e)return e;if("string"==typeof e&&""!==e){const t=getComputedStyle(document.documentElement).getPropertyValue(`--bs-breakpoint-${e}`);return Number.parseFloat(t)||0}return 0}_setupResizeObserver(){"undefined"!=typeof ResizeObserver?(this._resizeObserver=new ResizeObserver(()=>{this._calculateOverflow()}),this._resizeObserver.observe(this._element)):EventHandler.on(window,"resize",()=>this._calculateOverflow())}_calculateOverflow(){this._restoreItems();const e=this._element.offsetWidth,t=this._overflowToggle?.closest(".nav-item");if(this._collapseBelow>0&&e<this._collapseBelow){const e=this._items.filter(e=>!e.classList.contains(CLASS_NAME_KEEP));return this._moveToOverflow(e),t&&(e.length>0?t.classList.remove("d-none"):t.classList.add("d-none")),void(e.length>0&&EventHandler.trigger(this._element,EVENT_OVERFLOW,{overflowCount:e.length,visibleCount:this._items.length-e.length}))}let n=0;const i=[],s=e-(t?.offsetWidth||0)-this._items.filter(e=>e.classList.contains(CLASS_NAME_KEEP)).reduce((e,t)=>e+t.offsetWidth,0)-10;for(const e of this._items)e.classList.contains(CLASS_NAME_KEEP)||(n+=e.offsetWidth,n>s&&i.push(e));if(this._items.length-i.length<this._config.threshold&&this._items.length>this._config.threshold){const e=this._items.slice(this._config.threshold).filter(e=>!e.classList.contains(CLASS_NAME_KEEP));i.length=0,i.push(...e)}this._moveToOverflow(i),t&&(i.length>0?t.classList.remove("d-none"):t.classList.add("d-none")),i.length>0&&EventHandler.trigger(this._element,EVENT_OVERFLOW,{overflowCount:i.length,visibleCount:this._items.length-i.length})}_moveToOverflow(e){if(this._overflowMenu){this._overflowMenu.innerHTML="",this._overflowItems=[];for(const t of e){const e=SelectorEngine.findOne(".nav-link",t);if(!e)continue;const n=e.cloneNode(!0);n.className="menu-item",e.classList.contains("active")&&n.classList.add("active"),(e.classList.contains("disabled")||e.hasAttribute("disabled"))&&n.classList.add("disabled"),this._overflowMenu.append(n),t.classList.add("d-none"),t.dataset.bsNavOverflow="true",this._overflowItems.push(t)}}}_restoreItems(){for(const e of this._items)e.classList.remove("d-none"),delete e.dataset.bsNavOverflow;this._overflowMenu&&(this._overflowMenu.innerHTML=""),this._overflowItems=[]}}EventHandler.on(document,"DOMContentLoaded",()=>{for(const e of SelectorEngine.find('[data-bs-toggle="nav-overflow"]'))NavOverflow.getOrCreateInstance(e)});const NAME$c="swipe",EVENT_KEY$9=".bs.swipe",EVENT_TOUCHSTART="touchstart.bs.swipe",EVENT_TOUCHMOVE="touchmove.bs.swipe",EVENT_TOUCHEND="touchend.bs.swipe",EVENT_POINTERDOWN="pointerdown.bs.swipe",EVENT_POINTERUP="pointerup.bs.swipe",POINTER_TYPE_TOUCH="touch",POINTER_TYPE_PEN="pen",CLASS_NAME_POINTER_EVENT="pointer-event",SWIPE_THRESHOLD=40,Default$b={endCallback:null,leftCallback:null,rightCallback:null,upCallback:null,downCallback:null},DefaultType$b={endCallback:"(function|null)",leftCallback:"(function|null)",rightCallback:"(function|null)",upCallback:"(function|null)",downCallback:"(function|null)"};class Swipe extends Config{constructor(e,t){super(),this._element=e,e&&Swipe.isSupported()&&(this._config=this._getConfig(t),this._deltaX=0,this._deltaY=0,this._supportPointerEvents=Boolean(window.PointerEvent),this._initEvents())}static get Default(){return Default$b}static get DefaultType(){return DefaultType$b}static get NAME(){return NAME$c}dispose(){EventHandler.off(this._element,".bs.swipe")}_start(e){if(!this._supportPointerEvents)return this._deltaX=e.touches[0].clientX,void(this._deltaY=e.touches[0].clientY);this._eventIsPointerPenTouch(e)&&(this._deltaX=e.clientX,this._deltaY=e.clientY)}_end(e){this._eventIsPointerPenTouch(e)&&(this._deltaX=e.clientX-this._deltaX,this._deltaY=e.clientY-this._deltaY),this._handleSwipe(),execute(this._config.endCallback)}_move(e){if(e.touches&&e.touches.length>1)return this._deltaX=0,void(this._deltaY=0);this._deltaX=e.touches[0].clientX-this._deltaX,this._deltaY=e.touches[0].clientY-this._deltaY}_handleSwipe(){const e=Math.abs(this._deltaX),t=Math.abs(this._deltaY);if(t>e&&t>40){const e=this._deltaY>0?"down":"up";return this._deltaX=0,this._deltaY=0,void execute("down"===e?this._config.downCallback:this._config.upCallback)}if(e>40){const t=e/this._deltaX;if(this._deltaX=0,this._deltaY=0,!t)return;return void execute(t>0?this._config.rightCallback:this._config.leftCallback)}this._deltaX=0,this._deltaY=0}_initEvents(){this._supportPointerEvents?(EventHandler.on(this._element,EVENT_POINTERDOWN,e=>this._start(e)),EventHandler.on(this._element,EVENT_POINTERUP,e=>this._end(e)),this._element.classList.add("pointer-event")):(EventHandler.on(this._element,EVENT_TOUCHSTART,e=>this._start(e)),EventHandler.on(this._element,EVENT_TOUCHMOVE,e=>this._move(e)),EventHandler.on(this._element,EVENT_TOUCHEND,e=>this._end(e)))}_eventIsPointerPenTouch(e){return this._supportPointerEvents&&("pen"===e.pointerType||"touch"===e.pointerType)}static isSupported(){return"ontouchstart"in document.documentElement||navigator.maxTouchPoints>0}}const NAME$b="drawer",DATA_KEY$8="bs.drawer",EVENT_KEY$8=`.${DATA_KEY$8}`,DATA_API_KEY$5=".data-api",EVENT_LOAD_DATA_API$2=`load${EVENT_KEY$8}.data-api`,EVENT_HIDDEN$3=`hidden${EVENT_KEY$8}`,EVENT_RESIZE$1=`resize${EVENT_KEY$8}`,EVENT_CLICK_DATA_API$1=`click${EVENT_KEY$8}.data-api`,SELECTOR_DATA_TOGGLE$4='[data-bs-toggle="drawer"]',Default$a={backdrop:!0,keyboard:!0,scroll:!1},DefaultType$a={backdrop:"(boolean|string)",keyboard:"boolean",scroll:"boolean"};class Drawer extends DialogBase{constructor(e,t){super(e,t),this._swipeHelper=null}static get Default(){return Default$a}static get DefaultType(){return DefaultType$a}static get NAME(){return NAME$b}dispose(){this._swipeHelper&&this._swipeHelper.dispose(),super.dispose()}_getShowOptions(){return{modal:Boolean(this._config.backdrop)||!this._config.scroll,preventBodyScroll:!this._config.scroll}}_onBeforeShow(){this._initSwipe()}_getInstantClassName(){return"drawer-instant"}_getStaticClassName(){return"drawer-static"}_initSwipe(){if(this._swipeHelper||!Swipe.isSupported())return;const e={},t=this._element;t.classList.contains("drawer-bottom")?e.downCallback=()=>this.hide():t.classList.contains("drawer-top")?e.upCallback=()=>this.hide():t.classList.contains("drawer-end")?isRTL$1()?e.leftCallback=()=>this.hide():e.rightCallback=()=>this.hide():isRTL$1()?e.rightCallback=()=>this.hide():e.leftCallback=()=>this.hide(),this._swipeHelper=new Swipe(t,e)}}EventHandler.on(document,EVENT_CLICK_DATA_API$1,SELECTOR_DATA_TOGGLE$4,function(e){const t=SelectorEngine.getElementFromSelector(this);if(["A","AREA"].includes(this.tagName)&&e.preventDefault(),isDisabled(this))return;EventHandler.one(t,EVENT_HIDDEN$3,()=>{isVisible(this)&&this.focus({preventScroll:!0})});const n=SelectorEngine.findOne("dialog.drawer[open]");n&&n!==t&&Drawer.getInstance(n).hide(),Drawer.getOrCreateInstance(t).toggle(this)}),EventHandler.on(window,EVENT_LOAD_DATA_API$2,()=>{for(const e of SelectorEngine.find("dialog.drawer[open]"))Drawer.getOrCreateInstance(e).show()}),EventHandler.on(window,EVENT_RESIZE$1,()=>{for(const e of SelectorEngine.find('dialog[open][class*="\\:drawer"]'))"fixed"!==getComputedStyle(e).position&&Drawer.getOrCreateInstance(e).hide()}),enableDismissTrigger(Drawer);const NAME$a="strength",DATA_KEY$7="bs.strength",EVENT_KEY$7=`.${DATA_KEY$7}`,DATA_API_KEY$4=".data-api",EVENT_STRENGTH_CHANGE=`strengthChange${EVENT_KEY$7}`,SELECTOR_DATA_STRENGTH="[data-bs-strength]",STRENGTH_LEVELS=["weak","fair","good","strong"],Default$9={input:null,minLength:8,messages:{weak:"Weak",fair:"Fair",good:"Good",strong:"Strong"},weights:{minLength:1,extraLength:1,lowercase:1,uppercase:1,numbers:1,special:1,multipleSpecial:1,longPassword:1},thresholds:[2,4,6],scorer:null},DefaultType$9={input:"(string|element|null)",minLength:"number",messages:"object",weights:"object",thresholds:"array",scorer:"(function|null)"};class Strength extends BaseComponent{constructor(e,t){super(e,t),this._input=this._getInput(),this._segments=SelectorEngine.find(".strength-segment",this._element),this._textElement=SelectorEngine.findOne(".strength-text",this._element.parentElement),this._currentStrength=null,this._input&&(this._addEventListeners(),this._evaluate())}static get Default(){return Default$9}static get DefaultType(){return DefaultType$9}static get NAME(){return NAME$a}getStrength(){return this._currentStrength}evaluate(){this._evaluate()}_getInput(){if(this._config.input)return"string"==typeof this._config.input?SelectorEngine.findOne(this._config.input):this._config.input;const e=this._element.parentElement;return SelectorEngine.findOne('input[type="password"]',e)}_addEventListeners(){EventHandler.on(this._input,"input",()=>this._evaluate()),EventHandler.on(this._input,"change",()=>this._evaluate())}_evaluate(){const e=this._input.value,t=this._calculateScore(e),n=this._scoreToStrength(t);n!==this._currentStrength&&(this._currentStrength=n,this._updateUI(n,t),EventHandler.trigger(this._element,EVENT_STRENGTH_CHANGE,{strength:n,score:t,password:e.length>0?"***":""}))}_calculateScore(e){if(!e)return 0;if("function"==typeof this._config.scorer)return this._config.scorer(e);const{weights:t}=this._config;let n=0;return e.length>=this._config.minLength&&(n+=t.minLength),e.length>=this._config.minLength+4&&(n+=t.extraLength),/[a-z]/.test(e)&&(n+=t.lowercase),/[A-Z]/.test(e)&&(n+=t.uppercase),/\d/.test(e)&&(n+=t.numbers),/[!@#$%^&*(),.?":{}|<>]/.test(e)&&(n+=t.special),/[!@#$%^&*(),.?":{}|<>].*[!@#$%^&*(),.?":{}|<>]/.test(e)&&(n+=t.multipleSpecial),e.length>=16&&(n+=t.longPassword),n}_scoreToStrength(e){if(0===e)return null;const[t,n,i]=this._config.thresholds;return e<=t?"weak":e<=n?"fair":e<=i?"good":"strong"}_updateUI(e){e?this._element.dataset.bsStrength=e:delete this._element.dataset.bsStrength;const t=e?STRENGTH_LEVELS.indexOf(e):-1;for(const[e,n]of this._segments.entries())e<=t?n.classList.add("active"):n.classList.remove("active");if(this._textElement)if(e&&this._config.messages[e]){this._textElement.textContent=this._config.messages[e],this._textElement.dataset.bsStrength=e;const t={weak:"danger",fair:"warning",good:"info",strong:"success"};this._textElement.style.setProperty("--strength-color",`var(--${t[e]}-text)`)}else this._textElement.textContent="",delete this._textElement.dataset.bsStrength}}EventHandler.on(document,`DOMContentLoaded${EVENT_KEY$7}.data-api`,()=>{for(const e of SelectorEngine.find("[data-bs-strength]"))Strength.getOrCreateInstance(e)});const NAME$9="otpInput",DATA_KEY$6="bs.otpInput",EVENT_KEY$6=`.${DATA_KEY$6}`,DATA_API_KEY$3=".data-api",EVENT_COMPLETE=`complete${EVENT_KEY$6}`,EVENT_INPUT$1=`input${EVENT_KEY$6}`,EVENT_DOMCONTENT_LOADED=`DOMContentLoaded${EVENT_KEY$6}.data-api`,SELECTOR_DATA_OTP="[data-bs-otp]",SELECTOR_INPUT$1="input",SYNC_EVENTS=["blur","keyup","select"],CLASS_NAME_INPUT="otp-input",CLASS_NAME_RENDERED="otp-rendered",CLASS_NAME_SLOTS="otp-slots",CLASS_NAME_SLOT="otp-slot",CLASS_NAME_SLOT_FILLED="otp-slot-filled",CLASS_NAME_SLOT_ACTIVE="otp-slot-active",CLASS_NAME_SEPARATOR="otp-separator",MASK_CHARACTER="•",TYPES={numeric:{inputmode:"numeric",pattern:"[0-9]*",filter:/[^0-9]/g},alphanumeric:{inputmode:"text",pattern:"[A-Za-z0-9]*",filter:/[^A-Za-z0-9]/g},alpha:{inputmode:"text",pattern:"[A-Za-z]*",filter:/[^A-Za-z]/g}},Default$8={groups:null,length:null,mask:!1,separator:"·",type:"numeric"},DefaultType$8={groups:"(array|null)",length:"(number|null)",mask:"boolean",separator:"string",type:"string"};class OtpInput extends BaseComponent{constructor(e,t){super(e,t),this._input=SelectorEngine.findOne("input",this._element),this._input&&(this._type=TYPES[this._config.type]||TYPES.numeric,this._length=this._resolveLength(),this._slots=[],this._pointerActive=!1,this._pointerIndex=0,this._setupInput(),this._renderSlots(),this._addEventListeners(),this._render())}static get Default(){return Default$8}static get DefaultType(){return DefaultType$8}static get NAME(){return NAME$9}getValue(){return this._input.value}setValue(e){this._input.value=this._sanitize(String(e)),this._render(),this._checkComplete()}clear(){this._input.value="",this._render(),this._input.focus()}focus(){this._input.focus(),this._selectSlot(this._firstEmptyIndex()),this._render()}dispose(){EventHandler.off(this._input,"input",this._onInput),EventHandler.off(this._input,"beforeinput",this._onBeforeInput),EventHandler.off(this._input,"focus",this._onFocus),EventHandler.off(this._input,"pointerdown",this._onPointerDown),EventHandler.off(document,"selectionchange",this._onSelectionChange);for(const e of SYNC_EVENTS)EventHandler.off(this._input,e,this._onSync);this._slotsContainer?.remove(),this._element.classList.remove("otp-rendered"),super.dispose()}_resolveLength(){if(this._config.length)return this._config.length;const e=Number.parseInt(this._input.getAttribute("maxlength"),10);return Number.isNaN(e)||e<1?6:e}_setupInput(){const e=this._input;"number"!==e.type&&"password"!==e.type||(e.type="text"),e.classList.add("otp-input"),e.setAttribute("maxlength",String(this._length)),e.setAttribute("inputmode",this._type.inputmode),e.setAttribute("pattern",this._type.pattern),e.getAttribute("autocomplete")||e.setAttribute("autocomplete","one-time-code"),e.value&&(e.value=this._sanitize(e.value))}_renderSlots(){const e=document.createElement("div");e.className="otp-slots",e.setAttribute("aria-hidden","true");const{groups:t}=this._config;let n=0,i=0;for(let s=0;s<this._length;s++){const o=document.createElement("div");if(o.className="otp-slot",e.append(o),this._slots.push(o),Array.isArray(t)&&t.length>0&&(i++,i===t[n]&&s<this._length-1)){const s=document.createElement("div");s.className="otp-separator",s.textContent=this._config.separator,e.append(s),n=Math.min(n+1,t.length-1),i=0}}this._slotsContainer=e,this._element.append(e),this._element.classList.add("otp-rendered")}_addEventListeners(){this._onInput=()=>this._handleInput(),this._onBeforeInput=e=>this._handleBeforeInput(e),this._onPointerDown=e=>this._handlePointerDown(e),this._onFocus=()=>{if(this._pointerActive)return this._pointerActive=!1,this._selectSlot(this._pointerIndex),void this._render();this._selectSlot(this._firstEmptyIndex()),this._render()},this._onSync=()=>this._render(),this._onSelectionChange=()=>{document.activeElement===this._input&&this._render()},EventHandler.on(this._input,"input",this._onInput),EventHandler.on(this._input,"beforeinput",this._onBeforeInput),EventHandler.on(this._input,"focus",this._onFocus),EventHandler.on(this._input,"pointerdown",this._onPointerDown),EventHandler.on(document,"selectionchange",this._onSelectionChange);for(const e of SYNC_EVENTS)EventHandler.on(this._input,e,this._onSync)}_handleInput(){const e=this._sanitize(this._input.value);e!==this._input.value&&(this._input.value=e),document.activeElement===this._input&&this._selectSlot(this._firstEmptyIndex()),this._afterValueChange()}_handleBeforeInput(e){const{inputType:t,data:n}=e;if("insertText"===t&&n&&1===n.length){e.preventDefault();const t=this._sanitize(n);if(!t)return;const i=Math.min(this._input.selectionStart??0,this._length-1),s=[...this._input.value];return s[i]=t,this._input.value=s.join("").slice(0,this._length),this._selectSlot(i+1),void this._afterValueChange()}if("deleteContentBackward"===t){e.preventDefault();const t=this._input.selectionStart??0,n=this._input.selectionEnd??t,i=[...this._input.value];n>t?(i.splice(t,n-t),this._input.value=i.join(""),this._selectSlot(t)):t>0&&(i.splice(t-1,1),this._input.value=i.join(""),this._selectSlot(t-1)),this._afterValueChange()}}_handlePointerDown(e){const t=this._slotIndexFromPoint(e.clientX);if(null===t)return;const n=Math.min(t,this._firstEmptyIndex());if(document.activeElement===this._input)return e.preventDefault(),this._selectSlot(n),void this._render();this._pointerActive=!0,this._pointerIndex=n}_slotIndexFromPoint(e){for(const[t,n]of this._slots.entries())if(e<=n.getBoundingClientRect().right||t===this._slots.length-1)return t;return null}_afterValueChange(){this._render(),EventHandler.trigger(this._element,EVENT_INPUT$1,{value:this._input.value}),this._checkComplete()}_firstEmptyIndex(){return Math.min(this._input.value.length,this._length-1)}_selectSlot(e){const t=Math.max(0,Math.min(e,this._length-1)),n=t<this._input.value.length?t+1:t;this._input.setSelectionRange(t,n)}_sanitize(e){return e.replace(this._type.filter,"").slice(0,this._length)}_render(){const{value:e}=this._input,t=document.activeElement===this._input,n=Math.min(this._input.selectionStart??e.length,this._length-1);for(const[i,s]of this._slots.entries()){const o=e[i]??"";s.textContent=o&&this._config.mask?"•":o,s.classList.toggle("otp-slot-filled",Boolean(o)),s.classList.toggle("otp-slot-active",t&&i===n)}}_checkComplete(){const{value:e}=this._input;e.length===this._length&&EventHandler.trigger(this._element,EVENT_COMPLETE,{value:e})}}EventHandler.on(document,EVENT_DOMCONTENT_LOADED,()=>{for(const e of SelectorEngine.find("[data-bs-otp]"))OtpInput.getOrCreateInstance(e)});const NAME$8="chips",DATA_KEY$5="bs.chips",EVENT_KEY$5=".bs.chips",DATA_API_KEY$2=".data-api",EVENT_ADD="add.bs.chips",EVENT_REMOVE="remove.bs.chips",EVENT_CHANGE$1="change.bs.chips",EVENT_SELECT="select.bs.chips",SELECTOR_DATA_CHIPS="[data-bs-chips]",SELECTOR_GHOST_INPUT=".form-ghost",SELECTOR_CHIP=".chip",SELECTOR_CHIP_DISMISS=".chip-dismiss",CLASS_NAME_CHIP="chip",CLASS_NAME_CHIP_DISMISS="chip-dismiss",CLASS_NAME_ACTIVE$2="active",DEFAULT_DISMISS_ICON='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>',Default$7={separator:",",allowDuplicates:!1,maxChips:null,placeholder:"",dismissible:!0,dismissIcon:DEFAULT_DISMISS_ICON,createOnBlur:!0},DefaultType$7={separator:"(string|null)",allowDuplicates:"boolean",maxChips:"(number|null)",placeholder:"string",dismissible:"boolean",dismissIcon:"string",createOnBlur:"boolean"};class Chips extends BaseComponent{constructor(e,t){super(e,t),this._input=SelectorEngine.findOne(".form-ghost",this._element),this._chips=[],this._selectedChips=new Set,this._anchorChip=null,this._input||this._createInput(),this._initializeExistingChips(),this._addEventListeners()}static get Default(){return Default$7}static get DefaultType(){return DefaultType$7}static get NAME(){return NAME$8}add(e){const t=String(e).trim();if(!t)return null;if(!this._config.allowDuplicates&&this._chips.includes(t))return null;if(null!==this._config.maxChips&&this._chips.length>=this._config.maxChips)return null;if(EventHandler.trigger(this._element,EVENT_ADD,{value:t,relatedTarget:this._input}).defaultPrevented)return null;const n=this._createChip(t);return this._element.insertBefore(n,this._input),this._chips.push(t),EventHandler.trigger(this._element,EVENT_CHANGE$1,{values:this.getValues()}),n}remove(e){let t,n;return"string"==typeof e?(n=e,t=this._findChipByValue(n)):(t=e,n=this._getChipValue(t)),!(!t||!n)&&(!EventHandler.trigger(this._element,EVENT_REMOVE,{value:n,chip:t,relatedTarget:this._input}).defaultPrevented&&(this._selectedChips.delete(t),this._anchorChip===t&&(this._anchorChip=null),t.remove(),this._chips=this._chips.filter(e=>e!==n),EventHandler.trigger(this._element,EVENT_CHANGE$1,{values:this.getValues()}),!0))}removeSelected(){const e=[...this._selectedChips];for(const t of e)this.remove(t);this._input?.focus()}getValues(){return[...this._chips]}getSelectedValues(){return[...this._selectedChips].map(e=>this._getChipValue(e))}clear(){const e=SelectorEngine.find(".chip",this._element);for(const t of e)t.remove();this._chips=[],this._selectedChips.clear(),this._anchorChip=null,EventHandler.trigger(this._element,EVENT_CHANGE$1,{values:[]})}clearSelection(){for(const e of this._selectedChips)e.classList.remove("active");this._selectedChips.clear(),this._anchorChip=null,EventHandler.trigger(this._element,EVENT_SELECT,{selected:[]})}selectChip(e,t={}){const{addToSelection:n=!1,rangeSelect:i=!1}=t,s=this._getChipElements();if(s.includes(e)){if(i&&this._anchorChip){const t=s.indexOf(this._anchorChip),i=s.indexOf(e),o=Math.min(t,i),a=Math.max(t,i);n||this.clearSelection();for(let e=o;e<=a;e++)this._selectedChips.add(s[e]),s[e].classList.add("active")}else n?this._selectedChips.has(e)?(this._selectedChips.delete(e),e.classList.remove("active")):(this._selectedChips.add(e),e.classList.add("active"),this._anchorChip=e):(this.clearSelection(),this._selectedChips.add(e),e.classList.add("active"),this._anchorChip=e);EventHandler.trigger(this._element,EVENT_SELECT,{selected:this.getSelectedValues()})}}focus(){this._input?.focus()}_getChipElements(){return SelectorEngine.find(".chip",this._element)}_createInput(){const e=document.createElement("input");e.type="text",e.className="form-ghost",this._config.placeholder&&(e.placeholder=this._config.placeholder),this._element.append(e),this._input=e}_initializeExistingChips(){const e=SelectorEngine.find(".chip",this._element);for(const t of e){const e=this._getChipValue(t);e&&(this._chips.push(e),this._setupChip(t))}}_setupChip(e){e.setAttribute("tabindex","0"),this._config.dismissible&&!SelectorEngine.findOne(".chip-dismiss",e)&&e.append(this._createDismissButton())}_createChip(e){const t=document.createElement("span");return t.className="chip",t.dataset.bsChipValue=e,t.append(document.createTextNode(e)),this._setupChip(t),t}_createDismissButton(){const e=document.createElement("button");return e.type="button",e.className="chip-dismiss",e.setAttribute("aria-label","Remove"),e.setAttribute("tabindex","-1"),e.innerHTML=this._config.dismissIcon,e}_findChipByValue(e){return this._getChipElements().find(t=>this._getChipValue(t)===e)}_getChipValue(e){if(e.dataset.bsChipValue)return e.dataset.bsChipValue;const t=e.cloneNode(!0),n=SelectorEngine.findOne(".chip-dismiss",t);return n&&n.remove(),t.textContent?.trim()||""}_addEventListeners(){EventHandler.on(this._input,"keydown",e=>this._handleInputKeydown(e)),EventHandler.on(this._input,"input",e=>this._handleInput(e)),EventHandler.on(this._input,"paste",e=>this._handlePaste(e)),EventHandler.on(this._input,"focus",()=>this.clearSelection()),this._config.createOnBlur&&EventHandler.on(this._input,"blur",e=>{e.relatedTarget?.closest(".chip")||this._createChipFromInput()}),EventHandler.on(this._element,"click",".chip",e=>{if(e.target.closest(".chip-dismiss"))return;const t=e.target.closest(".chip");t&&(e.preventDefault(),this.selectChip(t,{addToSelection:e.metaKey||e.ctrlKey,rangeSelect:e.shiftKey}),t.focus())}),EventHandler.on(this._element,"click",".chip-dismiss",e=>{e.stopPropagation();const t=e.target.closest(".chip");t&&(this.remove(t),this._input?.focus())}),EventHandler.on(this._element,"keydown",".chip",e=>{this._handleChipKeydown(e)}),EventHandler.on(this._element,"click",e=>{e.target===this._element&&(this.clearSelection(),this._input?.focus())})}_handleInputKeydown(e){const{key:t}=e;switch(t){case"Enter":e.preventDefault(),this._createChipFromInput();break;case"Backspace":case"Delete":if(""===this._input.value){e.preventDefault();const t=this._getChipElements();if(t.length>0){const e=t.at(-1);this.selectChip(e),e.focus()}}break;case"ArrowLeft":if(0===this._input.selectionStart&&0===this._input.selectionEnd){e.preventDefault();const t=this._getChipElements();if(t.length>0){const n=t.at(-1);e.shiftKey?this.selectChip(n,{addToSelection:!0}):this.selectChip(n),n.focus()}}break;case"Escape":this._input.value="",this.clearSelection(),this._input.blur()}}_handleChipKeydown(e){const{key:t}=e,n=e.target.closest(".chip");if(!n)return;const i=this._getChipElements(),s=i.indexOf(n);switch(t){case"Backspace":case"Delete":e.preventDefault(),this._handleChipDelete(s,i);break;case"ArrowLeft":e.preventDefault(),this._navigateChip(i,s,-1,e.shiftKey);break;case"ArrowRight":e.preventDefault(),this._navigateChip(i,s,1,e.shiftKey);break;case"Home":e.preventDefault(),this._navigateToEdge(i,0,e.shiftKey);break;case"End":case"Escape":e.preventDefault(),this.clearSelection(),this._input?.focus();break;case"a":this._handleSelectAll(e,i)}}_handleChipDelete(e,t){if(0===this._selectedChips.size)return;const n=Math.min(e,t.length-this._selectedChips.size-1);this.removeSelected();const i=this._getChipElements();if(i.length>0){const e=Math.max(0,Math.min(n,i.length-1));i[e].focus(),this.selectChip(i[e])}else this._input?.focus()}_navigateChip(e,t,n,i){const s=t+n;if(n<0&&s>=0){const t=e[s];this.selectChip(t,i?{addToSelection:!0,rangeSelect:!0}:{}),t.focus()}else if(n>0&&s<e.length){const t=e[s];this.selectChip(t,i?{addToSelection:!0,rangeSelect:!0}:{}),t.focus()}else n>0&&(this.clearSelection(),this._input?.focus())}_navigateToEdge(e,t,n){if(0===e.length)return;const i=e[t];this.selectChip(i,n?{rangeSelect:!0}:{}),i.focus()}_handleSelectAll(e,t){if(e.metaKey||e.ctrlKey){e.preventDefault();for(const e of t)this._selectedChips.add(e),e.classList.add("active");EventHandler.trigger(this._element,EVENT_SELECT,{selected:this.getSelectedValues()})}}_handleInput(e){const{value:t}=e.target,{separator:n}=this._config;if(n&&t.includes(n)){const e=t.split(n);for(const t of e.slice(0,-1))this.add(t.trim());this._input.value=e.at(-1)}}_handlePaste(e){const{separator:t}=this._config;if(!t)return;const n=(e.clipboardData||window.clipboardData).getData("text");if(n.includes(t)){e.preventDefault();const i=n.split(t);for(const e of i)this.add(e.trim())}}_createChipFromInput(){const e=this._input.value.trim();e&&(this.add(e),this._input.value="")}}EventHandler.on(document,"DOMContentLoaded.bs.chips.data-api",()=>{for(const e of SelectorEngine.find("[data-bs-chips]"))Chips.getOrCreateInstance(e)});const ARIA_ATTRIBUTE_PATTERN=/^aria-[\w-]*$/i,DefaultAllowlist={"*":["class","dir","id","lang","role",ARIA_ATTRIBUTE_PATTERN],a:["target","href","title","rel"],area:[],b:[],br:[],col:[],code:[],dd:[],div:[],dl:[],dt:[],em:[],hr:[],h1:[],h2:[],h3:[],h4:[],h5:[],h6:[],i:[],img:["src","srcset","alt","title","width","height"],li:[],ol:[],p:[],pre:[],s:[],small:[],span:[],sub:[],sup:[],strong:[],u:[],ul:[]},uriAttributes=new Set(["background","cite","href","itemtype","longdesc","poster","src","xlink:href"]),SAFE_URL_PATTERN=/^(?!(?:javascript|data|vbscript):)(?:[a-z0-9+.-]+:|[^&:/?#]*(?:[/?#]|$))/i,DATA_URL_PATTERN=/^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[\d+/a-z=]+$/i,allowedAttribute=(e,t)=>{const n=e.nodeName.toLowerCase();return t.includes(n)?!uriAttributes.has(n)||Boolean(SAFE_URL_PATTERN.test(e.nodeValue)||DATA_URL_PATTERN.test(e.nodeValue)):t.filter(e=>e instanceof RegExp).some(e=>e.test(n))};function sanitizeHtml(e,t,n){if(!e.length)return e;if(n&&"function"==typeof n)return n(e);const i=(new window.DOMParser).parseFromString(e,"text/html"),s=[...i.body.querySelectorAll("*")];for(const e of s){const n=e.nodeName.toLowerCase();if(!Object.keys(t).includes(n)){e.remove();continue}const i=[...e.attributes],s=[...t["*"]||[],...t[n]||[]];for(const t of i)allowedAttribute(t,s)||e.removeAttribute(t.nodeName)}return i.body.innerHTML}const NAME$7="TemplateFactory",Default$6={allowList:DefaultAllowlist,content:{},extraClass:"",html:!1,sanitize:!0,sanitizeFn:null,template:"<div></div>"},DefaultType$6={allowList:"object",content:"object",extraClass:"(string|function)",html:"boolean",sanitize:"boolean",sanitizeFn:"(null|function)",template:"string"},DefaultContentType={entry:"(string|element|function|null)",selector:"(string|element)"};class TemplateFactory extends Config{constructor(e){super(),this._config=this._getConfig(e)}static get Default(){return Default$6}static get DefaultType(){return DefaultType$6}static get NAME(){return NAME$7}getContent(){return Object.values(this._config.content).map(e=>this._resolvePossibleFunction(e)).filter(Boolean)}hasContent(){return this.getContent().length>0}changeContent(e){return this._checkContent(e),this._config.content={...this._config.content,...e},this}toHtml(){const e=document.createElement("div");e.innerHTML=this._maybeSanitize(this._config.template);for(const[t,n]of Object.entries(this._config.content))this._setContent(e,n,t);const t=e.children[0],n=this._resolvePossibleFunction(this._config.extraClass);return n&&t.classList.add(...n.split(" ")),t}_typeCheckConfig(e){super._typeCheckConfig(e),this._checkContent(e.content)}_checkContent(e){for(const[t,n]of Object.entries(e))super._typeCheckConfig({selector:t,entry:n},DefaultContentType)}_setContent(e,t,n){const i=SelectorEngine.findOne(n,e);i&&((t=this._resolvePossibleFunction(t))?isElement$1(t)?this._putElementInTemplate(getElement(t),i):this._config.html?i.innerHTML=this._maybeSanitize(t):i.textContent=t:i.remove())}_maybeSanitize(e){return this._config.sanitize?sanitizeHtml(e,this._config.allowList,this._config.sanitizeFn):e}_resolvePossibleFunction(e){return execute(e,[void 0,this])}_putElementInTemplate(e,t){if(this._config.html)return t.innerHTML="",void t.append(e);t.textContent=e.textContent}}const NAME$6="tooltip",DISALLOWED_ATTRIBUTES=new Set(["sanitize","allowList","sanitizeFn"]),ESCAPE_KEY="Escape",CLASS_NAME_FADE$2="fade",CLASS_NAME_MODAL="modal",CLASS_NAME_SHOW$2="show",SELECTOR_TOOLTIP_INNER=".tooltip-inner",SELECTOR_MODAL=".modal",SELECTOR_DATA_TOGGLE$3='[data-bs-toggle="tooltip"]',EVENT_MODAL_HIDE="hide.bs.modal",TRIGGER_HOVER="hover",TRIGGER_FOCUS="focus",TRIGGER_CLICK="click",TRIGGER_MANUAL="manual",EVENT_HIDE$2="hide",EVENT_HIDDEN$2="hidden",EVENT_SHOW$2="show",EVENT_SHOWN$2="shown",EVENT_INSERTED="inserted",EVENT_CLICK$3="click",EVENT_FOCUSIN$2="focusin",EVENT_FOCUSOUT$1="focusout",EVENT_MOUSEENTER$1="mouseenter",EVENT_MOUSELEAVE="mouseleave",EVENT_KEYDOWN$1="keydown",AttachmentMap={AUTO:"auto",TOP:"top",RIGHT:isRTL$1()?"left":"right",BOTTOM:"bottom",LEFT:isRTL$1()?"right":"left"},Default$5={allowList:DefaultAllowlist,animation:!0,boundary:"clippingParents",container:!1,customClass:"",delay:0,fallbackPlacements:["top","right","bottom","left"],html:!1,offset:[0,6],placement:"top",floatingConfig:null,sanitize:!0,sanitizeFn:null,selector:!1,template:'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',title:"",trigger:"hover focus"},DefaultType$5={allowList:"object",animation:"boolean",boundary:"(string|element)",container:"(string|element|boolean)",customClass:"(string|function)",delay:"(number|object)",fallbackPlacements:"array",html:"boolean",offset:"(array|string|function)",placement:"(string|function)",floatingConfig:"(null|object|function)",sanitize:"boolean",sanitizeFn:"(null|function)",selector:"(string|boolean)",template:"string",title:"(string|element|function)",trigger:"string"};class Tooltip extends BaseComponent{constructor(e,t){super(e,t),this._isEnabled=!0,this._timeout=0,this._isHovered=null,this._activeTrigger={},this._floatingCleanup=null,this._keydownHandler=null,this._templateFactory=null,this._newContent=null,this._mediaQueryListeners=[],this._responsivePlacements=null,this.tip=null,this._parseResponsivePlacements(),this._setListeners(),this._config.selector||this._fixTitle()}static get Default(){return Default$5}static get DefaultType(){return DefaultType$5}static get NAME(){return NAME$6}enable(){this._isEnabled=!0}disable(){this._isEnabled=!1}toggleEnabled(){this._isEnabled=!this._isEnabled}toggle(){this._isEnabled&&(this._isShown()?this._leave():this._enter())}dispose(){clearTimeout(this._timeout),this._removeEscapeListener(),EventHandler.off(this._element.closest(".modal"),"hide.bs.modal",this._hideModalHandler),this._element.getAttribute("data-bs-original-title")&&this._element.setAttribute("title",this._element.getAttribute("data-bs-original-title")),this._disposeFloating(),this._disposeMediaQueryListeners(),super.dispose()}async show(){if("none"===this._element.style.display)throw new Error("Please use show on visible elements");if(!this._isWithContent()||!this._isEnabled)return;const e=EventHandler.trigger(this._element,this.constructor.eventName("show")),t=(findShadowRoot(this._element)||this._element.ownerDocument.documentElement).contains(this._element);if(e.defaultPrevented||!t)return void(this._isHovered=!1);this._disposeFloating();const n=this._getTipElement();this._element.setAttribute("aria-describedby",n.getAttribute("id"));let{container:i}=this._config;const s=this._element.closest("dialog[open]");if(s&&i===document.body&&(i=s),this._element.ownerDocument.documentElement.contains(this.tip)||(i.append(n),EventHandler.trigger(this._element,this.constructor.eventName("inserted"))),await this._createFloating(n),n.classList.add("show"),this._setEscapeListener(),"ontouchstart"in document.documentElement)for(const e of document.body.children)EventHandler.on(e,"mouseover",noop);this._queueCallback(()=>{EventHandler.trigger(this._element,this.constructor.eventName("shown")),!1===this._isHovered&&this._leave(),this._isHovered=!1},this.tip,this._isAnimated())}hide(){if(this._isShown()&&!EventHandler.trigger(this._element,this.constructor.eventName("hide")).defaultPrevented){if(this._removeEscapeListener(),this._getTipElement().classList.remove("show"),"ontouchstart"in document.documentElement)for(const e of document.body.children)EventHandler.off(e,"mouseover",noop);this._activeTrigger.click=!1,this._activeTrigger.focus=!1,this._activeTrigger.hover=!1,this._isHovered=null,this._queueCallback(()=>{this._isWithActiveTrigger()||(this._isHovered||this._disposeFloating(),this._element.removeAttribute("aria-describedby"),EventHandler.trigger(this._element,this.constructor.eventName("hidden")))},this.tip,this._isAnimated())}}update(){this._floatingCleanup&&this.tip&&this._updateFloatingPosition()}_isWithContent(){return Boolean(this._getTitle())||this._hasNewContent()}_hasNewContent(){return Boolean(this._newContent)&&Object.values(this._newContent).some(Boolean)}_getTipElement(){return this.tip||(this.tip=this._createTipElement(this._newContent||this._getContentForTemplate())),this.tip}_createTipElement(e){const t=this._getTemplateFactory(e).toHtml();t.classList.remove("fade","show"),t.classList.add(`bs-${this.constructor.NAME}-auto`);const n=getUID(this.constructor.NAME).toString();return t.setAttribute("id",n),this._isAnimated()&&t.classList.add("fade"),t}setContent(e){this._newContent=e,this._isShown()&&(this._disposeFloating(),this.show())}_getTemplateFactory(e){return this._templateFactory?this._templateFactory.changeContent(e):this._templateFactory=new TemplateFactory({...this._config,content:e,extraClass:this._resolvePossibleFunction(this._config.customClass)}),this._templateFactory}_getContentForTemplate(){return{[SELECTOR_TOOLTIP_INNER]:this._getTitle()}}_getTitle(){return this._resolvePossibleFunction(this._config.title)||this._element.getAttribute("data-bs-original-title")}_initializeOnDelegatedTarget(e){return this.constructor.getOrCreateInstance(e.delegateTarget,this._getDelegateConfig())}_isAnimated(){return this._config.animation||this.tip&&this.tip.classList.contains("fade")}_isShown(){return this.tip&&this.tip.classList.contains("show")}_getPlacement(e){if(this._responsivePlacements){const e=getResponsivePlacement(this._responsivePlacements,"top");return AttachmentMap[e.toUpperCase()]||e}const t=execute(this._config.placement,[this,e,this._element]);return AttachmentMap[t.toUpperCase()]||t}_parseResponsivePlacements(){"string"==typeof this._config.placement?(this._responsivePlacements=parseResponsivePlacement(this._config.placement,"top"),this._responsivePlacements&&this._setupMediaQueryListeners()):this._responsivePlacements=null}_setupMediaQueryListeners(){this._disposeMediaQueryListeners(),this._mediaQueryListeners=createBreakpointListeners(()=>{this._isShown()&&this._updateFloatingPosition()})}_disposeMediaQueryListeners(){disposeBreakpointListeners(this._mediaQueryListeners),this._mediaQueryListeners=[]}async _createFloating(e){const t=this._getPlacement(e),n=e.querySelector(`.${this.constructor.NAME}-arrow`);await this._updateFloatingPosition(e,t,n),this._floatingCleanup=autoUpdate(this._element,e,()=>this._updateFloatingPosition(e,null,n))}async _updateFloatingPosition(e=this.tip,t=null,n=null){if(!e)return;t||(t=this._getPlacement(e)),n||(n=e.querySelector(`.${this.constructor.NAME}-arrow`));const i=this._getFloatingMiddleware(n),s=this._getFloatingConfig(t,i),{x:o,y:a,placement:l,middlewareData:r}=await computePosition(this._element,e,s);if(Object.assign(e.style,{position:"absolute",left:`${o}px`,top:`${a}px`}),n&&(n.style.position="absolute"),Manipulator.setDataAttribute(e,"placement",l),n&&r.arrow){const{x:e,y:t}=r.arrow,i=l.startsWith("top")||l.startsWith("bottom");Object.assign(n.style,{left:i&&null!==e?`${e}px`:"",top:i||null===t?"":`${t}px`,right:"",bottom:""})}}_getOffset(){const{offset:e}=this._config;return"string"==typeof e?e.split(",").map(e=>Number.parseInt(e,10)):"function"==typeof e?({placement:t,rects:n})=>e({placement:t,reference:n.reference,floating:n.floating},this._element):e}_resolvePossibleFunction(e){return execute(e,[this._element,this._element])}_getFloatingMiddleware(e){const t=this._getOffset(),n=[offset("function"==typeof t?t:{mainAxis:t[1]||0,crossAxis:t[0]||0}),flip({fallbackPlacements:this._config.fallbackPlacements}),shift({boundary:"clippingParents"===this._config.boundary?"clippingAncestors":this._config.boundary})];return e&&n.push(arrow({element:e})),n}_getFloatingConfig(e,t){const n={placement:e,middleware:t};return{...n,...execute(this._config.floatingConfig,[void 0,n])}}_setListeners(){const e=this._config.trigger.split(" ");for(const t of e)if("click"===t)EventHandler.on(this._element,this.constructor.eventName("click"),this._config.selector,e=>{const t=this._initializeOnDelegatedTarget(e);t._activeTrigger.click=!(t._isShown()&&t._activeTrigger.click),t.toggle()});else if("manual"!==t){const e="hover"===t?this.constructor.eventName("mouseenter"):this.constructor.eventName("focusin"),n="hover"===t?this.constructor.eventName("mouseleave"):this.constructor.eventName("focusout");EventHandler.on(this._element,e,this._config.selector,e=>{const t=this._initializeOnDelegatedTarget(e);t._activeTrigger["focusin"===e.type?"focus":"hover"]=!0,t._enter()}),EventHandler.on(this._element,n,this._config.selector,e=>{const t=this._initializeOnDelegatedTarget(e);t._activeTrigger["focusout"===e.type?"focus":"hover"]=t._element.contains(e.relatedTarget),t._leave()})}this._hideModalHandler=()=>{this._element&&this.hide()},EventHandler.on(this._element.closest(".modal"),"hide.bs.modal",this._hideModalHandler)}_setEscapeListener(){this._keydownHandler||(this._keydownHandler=e=>{"Escape"===e.key&&this._isShown()&&this.tip.isConnected&&(e.preventDefault(),e.stopPropagation(),this.hide())},this._element.ownerDocument.addEventListener("keydown",this._keydownHandler,!0))}_removeEscapeListener(){this._keydownHandler&&(this._element.ownerDocument.removeEventListener("keydown",this._keydownHandler,!0),this._keydownHandler=null)}_fixTitle(){const e=this._element.getAttribute("title");e&&(this._element.getAttribute("aria-label")||this._element.textContent.trim()||this._element.setAttribute("aria-label",e),this._element.setAttribute("data-bs-original-title",e),this._element.removeAttribute("title"))}_enter(){this._isShown()||this._isHovered?this._isHovered=!0:(this._isHovered=!0,this._setTimeout(()=>{this._isHovered&&this.show()},this._config.delay.show))}_leave(){this._isWithActiveTrigger()||(this._isHovered=!1,this._setTimeout(()=>{this._isHovered||this.hide()},this._config.delay.hide))}_setTimeout(e,t){clearTimeout(this._timeout),this._timeout=setTimeout(e,t)}_isWithActiveTrigger(){return Object.values(this._activeTrigger).includes(!0)}_getConfig(e){const t=Manipulator.getDataAttributes(this._element);for(const e of Object.keys(t))DISALLOWED_ATTRIBUTES.has(e)&&delete t[e];return e={...t,..."object"==typeof e&&e?e:{}},e=this._mergeConfigObj(e),e=this._configAfterMerge(e),this._typeCheckConfig(e),e}_configAfterMerge(e){return e.container=!1===e.container?document.body:getElement(e.container),"number"==typeof e.delay&&(e.delay={show:e.delay,hide:e.delay}),"number"!=typeof e.title&&"boolean"!=typeof e.title||(e.title=e.title.toString()),"number"!=typeof e.content&&"boolean"!=typeof e.content||(e.content=e.content.toString()),e}_getDelegateConfig(){const e={};for(const[t,n]of Object.entries(this._config))this.constructor.Default[t]!==n&&(e[t]=n);return e.selector=!1,e.trigger="manual",e}_disposeFloating(){this._floatingCleanup&&(this._floatingCleanup(),this._floatingCleanup=null),this.tip&&(this.tip.remove(),this.tip=null)}}const initTooltip=e=>{const t=e.target.closest(SELECTOR_DATA_TOGGLE$3);t&&Tooltip.getOrCreateInstance(t)};EventHandler.on(document,"focusin",SELECTOR_DATA_TOGGLE$3,initTooltip),EventHandler.on(document,"mouseenter",SELECTOR_DATA_TOGGLE$3,initTooltip);const NAME$5="popover",SELECTOR_TITLE=".popover-header",SELECTOR_CONTENT=".popover-body",SELECTOR_DATA_TOGGLE$2='[data-bs-toggle="popover"]',EVENT_CLICK$2="click",EVENT_FOCUSIN$1="focusin",EVENT_MOUSEENTER="mouseenter",Default$4={...Tooltip.Default,content:"",offset:[0,8],placement:"right",template:'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',trigger:"click"},DefaultType$4={...Tooltip.DefaultType,content:"(null|string|element|function)"};class Popover extends Tooltip{static get Default(){return Default$4}static get DefaultType(){return DefaultType$4}static get NAME(){return NAME$5}_isWithContent(){return Boolean(this._getTitle()||this._getContent())||this._hasNewContent()}_getContentForTemplate(){return{[SELECTOR_TITLE]:this._getTitle(),[SELECTOR_CONTENT]:this._getContent()}}_getContent(){return this._resolvePossibleFunction(this._config.content)}}const initPopover=e=>{const t=e.target.closest(SELECTOR_DATA_TOGGLE$2);t&&("click"===e.type&&e.preventDefault(),Popover.getOrCreateInstance(t))};EventHandler.on(document,"click",SELECTOR_DATA_TOGGLE$2,initPopover),EventHandler.on(document,"focusin",SELECTOR_DATA_TOGGLE$2,initPopover),EventHandler.on(document,"mouseenter",SELECTOR_DATA_TOGGLE$2,initPopover);const NAME$4="range",DATA_KEY$4="bs.range",EVENT_KEY$4=".bs.range",DATA_API_KEY$1=".data-api",EVENT_CHANGED="changed.bs.range",EVENT_DOM_CONTENT_LOADED="DOMContentLoaded.bs.range.data-api",EVENT_INPUT="input",EVENT_CHANGE="change",SELECTOR_RANGE=".form-range",SELECTOR_INPUT=".form-range-input",CLASS_NAME_BUBBLE="form-range-bubble",CLASS_NAME_TICKS="form-range-ticks",CLASS_NAME_TICK="form-range-tick",CLASS_NAME_TICK_LABEL="form-range-tick-label",PROPERTY_FILL="--bs-range-fill",Default$3={bubble:!1,formatter:null},DefaultType$3={bubble:"(boolean|null)",formatter:"(function|null)"};class Range extends BaseComponent{constructor(e,t){super(e,t),this._element&&(this._input=SelectorEngine.findOne(SELECTOR_INPUT,this._element),this._input&&(this._bubble=null,this._bubbleText=null,this._ticks=null,this._updateHandler=()=>this._update(),this._config.bubble&&this._createBubble(),this._createTicks(),this._addEventListeners(),this._update()))}static get Default(){return Default$3}static get DefaultType(){return DefaultType$3}static get NAME(){return NAME$4}update(){this._update()}dispose(){EventHandler.off(this._input,"input",this._updateHandler),EventHandler.off(this._input,"change",this._updateHandler),this._bubble?.remove(),this._ticks?.remove(),super.dispose()}_configAfterMerge(e){return null===e.bubble&&(e.bubble=!0),e}_addEventListeners(){EventHandler.on(this._input,"input",this._updateHandler),EventHandler.on(this._input,"change",this._updateHandler)}_min(){return""===this._input.min?0:Number.parseFloat(this._input.min)}_max(){return""===this._input.max?100:Number.parseFloat(this._input.max)}_value(){return Number.parseFloat(this._input.value)}_ratio(){const e=this._max()-this._min();return e>0?(this._value()-this._min())/e:0}_update(){this._element.style.setProperty(PROPERTY_FILL,`${this._ratio()}`),this._bubbleText&&(this._bubbleText.textContent=this._format(this._value())),EventHandler.trigger(this._input,EVENT_CHANGED,{value:this._value()})}_format(e){return"function"==typeof this._config.formatter?this._config.formatter(e):String(e)}_createBubble(){this._bubble=document.createElement("output"),this._bubble.className=`${CLASS_NAME_BUBBLE} tooltip bs-tooltip-top show`,this._bubble.setAttribute("aria-hidden","true");const e=document.createElement("div");e.className="tooltip-arrow",this._bubbleText=document.createElement("div"),this._bubbleText.className="tooltip-inner",this._bubble.append(e,this._bubbleText),this._input.insertAdjacentElement("afterend",this._bubble)}_createTicks(){const e=this._input.getAttribute("list"),t=e?document.getElementById(e):null;if(!t)return;const n=this._min(),i=this._max()-n||1,s=[];for(const e of SelectorEngine.find("option",t)){const t=Number.parseFloat(e.value);if(!Number.isNaN(t)){const o=Math.min(Math.max((t-n)/i,0),1);s.push({ratio:o,label:e.label})}}if(0===s.length)return;s.sort((e,t)=>e.ratio-t.ratio),this._ticks=document.createElement("div"),this._ticks.className=CLASS_NAME_TICKS,this._ticks.setAttribute("aria-hidden","true");const o=[0,...s.map(e=>e.ratio),1];this._ticks.style.gridTemplateColumns=o.slice(1).map((e,t)=>e-o[t]+"fr").join(" ");for(const[e,t]of s.entries()){const n=document.createElement("span");if(n.className=CLASS_NAME_TICK,n.style.gridColumnStart=`${e+2}`,t.label){const e=document.createElement("span");e.className=CLASS_NAME_TICK_LABEL,e.textContent=t.label,n.append(e)}this._ticks.append(n)}this._element.append(this._ticks)}}EventHandler.on(document,EVENT_DOM_CONTENT_LOADED,()=>{for(const e of SelectorEngine.find(".form-range"))Range.getOrCreateInstance(e)});const NAME$3="scrollspy",DATA_KEY$3="bs.scrollspy",EVENT_KEY$3=`.${DATA_KEY$3}`,DATA_API_KEY=".data-api",EVENT_ACTIVATE=`activate${EVENT_KEY$3}`,EVENT_CLICK$1=`click${EVENT_KEY$3}`,EVENT_SCROLL=`scroll${EVENT_KEY$3}`,EVENT_SCROLLEND=`scrollend${EVENT_KEY$3}`,EVENT_RESIZE=`resize${EVENT_KEY$3}`,EVENT_LOAD_DATA_API$1=`load${EVENT_KEY$3}.data-api`,CLASS_NAME_MENU_ITEM="menu-item",CLASS_NAME_ACTIVE$1="active",SELECTOR_DATA_SPY='[data-bs-spy="scroll"]',SELECTOR_TARGET_LINKS="[href]",SELECTOR_NAV_LIST_GROUP=".nav, .list-group",SELECTOR_NAV_LINKS=".nav-link",SELECTOR_NAV_ITEMS=".nav-item",SELECTOR_LIST_ITEMS=".list-group-item",SELECTOR_LINK_ITEMS=".nav-link, .nav-item > .nav-link, .list-group-item",SELECTOR_MENU_TOGGLE$1='[data-bs-toggle="menu"]',SCROLL_IDLE_TIMEOUT=100,RESIZE_DEBOUNCE=100,Default$2={rootMargin:null,smoothScroll:!1,target:null,threshold:[0],topMargin:"12%"},DefaultType$2={rootMargin:"(string|null)",smoothScroll:"boolean",target:"element",threshold:"array",topMargin:"string"};class ScrollSpy extends BaseComponent{constructor(e,t){super(e,t),this._sections=[],this._linkBySection=new Map,this._sectionByLink=new Map,this._intersecting=new Set,this._activeTarget=null,this._lastActive=null,this._atBottom=!1,this._rootElement="visible"===getComputedStyle(this._element).overflowY?null:this._element,this._observer=null,this._sentinel=null,this._sentinelObserver=null,this._pendingNavigation=null,this._settleTimeout=null,this._settleHandler=null,this._scrollIdleHandler=null,this._resizeHandler=null,this._resizeTimeout=null,this.refresh()}static get Default(){return Default$2}static get DefaultType(){return DefaultType$2}static get NAME(){return NAME$3}refresh(){this._initializeTargetsAndObservables(),this._maybeEnableSmoothScroll(),this._observer?.disconnect(),this._intersecting.clear(),this._observer=this._getNewObserver();for(const e of this._sections)this._observer.observe(e);this._setUpSentinel(),this._maybeAddResizeListener()}dispose(){this._observer?.disconnect(),this._teardownSentinel(),this._disarmSettle(),this._removeResizeListener(),EventHandler.off(this._config.target,EVENT_CLICK$1),super.dispose()}_configAfterMerge(e){return e.target=getElement(e.target)||document.body,"string"==typeof e.threshold&&(e.threshold=e.threshold.split(",").map(e=>Number.parseFloat(e))),e}_getNewObserver(){const e={root:this._rootElement,threshold:this._config.threshold,rootMargin:this._config.rootMargin??this._getDerivedRootMargin()};return new IntersectionObserver(e=>this._onIntersect(e),e)}_onIntersect(e){for(const t of e)t.isIntersecting?this._intersecting.add(t.target):this._intersecting.delete(t.target);this._computeActive()}_computeActive(){if(!this._element?.isConnected||0===this._sections.length)return;let e=null;if(this._atBottom)e=this._sections.at(-1);else{for(const t of this._sections)this._intersecting.has(t)&&(e=t);e||=this._lastActive??this._sections.at(0)}if(!e)return;this._lastActive=e;const t=this._linkBySection.get(e);t&&this._process(t)}_parseTopMargin(){const e=String(this._config.topMargin);return{value:Number.parseFloat(e)||0,unit:e.endsWith("%")?"%":"px"}}_getDerivedRootMargin(){const{value:e,unit:t}=this._parseTopMargin();let n=e;if("px"===t){const t=this._rootElement?this._rootElement.clientHeight:document.documentElement.clientHeight||window.innerHeight;n=t?e/t*100:12}return`0px 0px -${Math.min(Math.max(100-n,0),100)}% 0px`}_usesPixelMargin(){return!this._config.rootMargin&&"px"===this._parseTopMargin().unit}_setUpSentinel(){if(this._teardownSentinel(),0===this._sections.length)return;const e=document.createElement("div");e.setAttribute("aria-hidden","true"),e.style.cssText="position:relative;width:0;height:0;margin:0;padding:0;border:0;visibility:hidden;",this._element.append(e),this._sentinel=e,this._sentinelObserver=new IntersectionObserver(e=>this._onSentinel(e),{root:this._rootElement,threshold:[0]}),this._sentinelObserver.observe(e)}_onSentinel(e){const t=e.at(-1);this._atBottom=Boolean(t?.isIntersecting)&&this._isOverflowing(),this._computeActive()}_isOverflowing(){const e=this._rootElement||document.scrollingElement||document.documentElement;return e.scrollHeight>e.clientHeight}_teardownSentinel(){this._sentinelObserver?.disconnect(),this._sentinelObserver=null,this._sentinel?.remove(),this._sentinel=null,this._atBottom=!1}_maybeAddResizeListener(){this._removeResizeListener(),this._usesPixelMargin()&&(this._resizeHandler=()=>{clearTimeout(this._resizeTimeout),this._resizeTimeout=setTimeout(()=>this._rebuildObserver(),100)},EventHandler.on(window,EVENT_RESIZE,this._resizeHandler))}_removeResizeListener(){clearTimeout(this._resizeTimeout),this._resizeTimeout=null,this._resizeHandler&&(EventHandler.off(window,EVENT_RESIZE,this._resizeHandler),this._resizeHandler=null)}_rebuildObserver(){if(this._observer){this._observer.disconnect(),this._intersecting.clear(),this._observer=this._getNewObserver();for(const e of this._sections)this._observer.observe(e)}}_maybeEnableSmoothScroll(){this._config.smoothScroll&&(EventHandler.off(this._config.target,EVENT_CLICK$1),EventHandler.on(this._config.target,EVENT_CLICK$1,"[href]",e=>{const t=e.target.closest("[href]"),n=t&&this._sectionByLink.get(t);if(!n||!this._element)return;e.preventDefault();const i=this._rootElement||window,s=n.offsetTop-this._element.offsetTop,o=this._rootElement?this._rootElement.scrollTop:window.scrollY??window.pageYOffset;if(matchMedia("(prefers-reduced-motion: reduce)").matches||Math.abs(o-s)<=2)return i.scrollTo?i.scrollTo({top:s,behavior:"auto"}):i.scrollTop=s,void this._settleNavigation(t.hash,n);this._pendingNavigation={hash:t.hash,section:n},this._armSettle(),i.scrollTo?i.scrollTo({top:s,behavior:"smooth"}):i.scrollTop=s}))}_armSettle(){this._disarmSettle();const e=this._getSettleTarget();this._settleHandler=()=>this._onSettle(),this._scrollIdleHandler=()=>{clearTimeout(this._settleTimeout),this._settleTimeout=setTimeout(()=>this._onSettle(),100)},EventHandler.on(e,EVENT_SCROLLEND,this._settleHandler),EventHandler.on(e,EVENT_SCROLL,this._scrollIdleHandler)}_disarmSettle(){clearTimeout(this._settleTimeout),this._settleTimeout=null;const e=this._getSettleTarget();this._settleHandler&&(EventHandler.off(e,EVENT_SCROLLEND,this._settleHandler),this._settleHandler=null),this._scrollIdleHandler&&(EventHandler.off(e,EVENT_SCROLL,this._scrollIdleHandler),this._scrollIdleHandler=null)}_getSettleTarget(){return this._rootElement||document}_onSettle(){if(this._disarmSettle(),!this._pendingNavigation)return;const{hash:e,section:t}=this._pendingNavigation;this._settleNavigation(e,t)}_settleNavigation(e,t){this._pendingNavigation=null,window.history?.replaceState&&window.history.replaceState(null,"",e),t.hasAttribute("tabindex")||t.setAttribute("tabindex","-1"),t.focus({preventScroll:!0})}_initializeTargetsAndObservables(){this._sections=[],this._linkBySection=new Map,this._sectionByLink=new Map;const e=SelectorEngine.find("[href]",this._config.target),t=new Set;for(const n of e){if(!n.hash||isDisabled(n))continue;const e=decodeFragment(n.hash.slice(1));if(!e)continue;const i=document.getElementById(e);i&&this._element.contains(i)&&isVisible(i)&&(this._sectionByLink.set(n,i),this._linkBySection.set(i,n),t.has(i)||(t.add(i),this._sections.push(i)))}this._sections.sort((e,t)=>e.getBoundingClientRect().top-t.getBoundingClientRect().top)}_process(e){this._activeTarget!==e&&(this._clearActiveClass(this._config.target),this._activeTarget=e,e.classList.add("active"),this._activateParents(e),EventHandler.trigger(this._element,EVENT_ACTIVATE,{relatedTarget:e}))}_activateParents(e){if(e.classList.contains("menu-item")){const t=e.closest(".menu")?.previousElementSibling;return void(t?.matches(SELECTOR_MENU_TOGGLE$1)&&t.classList.add("active"))}for(const t of SelectorEngine.parents(e,".nav, .list-group"))for(const e of SelectorEngine.prev(t,SELECTOR_LINK_ITEMS))e.classList.add("active")}_clearActiveClass(e){e.classList.remove("active");const t=SelectorEngine.find("[href].active",e);for(const e of t)e.classList.remove("active")}}function decodeFragment(e){try{return decodeURIComponent(e)}catch{return e}}EventHandler.on(window,EVENT_LOAD_DATA_API$1,()=>{for(const e of SelectorEngine.find(SELECTOR_DATA_SPY))ScrollSpy.getOrCreateInstance(e)});const NAME$2="tab",DATA_KEY$2="bs.tab",EVENT_KEY$2=".bs.tab",EVENT_HIDE$1="hide.bs.tab",EVENT_HIDDEN$1="hidden.bs.tab",EVENT_SHOW$1="show.bs.tab",EVENT_SHOWN$1="shown.bs.tab",EVENT_CLICK_DATA_API="click.bs.tab",EVENT_KEYDOWN="keydown.bs.tab",EVENT_LOAD_DATA_API="load.bs.tab",ARROW_LEFT_KEY="ArrowLeft",ARROW_RIGHT_KEY="ArrowRight",ARROW_UP_KEY="ArrowUp",ARROW_DOWN_KEY="ArrowDown",HOME_KEY="Home",END_KEY="End",CLASS_NAME_ACTIVE="active",CLASS_NAME_FADE$1="fade",CLASS_NAME_SHOW$1="show",SELECTOR_MENU_TOGGLE='[data-bs-toggle="menu"]',SELECTOR_MENU=".menu",NOT_SELECTOR_MENU_TOGGLE=`:not(${SELECTOR_MENU_TOGGLE})`,SELECTOR_TAB_PANEL='.list-group, .nav, [role="tablist"]',SELECTOR_OUTER=".nav-item, .list-group-item",SELECTOR_INNER=`.nav-link${NOT_SELECTOR_MENU_TOGGLE}, .list-group-item${NOT_SELECTOR_MENU_TOGGLE}, [role="tab"]${NOT_SELECTOR_MENU_TOGGLE}`,SELECTOR_DATA_TOGGLE$1='[data-bs-toggle="tab"]',SELECTOR_INNER_ELEM=`${SELECTOR_INNER}, ${SELECTOR_DATA_TOGGLE$1}`,SELECTOR_DATA_TOGGLE_ACTIVE='.active[data-bs-toggle="tab"]';class Tab extends BaseComponent{constructor(e){super(e),this._parent=this._element.closest(SELECTOR_TAB_PANEL),this._parent&&(this._setInitialAttributes(this._parent,this._getChildren()),EventHandler.on(this._element,EVENT_KEYDOWN,e=>this._keydown(e)))}static get NAME(){return"tab"}show(){const e=this._element;if(this._elemIsActive(e))return;const t=this._getActiveElem(),n=t?EventHandler.trigger(t,EVENT_HIDE$1,{relatedTarget:e}):null;EventHandler.trigger(e,EVENT_SHOW$1,{relatedTarget:t}).defaultPrevented||n&&n.defaultPrevented||(this._deactivate(t,e),this._activate(e,t))}_activate(e,t){e&&(e.classList.add("active"),this._activate(SelectorEngine.getElementFromSelector(e)),this._queueCallback(()=>{"tab"===e.getAttribute("role")?(e.removeAttribute("tabindex"),e.setAttribute("aria-selected",!0),this._toggleMenu(e,!0),EventHandler.trigger(e,EVENT_SHOWN$1,{relatedTarget:t})):e.classList.add("show")},e,e.classList.contains("fade")))}_deactivate(e,t){e&&(e.classList.remove("active"),e.blur(),this._deactivate(SelectorEngine.getElementFromSelector(e)),this._queueCallback(()=>{"tab"===e.getAttribute("role")?(e.setAttribute("aria-selected",!1),e.setAttribute("tabindex","-1"),this._toggleMenu(e,!1),EventHandler.trigger(e,EVENT_HIDDEN$1,{relatedTarget:t})):e.classList.remove("show")},e,e.classList.contains("fade")))}_keydown(e){if(![ARROW_LEFT_KEY,ARROW_RIGHT_KEY,ARROW_UP_KEY,ARROW_DOWN_KEY,HOME_KEY,END_KEY].includes(e.key))return;if(e.altKey||e.ctrlKey||e.metaKey)return;e.stopPropagation(),e.preventDefault();const t=this._getChildren().filter(e=>!isDisabled(e));let n;if([HOME_KEY,END_KEY].includes(e.key))n=e.key===HOME_KEY?t[0]:t.at(-1);else{const i=[ARROW_RIGHT_KEY,ARROW_DOWN_KEY].includes(e.key);n=getNextActiveElement(t,e.target,i,!0)}n&&(n.focus({preventScroll:!0}),Tab.getOrCreateInstance(n).show())}_getChildren(){return SelectorEngine.find(SELECTOR_INNER_ELEM,this._parent)}_getActiveElem(){return this._getChildren().find(e=>this._elemIsActive(e))||null}_setInitialAttributes(e,t){this._setAttributeIfNotExists(e,"role","tablist");for(const e of t)this._setInitialAttributesOnChild(e)}_setInitialAttributesOnChild(e){e=this._getInnerElement(e);const t=this._elemIsActive(e),n=this._getOuterElement(e);e.setAttribute("aria-selected",t),n!==e&&this._setAttributeIfNotExists(n,"role","presentation"),t||e.setAttribute("tabindex","-1"),this._setAttributeIfNotExists(e,"role","tab"),this._setInitialAttributesOnTargetPanel(e)}_setInitialAttributesOnTargetPanel(e){const t=SelectorEngine.getElementFromSelector(e);t&&(this._setAttributeIfNotExists(t,"role","tabpanel"),e.id&&this._setAttributeIfNotExists(t,"aria-labelledby",`${e.id}`))}_toggleMenu(e,t){const n=this._getOuterElement(e),i=SelectorEngine.findOne(SELECTOR_MENU_TOGGLE,n);if(!i)return;const s=SelectorEngine.findOne(".menu",n);i.classList.toggle("active",t),s&&s.classList.toggle("show",t),i.setAttribute("aria-expanded",t)}_setAttributeIfNotExists(e,t,n){e.hasAttribute(t)||e.setAttribute(t,n)}_elemIsActive(e){return e.classList.contains("active")}_getInnerElement(e){return e.matches(SELECTOR_INNER_ELEM)?e:SelectorEngine.findOne(SELECTOR_INNER_ELEM,e)}_getOuterElement(e){return e.closest(SELECTOR_OUTER)||e}}EventHandler.on(document,"click.bs.tab",SELECTOR_DATA_TOGGLE$1,function(e){["A","AREA"].includes(this.tagName)&&e.preventDefault(),isDisabled(this)||Tab.getOrCreateInstance(this).show()}),EventHandler.on(window,"load.bs.tab",()=>{for(const e of SelectorEngine.find(SELECTOR_DATA_TOGGLE_ACTIVE))Tab.getOrCreateInstance(e)});const NAME$1="toast",DATA_KEY$1="bs.toast",EVENT_KEY$1=".bs.toast",EVENT_MOUSEOVER="mouseover.bs.toast",EVENT_MOUSEOUT="mouseout.bs.toast",EVENT_FOCUSIN="focusin.bs.toast",EVENT_FOCUSOUT="focusout.bs.toast",EVENT_HIDE="hide.bs.toast",EVENT_HIDDEN="hidden.bs.toast",EVENT_SHOW="show.bs.toast",EVENT_SHOWN="shown.bs.toast",CLASS_NAME_FADE="fade",CLASS_NAME_HIDE="hide",CLASS_NAME_SHOW="show",CLASS_NAME_SHOWING="showing",DefaultType$1={animation:"boolean",autohide:"boolean",delay:"number"},Default$1={animation:!0,autohide:!0,delay:5e3};class Toast extends BaseComponent{constructor(e,t){super(e,t),this._timeout=null,this._hasMouseInteraction=!1,this._hasKeyboardInteraction=!1,this._setListeners()}static get Default(){return Default$1}static get DefaultType(){return DefaultType$1}static get NAME(){return NAME$1}show(){EventHandler.trigger(this._element,EVENT_SHOW).defaultPrevented||(this._clearTimeout(),this._config.animation&&this._element.classList.add("fade"),this._element.classList.remove("hide"),reflow(this._element),this._element.classList.add("show","showing"),this._queueCallback(()=>{this._element.classList.remove("showing"),EventHandler.trigger(this._element,EVENT_SHOWN),this._maybeScheduleHide()},this._element,this._config.animation))}hide(){this.isShown()&&(EventHandler.trigger(this._element,EVENT_HIDE).defaultPrevented||(this._element.classList.add("showing"),this._queueCallback(()=>{this._element.classList.add("hide"),this._element.classList.remove("showing","show"),EventHandler.trigger(this._element,EVENT_HIDDEN)},this._element,this._config.animation)))}dispose(){this._clearTimeout(),this.isShown()&&this._element.classList.remove("show"),super.dispose()}isShown(){return this._element.classList.contains("show")}_maybeScheduleHide(){this._config.autohide&&(this._hasMouseInteraction||this._hasKeyboardInteraction||(this._timeout=setTimeout(()=>{this.hide()},this._config.delay)))}_onInteraction(e,t){switch(e.type){case"mouseover":case"mouseout":this._hasMouseInteraction=t;break;case"focusin":case"focusout":this._hasKeyboardInteraction=t}if(t)return void this._clearTimeout();const n=e.relatedTarget;this._element===n||this._element.contains(n)||this._maybeScheduleHide()}_setListeners(){EventHandler.on(this._element,EVENT_MOUSEOVER,e=>this._onInteraction(e,!0)),EventHandler.on(this._element,EVENT_MOUSEOUT,e=>this._onInteraction(e,!1)),EventHandler.on(this._element,EVENT_FOCUSIN,e=>this._onInteraction(e,!0)),EventHandler.on(this._element,EVENT_FOCUSOUT,e=>this._onInteraction(e,!1))}_clearTimeout(){clearTimeout(this._timeout),this._timeout=null}}enableDismissTrigger(Toast);const NAME="toggler",DATA_KEY="bs.toggler",EVENT_KEY=`.${DATA_KEY}`,EVENT_TOGGLE=`toggle${EVENT_KEY}`,EVENT_TOGGLED=`toggled${EVENT_KEY}`,EVENT_CLICK="click",SELECTOR_DATA_TOGGLE='[data-bs-toggle="toggler"]',DefaultType={attribute:"string",value:"(string|number|boolean)"},Default={attribute:"class",value:null};class Toggler extends BaseComponent{static get Default(){return Default}static get DefaultType(){return DefaultType}static get NAME(){return NAME}toggle(){EventHandler.trigger(this._element,EVENT_TOGGLE).defaultPrevented||(this._execute(),EventHandler.trigger(this._element,EVENT_TOGGLED))}_execute(){const{attribute:e,value:t}=this._config;"id"!==e&&("class"!==e?this._element.getAttribute(e)!==String(t)?this._element.setAttribute(e,t):this._element.removeAttribute(e):this._element.classList.toggle(t))}}eventActionOnPlugin(Toggler,"click",SELECTOR_DATA_TOGGLE,"toggle");export{Alert,Button,Carousel,Chips,Collapse,Combobox,Datepicker,Dialog,Drawer,Menu,NavOverflow,OtpInput,Popover,Range,ScrollSpy,Strength,Tab,Toast,Toggler,Tooltip};
-//# sourceMappingURL=bootstrap.bundle.min.js.map
-//]]>
-  </script>
+  <script type="module" src="https://corsproxy.io/?https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/assets/bootstrap.bundle.iT8eRQvy.js"/>
 </div>

From c9ec97af2aea11f5864c37d5559be7a78add7670 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 1 Aug 2026 13:59:49 +0200
Subject: [PATCH 21/87] Fix formatting

---
 includes/bootstrap.hdf.xml | 5 ++++-
 sample/icons.dita          | 8 ++------
 sample/typography.dita     | 4 +---
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/includes/bootstrap.hdf.xml b/includes/bootstrap.hdf.xml
index 5d77697d..f6922e2b 100644
--- a/includes/bootstrap.hdf.xml
+++ b/includes/bootstrap.hdf.xml
@@ -12,5 +12,8 @@
     href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/dist/css/bootstrap.min.css"
     rel="stylesheet"
   />
-  <script type="module" src="https://corsproxy.io/?https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/assets/bootstrap.bundle.iT8eRQvy.js"/>
+  <script
+    type="module"
+    src="https://corsproxy.io/?https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/assets/bootstrap.bundle.iT8eRQvy.js"
+  />
 </div>
diff --git a/sample/icons.dita b/sample/icons.dita
index d8b7754c..75553363 100644
--- a/sample/icons.dita
+++ b/sample/icons.dita
@@ -156,12 +156,8 @@
       </bodydiv>
     <p>Icons can also be placed within buttons as shown:</p>
     <bodydiv outputclass="p-3 border">
-      <xref outputclass="btn-icon theme-primary" href="#"><ph
-          outputclass="bi bi-arrow-down-square-fill"
-        /></xref>
-      <xref outputclass="btn-icon theme-secondary" href="#"><ph
-          outputclass="bi bi-chat-left-quote-fill"
-        /></xref>
+      <xref outputclass="btn-icon theme-primary" href="#"><ph outputclass="bi bi-arrow-down-square-fill"/></xref>
+      <xref outputclass="btn-icon theme-secondary" href="#"><ph outputclass="bi bi-chat-left-quote-fill"/></xref>
       <xref outputclass="btn-icon theme-warning" href="#"><ph outputclass="bi bi-speedometer"/></xref>
       <xref outputclass="btn-icon theme-info" href="#"><ph outputclass="bi bi-camera-fill"/></xref>
       <xref outputclass="btn-icon theme-accent" href="#"><ph outputclass="bi bi-link"/></xref>
diff --git a/sample/typography.dita b/sample/typography.dita
index 711ea719..5b3390b1 100644
--- a/sample/typography.dita
+++ b/sample/typography.dita
@@ -49,9 +49,7 @@
         heading text from Bootstrap 3.</p>
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <p outputclass="h3">Fancy display heading <ph
-          outputclass="fs-md fg-secondary"
-        >with faded secondary text</ph></p>
+      <p outputclass="h3">Fancy display heading <ph outputclass="fs-md fg-secondary">with faded secondary text</ph></p>
     </bodydiv>
     <codeblock
     >&lt;title&gt;Fancy display heading &lt;ph outputclass="fs-md fg-secondary"&gt;with faded secondary text&lt;/ph&gt;&lt;/title&gt;</codeblock>

From 5068b96ef4c6764c94fa439daa8af0ddca6ff18a Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 1 Aug 2026 14:06:46 +0200
Subject: [PATCH 22/87] Revert change

---
 .github/dita-ot/theme.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/dita-ot/theme.css b/.github/dita-ot/theme.css
index fedc6130..b373f998 100644
--- a/.github/dita-ot/theme.css
+++ b/.github/dita-ot/theme.css
@@ -50,7 +50,7 @@
   height: calc(100vh - 6rem);
 }
 
-bg-body fg-body @media (max-width: 991.98px) {
+@media (max-width: 991.98px) {
   .css-themes-list {
     height: calc(100vh - 25rem);
   }

From 673a773d5b603d9eec3ffe2433f67bb93539b59c Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 1 Aug 2026 14:28:44 +0200
Subject: [PATCH 23/87] Remove ids

---
 sample/accordion.dita    |  8 ++++----
 sample/alerts.dita       | 12 ++++++------
 sample/badge.dita        |  4 ++--
 sample/borders.dita      | 16 ++++++++--------
 sample/button-group.dita | 16 ++++++++--------
 sample/buttons.dita      | 12 ++++++------
 sample/card.dita         | 12 ++++++------
 sample/carousel.dita     | 32 ++++++++++++++++----------------
 sample/collapse.dita     |  4 ++--
 sample/color.dita        |  8 ++++----
 sample/drawer.dita       | 12 ++++++------
 sample/grid.dita         |  4 ++--
 sample/icons.dita        |  8 ++++----
 sample/images.dita       | 12 ++++++------
 sample/list-group.dita   | 12 ++++++------
 sample/pagination.dita   | 16 ++++++++--------
 sample/popovers.dita     |  8 ++++----
 sample/shadows.dita      |  4 ++--
 sample/spacing.dita      |  8 ++++----
 sample/tables.dita       | 40 ++++++++++++++++++++--------------------
 sample/tabs.dita         |  8 ++++----
 sample/tooltips.dita     |  8 ++++----
 22 files changed, 132 insertions(+), 132 deletions(-)

diff --git a/sample/accordion.dita b/sample/accordion.dita
index 67d647e5..053e0efa 100644
--- a/sample/accordion.dita
+++ b/sample/accordion.dita
@@ -169,13 +169,13 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;bodydiv outputclass="accordion-flush"&gt;
   ...etc
 &lt;/bodydiv&gt;</codeblock>
         </section>
-         <section id="specialization-1">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;accordion flush="yes"&gt;
   ...etc
@@ -216,13 +216,13 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;bodydiv outputclass="accordion-open"&gt;
   ...etc
 &lt;/bodydiv&gt;</codeblock>
         </section>
-         <section id="specialization-2">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;accordion open="yes"&gt;
   ...etc
diff --git a/sample/alerts.dita b/sample/alerts.dita
index 825f08ce..02d7c58b 100644
--- a/sample/alerts.dita
+++ b/sample/alerts.dita
@@ -113,7 +113,7 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;section outputclass="alert theme-success vstack"&gt;
   &lt;title&gt;&lt;i outputclass="bi bi-emoji-smile pe-2"/&gt;Well done!&lt;/title&gt;
@@ -127,7 +127,7 @@
   &lt;/p&gt;
 &lt;/section&gt;</codeblock>
       </section>
-      <section id="specialization-1">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;alert color="success" outputclass="vstack"&gt;
   &lt;title&gt;&lt;icon outputclass="bi-emoji-smile" padding="e2"/&gt;Well done!&lt;/title&gt;
@@ -204,7 +204,7 @@
       <note outputclass="theme-inverse">This is inverse note.</note>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;note type="note" outputclass="theme-primary"&gt;
   This is a primary note.&lt;/note&gt;
@@ -217,7 +217,7 @@
   This is inverse note.
 &lt;/note&gt;</codeblock>
       </section>
-      <section id="specialization-2">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;note color="primary"&gt;
   This is a primary note.
@@ -243,7 +243,7 @@
       >This note uses a styled smile emoji.</note>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-3">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;note otherprops="icon(bi-search)" type="other" othertype="Search"&gt;
   This note has a search icon.
@@ -252,7 +252,7 @@
   This note uses a styled smile emoji.
 &lt;/note&gt;</codeblock>
       </section>
-      <section id="specialization-3">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;note icon="bi-search" type="other" othertype="Search"&gt;
   This note has a search icon.
diff --git a/sample/badge.dita b/sample/badge.dita
index 0084afb3..b91986aa 100644
--- a/sample/badge.dita
+++ b/sample/badge.dita
@@ -71,7 +71,7 @@
       </p>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ph outputclass="badge theme-primary"&gt;Primary&lt;/ph&gt;
 &lt;ph outputclass="badge theme-secondary"&gt;Secondary&lt;/ph&gt;
@@ -82,7 +82,7 @@
 &lt;ph outputclass="badge theme-accent"&gt;Accent&lt;/ph&gt;
 &lt;ph outputclass="badge theme-inverse"&gt;Inverse&lt;/ph&gt;</codeblock>
         </section>
-         <section id="specialization-1">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;badge color="primary"&gt;Primary&lt;/badge&gt;
 &lt;badge color="secondary"&gt;Secondary&lt;/badge&gt;
diff --git a/sample/borders.dita b/sample/borders.dita
index 49021435..2cfe5f67 100644
--- a/sample/borders.dita
+++ b/sample/borders.dita
@@ -126,7 +126,7 @@
       </div>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;ph outputclass="border border-1"&gt;Width 1&lt;/ph&gt;
 &lt;ph outputclass="border border-2"&gt;Width 2&lt;/ph&gt;
@@ -134,7 +134,7 @@
 &lt;ph outputclass="border border-4"&gt;Width 4&lt;/ph&gt;
 &lt;ph outputclass="border border-5"&gt;Width 5&lt;/ph&gt;</codeblock>
       </section>
-      <section id="specialization-1">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;ph border="1"&gt;Width 1&lt;/ph&gt;
 &lt;ph border="2"&gt;Width 2&lt;/ph&gt;
@@ -153,14 +153,14 @@
       </div>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;ph outputclass="border border-primary"&gt;Primary&lt;/ph&gt;
 &lt;ph outputclass="border border-primary-subtle"&gt;Primary subtle&lt;/ph&gt;
 &lt;ph outputclass="border border-success"&gt;Success&lt;/ph&gt;
 &lt;ph outputclass="border border-danger"&gt;Danger&lt;/ph&gt;</codeblock>
       </section>
-      <section id="specialization-2">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;ph bordercolor="primary"&gt;Primary&lt;/ph&gt;
 &lt;ph bordercolor="primary-subtle"&gt;Primary subtle&lt;/ph&gt;
@@ -180,7 +180,7 @@
       </div>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-3">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;ph outputclass="border rounded-0"&gt;Rounded 0&lt;/ph&gt;
 &lt;ph outputclass="border rounded-1"&gt;Rounded 1&lt;/ph&gt;
@@ -189,7 +189,7 @@
 &lt;ph outputclass="border rounded-4"&gt;Rounded 4&lt;/ph&gt;
 &lt;ph outputclass="border rounded-5"&gt;Rounded 5&lt;/ph&gt;</codeblock>
       </section>
-      <section id="specialization-3">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;ph border="yes" rounded="0"&gt;Rounded 0&lt;/ph&gt;
 &lt;ph border="yes" rounded="1"&gt;Rounded 1&lt;/ph&gt;
@@ -207,12 +207,12 @@
       </div>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-4">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;ph outputclass="border rounded-circle border-info"&gt;Circle&lt;/ph&gt;
 &lt;ph outputclass="border rounded-pill border-warning"&gt;Pill&lt;/ph&gt;</codeblock>
       </section>
-      <section id="specialization-4">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;ph border="yes" rounded="circle" bordercolor="info"&gt;Circle&lt;/ph&gt;
 &lt;ph border="yes" rounded="pill" bordercolor="warning"&gt;Pill&lt;/ph&gt;</codeblock>
diff --git a/sample/button-group.dita b/sample/button-group.dita
index 176479f0..55fe6264 100644
--- a/sample/button-group.dita
+++ b/sample/button-group.dita
@@ -65,7 +65,7 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-group"&gt;
   &lt;xref outputclass="btn theme-danger" href="#"&gt;Left&lt;/xref&gt;
@@ -73,7 +73,7 @@
   &lt;xref outputclass="btn theme-success" href="#"&gt;Right&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
         </section>
-         <section id="specialization-1">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;button-group&gt;
   &lt;button color="danger" href="#"&gt;Left&lt;/button&gt;
@@ -93,7 +93,7 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-group"&gt;
   &lt;xref outputclass="btn-outline theme-primary" href="#"&gt;Left&lt;/xref&gt;
@@ -101,7 +101,7 @@
   &lt;xref outputclass="btn-outline theme-primary" href="#"&gt;Right&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
         </section>
-         <section id="specialization-2">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;button-group&gt;
   &lt;button color="primary" outline="yes" href="#"&gt;Left&lt;/button&gt;
@@ -133,7 +133,7 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-3">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-toolbar"&gt;
   &lt;div outputclass="btn-group me-2"&gt;
@@ -152,7 +152,7 @@
   &lt;/div&gt;
 &lt;/div&gt;</codeblock>
         </section>
-         <section id="specialization-3">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;button-toolbar&gt;
   &lt;button-group outputclass="me-2"&gt;
@@ -184,7 +184,7 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-4">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-group-vertical"&gt;
   &lt;xref outputclass="btn theme-primary" href="#"&gt;Top&lt;/xref&gt;
@@ -192,7 +192,7 @@
   &lt;xref outputclass="btn theme-primary" href="#"&gt;Bottom&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
         </section>
-         <section id="specialization-4">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;button-group vertical="yes"&gt;
   &lt;button color="primary" href="#"&gt;Top&lt;/button&gt;
diff --git a/sample/buttons.dita b/sample/buttons.dita
index 29100ebf..342544fa 100644
--- a/sample/buttons.dita
+++ b/sample/buttons.dita
@@ -83,7 +83,7 @@
       <xref href="#" outputclass="btn btn-outline theme-inverse">Inverse</xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref href="#" outputclass="btn btn-outline theme-primary"&gt;Primary&lt;/xref&gt;
 &lt;xref href="#" outputclass="btn-outline theme-secondary"&gt;Secondary&lt;/xref&gt;
@@ -94,7 +94,7 @@
 &lt;xref href="#" outputclass="btn-outline theme-accent"&gt;Accent&lt;/xref&gt;
 &lt;xref href="#" outputclass="btn-outline theme-inverse"&gt;Inverse&lt;/xref&gt;</codeblock>
         </section>
-         <section id="specialization-1">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;button href="#" outline="yes"&gt;Primary&lt;/button&gt;
 &lt;button href="#" color="secondary" outline="yes"&gt;Secondary&lt;/button&gt;
@@ -117,12 +117,12 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref href="#" outputclass="btn theme-primary btn-lg"&gt;Large button&lt;/xref&gt;
 &lt;xref href="#" outputclass="btn theme-secondary btn-lg"&gt;Large button&lt;/xref&gt;</codeblock>
         </section>
-         <section id="specialization-2">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;button href="#" size="large"&gt;Large button&lt;/button&gt;
 &lt;button href="#" color="secondary" size="large"&gt;Large button&lt;/button&gt;</codeblock>
@@ -135,12 +135,12 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-3">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref href="#" outputclass="btn theme-primary btn-sm"&gt;Small button&lt;/xref&gt;
 &lt;xref href="#" outputclass="btn theme-secondary btn-sm"&gt;Small button&lt;/xref&gt;</codeblock>
         </section>
-         <section id="specialization-3">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;button href="#" size="small"&gt;Small button&lt;/button&gt;
 &lt;button href="#" color="secondary" size="small"&gt;Small button&lt;/button&gt;</codeblock>
diff --git a/sample/card.dita b/sample/card.dita
index c823049f..ad9cc389 100644
--- a/sample/card.dita
+++ b/sample/card.dita
@@ -91,7 +91,7 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section outputclass="card w-50"&gt;
   &lt;title outputclass="h5"&gt;Card Title&lt;/title&gt;
@@ -101,7 +101,7 @@
   &lt;xref outputclass="card-link" href="#"&gt;Another Link&lt;/xref&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section id="specialization-1">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;card&gt;
   &lt;title&gt;Card Title&lt;/title&gt;
@@ -129,14 +129,14 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section outputclass="card w-50"&gt;
   &lt;image outputclass="card-img-top" href="..." /&gt;
   &lt;p&gt;Some quick example text to build on the card title and make up the bulk of the card’s content.&lt;/p&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section id="specialization-2">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;card&gt;
   &lt;image href="..." /&gt;
@@ -160,7 +160,7 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-3">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section outputclass="card w-50"&gt;
   &lt;div outputclass="card-header"&gt;Featured&lt;/div&gt;
@@ -169,7 +169,7 @@
   &lt;xref href="#" outputclass="btn-primary"&gt;Go somewhere&lt;/xref&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section id="specialization-3">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;card&gt;
   &lt;card-header&gt;Featured&lt;/card-header&gt;
diff --git a/sample/carousel.dita b/sample/carousel.dita
index c9f4d05f..0ac2b96e 100644
--- a/sample/carousel.dita
+++ b/sample/carousel.dita
@@ -101,7 +101,7 @@
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel" otherprops="indicators(true)"&gt;
   &lt;li&gt;
@@ -115,7 +115,7 @@
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section id="specialization-1">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;carousel indicators="yes"&gt;
   &lt;carousel-item&gt;
@@ -157,7 +157,7 @@
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel"&gt;
   &lt;li&gt;
@@ -180,7 +180,7 @@
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section id="specialization-2">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;carousel&gt;
   &lt;carousel-item&gt;
@@ -259,7 +259,7 @@ And, kept unused, the user so destroys it.</lines>
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-3">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel"&gt;
   &lt;li&gt;
@@ -288,7 +288,7 @@ And, kept unused, the user so destroys it.</lines>
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section id="specialization-3">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;carousel&gt;
   &lt;carousel-item&gt;
@@ -343,7 +343,7 @@ And, kept unused, the user so destroys it.</lines>
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-4">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel"&gt;
   &lt;li&gt;
@@ -363,7 +363,7 @@ And, kept unused, the user so destroys it.</lines>
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section id="specialization-4">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;carousel&gt;
   &lt;carousel-item&gt;
@@ -483,7 +483,7 @@ And, kept unused, the user so destroys it.</lines>
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-5">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel-fade"&gt;
   &lt;li&gt;
@@ -497,7 +497,7 @@ And, kept unused, the user so destroys it.</lines>
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section id="specialization-5">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;carousel fade="yes"&gt;
   &lt;carousel-item&gt;
@@ -534,7 +534,7 @@ And, kept unused, the user so destroys it.</lines>
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-6">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel" otherprops="autoplay(false)"&gt;
   &lt;li&gt;
@@ -548,7 +548,7 @@ And, kept unused, the user so destroys it.</lines>
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section id="specialization-6">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;carousel autoplay="no"&gt;
   &lt;carousel-item&gt;
@@ -604,7 +604,7 @@ And, kept unused, the user so destroys it.</lines>
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-7">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel"&gt;
   &lt;li otherprops="interval(2000)"&gt;
@@ -618,7 +618,7 @@ And, kept unused, the user so destroys it.</lines>
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section id="specialization-7">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;carousel&gt;
   &lt;carousel-item interval="2000"&gt;
@@ -652,7 +652,7 @@ And, kept unused, the user so destroys it.</lines>
       </ol>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-8">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ol outputclass="carousel" otherprops="touch(false)"&gt;
   &lt;li&gt;
@@ -666,7 +666,7 @@ And, kept unused, the user so destroys it.</lines>
   &lt;/li&gt;
 &lt;/ol&gt;</codeblock>
         </section>
-         <section id="specialization-8">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;carousel touch="no"&gt;
   &lt;carousel-item&gt;
diff --git a/sample/collapse.dita b/sample/collapse.dita
index 9b3beb19..529edaf2 100644
--- a/sample/collapse.dita
+++ b/sample/collapse.dita
@@ -88,7 +88,7 @@
     </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;p&gt;
   &lt;xref outputclass="btn-primary" props="collapse-toggle" href="#collapse2"&gt;Toggle Width Collapse&lt;/xref&gt;
@@ -99,7 +99,7 @@
   &lt;/div&gt;
 &lt;/bodydiv&gt;</codeblock>
         </section>
-         <section id="specialization-1">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;p&gt;
   &lt;button props="collapse-toggle" href="#collapse2"&gt;Toggle Width Collapse&lt;/button&gt;
diff --git a/sample/color.dita b/sample/color.dita
index 8d004fd4..06bd774c 100644
--- a/sample/color.dita
+++ b/sample/color.dita
@@ -118,7 +118,7 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;section outputclass="bg-primary fg-contrast-primary"&gt;
   &lt;title&gt;Section Decoration&lt;/title&gt;
@@ -168,7 +168,7 @@
   ...
 &lt;/note&gt;</codeblock>
       </section>
-      <section id="specialization-1">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;section color="primary"&gt;
   &lt;title&gt;Section Decoration&lt;/title&gt;
@@ -259,7 +259,7 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;img src="..." class="img-thumbnail bg-warning"/&gt;
 
@@ -279,7 +279,7 @@
   ...
 &lt;/ul&gt;</codeblock>
       </section>
-      <section id="specialization-2">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;thumbnail href="..." color="warning"/&gt;
 
diff --git a/sample/drawer.dita b/sample/drawer.dita
index ce1bf623..5f48e78d 100644
--- a/sample/drawer.dita
+++ b/sample/drawer.dita
@@ -108,13 +108,13 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section outputclass="drawer-end" id="drawer2"&gt;
   ...etc
 &lt;/section&gt;</codeblock>
         </section>
-         <section id="specialization-1">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;drawer position="end"&gt;
   ...etc
@@ -129,13 +129,13 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section outputclass="drawer-bottom" id="drawer3"&gt;
   ...etc
 &lt;/section&gt;</codeblock>
         </section>
-         <section id="specialization-2">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;drawer position="bottom"&gt;
   ...etc
@@ -167,7 +167,7 @@
       <li><xmlatt>outputclass="drawer-xxl"</xmlatt></li>
     </ul>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-3">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;note outputclass="d-none lg:d-block"&gt;
   Resize your browser to show the responsive drawer toggle.
@@ -182,7 +182,7 @@
   &lt;/p&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section id="specialization-3">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;note color="info" outputclass="d-none lg:d-block"&gt;
   Resize your browser to show the responsive drawer toggle.
diff --git a/sample/grid.dita b/sample/grid.dita
index 2887f518..e7a570d4 100644
--- a/sample/grid.dita
+++ b/sample/grid.dita
@@ -103,7 +103,7 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;bodydiv outputclass="row"&gt;
   &lt;bodydiv outputclass="col"&gt;
@@ -125,7 +125,7 @@
   &lt;/bodydiv&gt;
 &lt;/bodydiv&gt;</codeblock>
       </section>
-      <section id="specialization-1">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;grid-row&gt;
   &lt;grid-col&gt;
diff --git a/sample/icons.dita b/sample/icons.dita
index 75553363..f69f4c8c 100644
--- a/sample/icons.dita
+++ b/sample/icons.dita
@@ -98,7 +98,7 @@
     </p>
   </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref outputclass="link theme-primary" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt; Primary link
@@ -126,7 +126,7 @@
 &lt;/xref&gt;
 </codeblock>
         </section>
-         <section id="specialization-1">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;xref color="primary" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Primary link
@@ -164,7 +164,7 @@
       <xref outputclass="btn-icon theme-danger" href="#"><ph outputclass="bi bi-share-fill"/></xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref outputclass="theme-primary btn-icon" href="#"&gt;
   &lt;i outputclass="bi-arrow-down-square-fill"/&gt;
@@ -185,7 +185,7 @@
   &lt;i outputclass="bi-share-fill"/&gt;
 &lt;/xref&gt;</codeblock>
         </section>
-         <section id="specialization-2">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;button color="primary" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-arrow-down-square-fill"/&gt;
diff --git a/sample/images.dita b/sample/images.dita
index 8d0bd65d..cf104d78 100644
--- a/sample/images.dita
+++ b/sample/images.dita
@@ -79,7 +79,7 @@
       </fig>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock> &lt;fig&gt;
   &lt;image outputclass="img-thumbnail d-auto" href="..."/&gt;
@@ -87,7 +87,7 @@
   &lt;image outputclass="img-thumbnail d-dark" href="..." deliveryTarget="html"/&gt;
 &lt;/fig&gt;</codeblock>
       </section>
-      <section id="specialization-1">
+      <section>
         <title>Specialization</title>
         <codeblock> &lt;fig&gt;
   &lt;thumbnail outputclass="d-auto" href="..."/&gt;
@@ -103,11 +103,11 @@
       </p>
     </section>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;image otherprops="loading(lazy)" href="..."/&gt;</codeblock>
       </section>
-      <section id="specialization-2">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;image loading="lazy" href="..."/&gt;</codeblock>
       </section>
@@ -130,7 +130,7 @@
       </div>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-3">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;div outputclass="d-picture"&gt;
   &lt;image otherprops="media(min-width: 700px)" href="..."/&gt;
@@ -140,7 +140,7 @@
   &lt;image href="..."/&gt;
 &lt;/div&gt;</codeblock>
       </section>
-      <section id="specialization-3">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;picture&gt;
   &lt;image media="min-width: 700px" href="..."/&gt;
diff --git a/sample/list-group.dita b/sample/list-group.dita
index c2369dee..e47f492f 100644
--- a/sample/list-group.dita
+++ b/sample/list-group.dita
@@ -74,13 +74,13 @@
       </ul>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ul outputclass="list-group" compact="yes" &gt;
   ...
 &lt;/ul&gt;</codeblock>
         </section>
-         <section id="specialization-1">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;list-group compact="yes"&gt;
   ...
@@ -99,13 +99,13 @@
       </ul>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ul outputclass="list-group" compact="no" &gt;
   ...
 &lt;/ul&gt;</codeblock>
         </section>
-         <section id="specialization-2">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;list-group compact="no"&gt;
   ...
@@ -127,7 +127,7 @@
       </ul>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-3">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;ul outputclass="list-group-flush"&gt;
   &lt;li&gt;An item&lt;/li&gt;
@@ -137,7 +137,7 @@
   &lt;li&gt;And a fifth one&lt;/li&gt;
 &lt;/ul&gt;</codeblock>
         </section>
-         <section id="specialization-3">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;list-group flush="yes"&gt;
   &lt;li&gt;An item&lt;/li&gt;
diff --git a/sample/pagination.dita b/sample/pagination.dita
index ab0eb26e..c9f16c0f 100644
--- a/sample/pagination.dita
+++ b/sample/pagination.dita
@@ -113,7 +113,7 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
@@ -126,7 +126,7 @@
   &lt;/ol&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section id="specialization-1">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;pagination size="large"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
@@ -163,7 +163,7 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
@@ -176,7 +176,7 @@
   &lt;/ol&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section id="specialization-2">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;pagination size="small"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
@@ -224,7 +224,7 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-3">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
@@ -237,7 +237,7 @@
   &lt;/ol&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section id="specialization-3">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;pagination outputclass="justify-content-center"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
@@ -274,7 +274,7 @@
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-4">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;section&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
@@ -287,7 +287,7 @@
   &lt;/ol&gt;
 &lt;/section&gt;</codeblock>
         </section>
-         <section id="specialization-4">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;pagination outputclass="justify-content-end"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
diff --git a/sample/popovers.dita b/sample/popovers.dita
index 23070357..2c046865 100644
--- a/sample/popovers.dita
+++ b/sample/popovers.dita
@@ -94,7 +94,7 @@
         <desc>Left popover</desc> Popover on left </xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref href="#" outputclass="btn-secondary popover-top"&gt;
   &lt;desc&gt;Top popover&lt;/desc&gt;
@@ -113,7 +113,7 @@
   Popover on left
 &lt;/xref&gt;</codeblock>
         </section>
-         <section id="specialization-1">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;popover outputclass="btn-secondary" position="top"&gt;
   &lt;desc&gt;Top popover&lt;/desc&gt;
@@ -155,7 +155,7 @@
           <desc>And here’s some amazing content. It’s very engaging. Right?</desc>Custom popover</xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref href="#" outputclass="btn-lg btn-danger popover-top"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
@@ -164,7 +164,7 @@
   Custom popover
 &lt;/xref&gt;</codeblock>
         </section>
-         <section id="specialization-2">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;popover outputclass="btn-lg btn-danger"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
diff --git a/sample/shadows.dita b/sample/shadows.dita
index 52fc7057..d5bde6f6 100644
--- a/sample/shadows.dita
+++ b/sample/shadows.dita
@@ -64,7 +64,7 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;section outputclass="card shadow-lg m-3 bg-subtle-accent"&gt;
   &lt;div outputclass="card-body"&gt;
@@ -75,7 +75,7 @@
 
 &lt;div outputclass="alert theme-accent m-3 shadow-sm"&gt;Alert with small shadow&lt;/div&gt;</codeblock>
       </section>
-      <section id="specialization-1">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;card shadow="lg" margin="3" color="accent"&gt;
   &lt;title&gt;Shadowed Card&lt;/title&gt;
diff --git a/sample/spacing.dita b/sample/spacing.dita
index 55ddf633..e2c03356 100644
--- a/sample/spacing.dita
+++ b/sample/spacing.dita
@@ -86,7 +86,7 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;div outputclass="bg-primary p-0"&gt;Padding 0&lt;/div&gt;
 &lt;div outputclass="bg-secondary p-1 m-1"&gt;Padding 1&lt;/div&gt;
@@ -95,7 +95,7 @@
 &lt;div outputclass="bg-warning p-4 m-1"&gt;Padding 4&lt;/div&gt;
 &lt;div outputclass="bg-info p-5 m-1"&gt;Padding 5&lt;/div&gt;</codeblock>
       </section>
-      <section id="specialization-1">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;div color="primary" padding="0"&gt;Padding 0&lt;/div&gt;
 &lt;div color="secondary" padding="1" margin="1"&gt;Padding 1&lt;/div&gt;
@@ -133,14 +133,14 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;div outputclass="bg-primary mt-5 mb-0"&gt;Margin Top 5, Bottom 0&lt;/div&gt;
 &lt;div outputclass="bg-secondary mx-3"&gt;Margin Horizontal 3&lt;/div&gt;
 &lt;div outputclass="bg-success py-5"&gt;Padding Vertical 5&lt;/div&gt;
 &lt;div outputclass="bg-danger ps-3 pe-1"&gt;Padding Start 3, End 1&lt;/div&gt;</codeblock>
       </section>
-      <section id="specialization-2">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;div color="primary" margin="t5 b0"&gt;Margin Top 5, Bottom 0&lt;/div&gt;
 &lt;div color="secondary" margin="x3"&gt;Margin Horizontal 3&lt;/div&gt;
diff --git a/sample/tables.dita b/sample/tables.dita
index d9d4d2da..9626d018 100644
--- a/sample/tables.dita
+++ b/sample/tables.dita
@@ -142,7 +142,7 @@
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table outputclass="theme-primary p-1 w-100"&gt;
   &lt;tgroup cols="2"&gt;
@@ -173,7 +173,7 @@
   &lt;/tgroup&gt;
 &lt;/table&gt;</codeblock>
       </section>
-      <section id="specialization-1">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;table color="primary" padding="1" width="100"&gt;
   &lt;tgroup cols="2"&gt;
@@ -243,13 +243,13 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table outputclass="table-striped"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
-      <section id="specialization-2">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;table striped="yes"&gt;
   ...etc
@@ -294,13 +294,13 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-3">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table outputclass="table-striped-columns"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
-      <section id="specialization-3">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;table striped-columns="yes"&gt;
   ...etc
@@ -345,13 +345,13 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-4">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table rowsep="1" colsep="1"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
-      <section id="specialization-4">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;table rowsep="1" colsep="1"&gt;
   ...etc
@@ -395,13 +395,13 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-5">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table rowsep="0" colsep="0"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
-      <section id="specialization-5">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;table rowsep="0" colsep="0"&gt;
   ...etc
@@ -446,13 +446,13 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-6">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table outputclass="table-sm"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
       </section>
-      <section id="specialization-6">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;table compact="yes"&gt;
   ...etc
@@ -497,13 +497,13 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-7">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;tbody outputclass="table-group-divider"&gt;
   ...etc
 &lt;/tbody&gt;</codeblock>
       </section>
-      <section id="specialization-7">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;table divider="yes"&gt;
   ...
@@ -566,7 +566,7 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-8">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table outputclass="align-middle"&gt;
   &lt;tgroup cols="4"&gt;
@@ -595,7 +595,7 @@
   &lt;/tgroup&gt;
 &lt;/table&gt;</codeblock>
       </section>
-      <section id="specialization-8">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;table outputclass="align-middle"&gt;
   &lt;tgroup cols="4"&gt;
@@ -664,7 +664,7 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-9">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
@@ -674,7 +674,7 @@
   &lt;/tgroup&gt;
 &lt;/table&gt;</codeblock>
       </section>
-      <section id="specialization-9">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
@@ -718,7 +718,7 @@
       </table>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-10">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
@@ -728,7 +728,7 @@
   &lt;/tgroup&gt;
 &lt;/table&gt;</codeblock>
       </section>
-      <section id="specialization-10">
+      <section>
         <title>Specialization</title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
diff --git a/sample/tabs.dita b/sample/tabs.dita
index 30fe1148..9a97e624 100644
--- a/sample/tabs.dita
+++ b/sample/tabs.dita
@@ -126,7 +126,7 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-1">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;bodydiv outputclass="nav-pills"&gt;
   &lt;section&gt;
@@ -143,7 +143,7 @@
   &lt;/section&gt;
 &lt;/bodydiv&gt;</codeblock>
         </section>
-      <section id="specialization-1">
+      <section>
         <title>Specialization</title>
           <codeblock>&lt;tabbed-dialog style="pills"&gt;
   &lt;section&gt;
@@ -192,7 +192,7 @@
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;bodydiv outputclass="nav-pills-vertical"&gt;
   &lt;section&gt;
@@ -209,7 +209,7 @@
   &lt;/section&gt;
 &lt;/bodydiv&gt;</codeblock>
         </section>
-      <section id="specialization-2">
+      <section>
         <title>Specialization</title>
           <codeblock>&lt;tabbed-dialog style="vertical-pills"&gt;
   &lt;section&gt;
diff --git a/sample/tooltips.dita b/sample/tooltips.dita
index 974a4af3..1352474a 100644
--- a/sample/tooltips.dita
+++ b/sample/tooltips.dita
@@ -126,14 +126,14 @@
         <b>DITA</b> elements</desc> Tooltip with embedded DITA </xref>
   </bodydiv>
   <bodydiv outputclass="nav-pills mt-3">
-    <section id="outputclass-1">
+    <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;xref href="#" outputclass="btn-secondary tooltip-top"&gt;
 &lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
 Tooltip with embedded DITA
 &lt;/xref&gt;</codeblock>
       </section>
-       <section id="specialization-1">
+       <section>
       <title>Specialization</title>
         <codeblock>&lt;tooltip outputclass="btn-secondary"&gt;
 &lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
@@ -157,7 +157,7 @@ Tooltip with embedded DITA
       </xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
-      <section id="outputclass-2">
+      <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;xref href="#" outputclass="btn-secondary tooltip-top"&gt;
   &lt;data name="class"&gt;custom-tooltip&lt;/data&gt;
@@ -165,7 +165,7 @@ Tooltip with embedded DITA
   Custom tooltip
 &lt;/xref&gt;</codeblock>
         </section>
-         <section id="specialization-2">
+         <section>
         <title>Specialization</title>
           <codeblock>&lt;tooltip outputclass="btn-secondary"&gt;
   &lt;data name="class"&gt;custom-tooltip&lt;/data&gt;

From 768cf3f8dd96178c1bdb77311a9ee10c32bda5f1 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 1 Aug 2026 14:45:13 +0200
Subject: [PATCH 24/87] fixing footer

---
 .github/dita-ot/footer.xml       | 18 +++----
 includes/ftr.content.example.xml | 92 ++++++++++++++++----------------
 2 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/.github/dita-ot/footer.xml b/.github/dita-ot/footer.xml
index f5461b84..34491f42 100644
--- a/.github/dita-ot/footer.xml
+++ b/.github/dita-ot/footer.xml
@@ -6,44 +6,44 @@
       <p class="pt-3">
         <!-- GitHub -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="https://github.com/dita-bootstrap/dita-bootstrap.html"
           role="button"
-          style="background-color: #333333;"
+          style="color: #ffffff; background-color: #333333;"
         >
           <i class="bi bi-github text-white"/>
         </a>
         <!-- LinkedIn -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="https://www.linkedin.com/in/infotexture/"
           role="button"
-          style="background-color: #0082ca;"
+          style="color: #ffffff; background-color: #0082ca;"
         >
           <i class="bi bi-linkedin text-white"/>
         </a>
         <!-- Mastodon -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="https://indieweb.social/@infotexture"
           role="button"
-          style="background-color: #563acc;"
+          style="color: #ffffff; background-color: #563acc;"
         >
           <i class="bi bi-mastodon text-white"/>
         </a>
         <!-- Bluesky -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="https://bsky.app/profile/infotexture.net"
           role="button"
-          style="background-color: #0085ff;"
+          style="color: #ffffff; background-color: #0085ff;"
         >
           <i class="bi bi-bluesky text-white"/>
         </a>
       </p>
       <p>
         <small>
-          © 2017–2025
+          © 2017–2026
           <a href="https://infotexture.net/">infotexture</a>
         </small>
       </p>
diff --git a/includes/ftr.content.example.xml b/includes/ftr.content.example.xml
index 6a8d33c0..59b1e7da 100644
--- a/includes/ftr.content.example.xml
+++ b/includes/ftr.content.example.xml
@@ -7,138 +7,138 @@
       <p class="pt-3">
         <!-- Bluesky -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="#!"
           role="button"
-          style="background-color: #0085ff;"
+          style="color: #ffffff; background-color: #0085ff;"
         >
-          <i class="bi bi-bluesky text-white"/>
+          <i class="bi bi-bluesky"/>
         </a>
         <!-- Dribbble -->
         <a
-          class="btn m-1"
-          style="background-color: #ec4a89;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #ec4a89;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-dribbble text-white"/>
+          <i class="bi bi-dribbble"/>
         </a>
         <!-- Facebook -->
         <a
-          class="btn m-1"
-          style="background-color: #3b5998;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #3b5998;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-facebook text-white"/>
+          <i class="bi bi-facebook"/>
         </a>
         <!-- GitHub -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="#!"
           role="button"
-          style="background-color: #333333;"
+          style="color: #ffffff; background-color: #333333;"
         >
-          <i class="bi bi-github text-white"/>
+          <i class="bi bi-github"/>
         </a>
         <!-- Google -->
         <a
-          class="btn m-1"
-          style="background-color: #dd4b39;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #dd4b39;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-google text-white"/>
+          <i class="bi bi-google"/>
         </a>
         <!-- Instagram -->
         <a
-          class="btn m-1"
-          style="background-color: #ac2bac;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #ac2bac;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-instagram text-white"/>
+          <i class="bi bi-instagram"/>
         </a>
         <!-- LinkedIn -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="#!"
           role="button"
-          style="background-color: #0082ca;"
+          style="color: #ffffff; background-color: #0082ca;"
         >
-          <i class="bi bi-linkedin text-white"/>
+          <i class="bi bi-linkedin"/>
         </a>
         <!-- Mastodon -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="#!"
           role="button"
-          style="background-color: #563acc;"
+          style="color: #ffffff; background-color: #563acc;"
         >
-          <i class="bi bi-mastodon text-white"/>
+          <i class="bi bi-mastodon"/>
         </a>
         <!-- Pinterest -->
         <a
-          class="btn m-1"
-          style="background-color: #c61118;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #c61118;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-pinterest text-white"/>
+          <i class="bi bi-pinterest"/>
         </a>
         <!-- Reddit -->
         <a
-          class="btn m-1"
-          style="background-color: #ff4500;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #ff4500;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-reddit text-white"/>
+          <i class="bi bi-reddit"/>
         </a>
         <!-- Slack -->
         <a
-          class="btn m-1"
-          style="background-color: #481449;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #481449;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-slack text-white"/>
+          <i class="bi bi-slack"/>
         </a>
         <!-- Stack Overflow -->
         <a
-          class="btn m-1"
-          style="background-color: #ffac44;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #ffac44;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-stack-overflow text-white"/>
+          <i class="bi bi-stack-overflow"/>
         </a>
         <!-- Twitter -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="#!"
           role="button"
-          style="background-color: #55acee;"
+          style="color: #ffffff; background-color: #55acee;"
         >
-          <i class="bi bi-twitter text-white"/>
+          <i class="bi bi-twitter"/>
         </a>
         <!-- Youtube -->
         <a
-          class="btn m-1"
-          style="background-color: #ed302f;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #ed302f;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-youtube text-white"/>
+          <i class="bi bi-youtube"/>
         </a>
         <!-- WhatsApp -->
         <a
-          class="btn m-1"
-          style="background-color: #25d366;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #25d366;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-whatsapp text-white"/>
+          <i class="bi bi-whatsapp"/>
         </a>
       </p>
       <p class="p-3">
@@ -147,7 +147,7 @@
         commodi optio pariatur est quia magnam eum harum corrupti dicta,
         aliquam sequi voluptate quas.</p>
       <p class="p-3">
-        <small>© 2025</small>
+        <small>© 2026</small>
       </p>
     </div>
   </div>

From 921c98f7ca5befea66cbb66594a8840b07cb3a67 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 1 Aug 2026 15:04:38 +0200
Subject: [PATCH 25/87] Amend links

---
 sample/accordion.dita        |  4 ++--
 sample/alerts.dita           |  2 +-
 sample/badge.dita            |  2 +-
 sample/bootstrap-table.dita  |  2 +-
 sample/borders.dita          |  2 +-
 sample/breadcrumb.dita       |  2 +-
 sample/button-group.dita     |  2 +-
 sample/buttons.dita          |  2 +-
 sample/card.dita             |  6 +++---
 sample/carousel.dita         |  2 +-
 sample/containers.dita       |  2 +-
 sample/dark-mode.dita        |  2 +-
 sample/drawer.dita           |  2 +-
 sample/extension-points.dita |  2 +-
 sample/grid.dita             |  2 +-
 sample/images.dita           |  4 ++--
 sample/index.dita            | 28 ++++++++++++++--------------
 sample/list-group.dita       |  2 +-
 sample/nav.dita              | 10 +++++-----
 sample/offline.dita          |  2 +-
 sample/pagination.dita       |  4 ++--
 sample/popovers.dita         |  2 +-
 sample/rtl.dita              |  2 +-
 sample/sass.dita             |  2 +-
 sample/scrollspy.dita        |  2 +-
 sample/search-box.dita       |  2 +-
 sample/tables.dita           |  2 +-
 sample/tabs.dita             |  2 +-
 sample/tooltips.dita         |  2 +-
 sample/typography.dita       |  2 +-
 30 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/sample/accordion.dita b/sample/accordion.dita
index 053e0efa..634b071c 100644
--- a/sample/accordion.dita
+++ b/sample/accordion.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
@@ -30,7 +30,7 @@
       <title>How it works</title>
       <p>The accordion uses
         <xref
-          href="https://getbootstrap.com/docs/5.3/components/collapse/"
+          href="https://getbootstrap.com/docs/6.0/components/collapse/"
           format="html"
           scope="external"
         >collapse</xref> internally to make it collapsible. To render an accordion that’s expanded, add
diff --git a/sample/alerts.dita b/sample/alerts.dita
index 02d7c58b..3ff6eebd 100644
--- a/sample/alerts.dita
+++ b/sample/alerts.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/badge.dita b/sample/badge.dita
index b91986aa..ae7662cb 100644
--- a/sample/badge.dita
+++ b/sample/badge.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/bootstrap-table.dita b/sample/bootstrap-table.dita
index 4d430835..260be1f9 100644
--- a/sample/bootstrap-table.dita
+++ b/sample/bootstrap-table.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/borders.dita b/sample/borders.dita
index 2cfe5f67..0cda549d 100644
--- a/sample/borders.dita
+++ b/sample/borders.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!-- 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 (found at https://getbootstrap.com/docs/5.3), however DITA
+   5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
    markup is used throughout the examples describing how to implement these
    components correctly using outputclass.
 
diff --git a/sample/breadcrumb.dita b/sample/breadcrumb.dita
index 01405533..2f5cb450 100644
--- a/sample/breadcrumb.dita
+++ b/sample/breadcrumb.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/button-group.dita b/sample/button-group.dita
index 55fe6264..40c4b8a7 100644
--- a/sample/button-group.dita
+++ b/sample/button-group.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/buttons.dita b/sample/buttons.dita
index 342544fa..fe884fcc 100644
--- a/sample/buttons.dita
+++ b/sample/buttons.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/card.dita b/sample/card.dita
index ad9cc389..fb2f8e2d 100644
--- a/sample/card.dita
+++ b/sample/card.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
@@ -36,12 +36,12 @@
       <p>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 <xmlatt>margin</xmlatt> by default, so use
-        <xref href="https://getbootstrap.com/docs/5.3/utilities/spacing/" format="html" scope="external">spacing
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/spacing/" format="html" scope="external">spacing
           utilities</xref> as needed.</p>
       <p
       >Below is an example of a basic card with mixed content and a default width. Card widths are easily customized with Bootstrap’s various
           <xref
-          href="https://getbootstrap.com/docs/5.3/components/card/#sizing"
+          href="https://getbootstrap.com/docs/6.0/components/card/#sizing"
           format="html"
           scope="external"
         >sizing options.</xref>
diff --git a/sample/carousel.dita b/sample/carousel.dita
index 0ac2b96e..be519d1c 100644
--- a/sample/carousel.dita
+++ b/sample/carousel.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/containers.dita b/sample/containers.dita
index 199f2856..cc93edb2 100644
--- a/sample/containers.dita
+++ b/sample/containers.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/dark-mode.dita b/sample/dark-mode.dita
index c2b1b179..b025f749 100644
--- a/sample/dark-mode.dita
+++ b/sample/dark-mode.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/drawer.dita b/sample/drawer.dita
index 5f48e78d..7307a156 100644
--- a/sample/drawer.dita
+++ b/sample/drawer.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/extension-points.dita b/sample/extension-points.dita
index 483e2f26..a2418579 100644
--- a/sample/extension-points.dita
+++ b/sample/extension-points.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/grid.dita b/sample/grid.dita
index e7a570d4..76f23d89 100644
--- a/sample/grid.dita
+++ b/sample/grid.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/images.dita b/sample/images.dita
index cf104d78..8fea0a2c 100644
--- a/sample/images.dita
+++ b/sample/images.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
@@ -38,7 +38,7 @@
     <section id="image-thumbnails">
       <title>Image thumbnails</title>
       <p>In addition to Bootstrap’s
-        <xref href="https://getbootstrap.com/docs/5.3/utilities/borders/" format="html" scope="external">border-radius
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/borders/" format="html" scope="external">border-radius
           utilities</xref>, you can use the specialized <xmlelement>thumbnail</xmlelement> element to give an image
         a rounded 1px border appearance.</p>
     </section>
diff --git a/sample/index.dita b/sample/index.dita
index 3011b81b..87c87198 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
@@ -13,7 +13,7 @@
   <shortdesc>A plug-in for
     <xref href="http://www.dita-ot.org" format="html" scope="external">DITA Open Toolkit</xref> that extends the default
     HTML5 output with a
-    <xref href="https://getbootstrap.com/docs/5.3" format="html" scope="external">Bootstrap 5.3</xref> template and
+    <xref href="https://getbootstrap.com/docs/6.0" format="html" scope="external">Bootstrap 5.3</xref> template and
     components.
   </shortdesc>
   <prolog>
@@ -490,11 +490,11 @@
       <p>The plug-in includes a default static navigation menu with a project name and global link placeholders.</p>
       <p>The default header file <filepath>includes/hdr.navbar.default.xml</filepath> uses the Bootstrap primary
         (blue) background color for the
-        <xref href="https://getbootstrap.com/docs/5.3/examples/navbars/" format="html" scope="external">navbar
+        <xref href="https://getbootstrap.com/docs/6.0/examples/navbars/" format="html" scope="external">navbar
           component</xref>, and provides a theme menu to toggle <xref
           href="./dark-mode.dita"
         >dark mode</xref>.  Bootstrap itself offers additional <xref
-          href="https://getbootstrap.com/docs/5.3/examples/headers/"
+          href="https://getbootstrap.com/docs/6.0/examples/headers/"
           format="html"
           scope="external"
         >header examples</xref>.</p>
@@ -517,7 +517,7 @@
           format="html"
           scope="external"
         >footer file</xref> and Bootstrap also offers additional <xref
-          href="https://getbootstrap.com/docs/5.3/examples/footers/"
+          href="https://getbootstrap.com/docs/6.0/examples/footers/"
           format="html"
           scope="external"
         >examples</xref>. To add a footer to the generated output, pass a custom
@@ -542,15 +542,15 @@
       <p>As of version 5.3.1, the plug-in provides five new <parmname
         >--nav-toc</parmname> options to style the table of contents navigation with
         either the Bootstrap
-        <xref href="https://getbootstrap.com/docs/5.3/components/list-group/" format="html" scope="external">list
+        <xref href="https://getbootstrap.com/docs/6.0/components/list-group/" format="html" scope="external">list
           group</xref> component,
         <xref
-          href="https://getbootstrap.com/docs/5.3/components/navs-tabs/#pills"
+          href="https://getbootstrap.com/docs/6.0/components/navs-tabs/#pills"
           format="html"
           scope="external"
         >nav-pills</xref>, or
          <xref
-          href="https://getbootstrap.com/docs/5.3/components/collapse/"
+          href="https://getbootstrap.com/docs/6.0/components/collapse/"
           format="html"
           scope="external"
         >collapsible</xref> menus. The following new options are available:
@@ -615,14 +615,14 @@
       <indexterm><parmname>--bootstrap.css.dd</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.nav.parent</parmname></indexterm>
       <p>The HTML output for the following DITA elements can be annotated with common Bootstrap utility classes for
-        <xref href="https://getbootstrap.com/docs/5.3/utilities/borders" format="html" scope="external">borders</xref>,
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/borders" format="html" scope="external">borders</xref>,
         <xref
-          href="https://getbootstrap.com/docs/5.3/utilities/background"
+          href="https://getbootstrap.com/docs/6.0/utilities/background"
           format="html"
           scope="external"
         >background</xref>,
-        <xref href="https://getbootstrap.com/docs/5.3/utilities/text" format="html" scope="external">text</xref>,
-        <xref href="https://getbootstrap.com/docs/5.3/utilities/spacing" format="html" scope="external">spacing</xref>,
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/text" format="html" scope="external">text</xref>,
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/spacing" format="html" scope="external">spacing</xref>,
         etc. using additional command line parameters:</p>
       <parml otherprops="cols(4)">
         <plentry>
@@ -1003,7 +1003,7 @@
           <pd>
             Whether to include support for a
             <xref
-              href="https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode"
+              href="https://getbootstrap.com/docs/6.0/customize/color-modes/#dark-mode"
               format="html"
               scope="external"
             >dark mode</xref> toggler
@@ -1063,7 +1063,7 @@
     <section>
       <note type="note">Within the sample documentation, the texts describing the usage of each component have been
         copied directly from the
-        <xref href="https://getbootstrap.com/docs/5.3" format="html" scope="external">official Bootstrap 5.3
+        <xref href="https://getbootstrap.com/docs/6.0" format="html" scope="external">official Bootstrap 5.3
           documentation</xref>, however DITA markup is used throughout the examples describing how to implement these
         components correctly using the DITA <xmlatt>outputclass</xmlatt> attribute. This text is therefore a derivative
         of <cite>Bootstrap 5 docs</cite> by Twitter, Inc. and the Bootstrap Authors, and used under
diff --git a/sample/list-group.dita b/sample/list-group.dita
index e47f492f..3e7a11f7 100644
--- a/sample/list-group.dita
+++ b/sample/list-group.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/nav.dita b/sample/nav.dita
index 29acb085..3eecdec1 100644
--- a/sample/nav.dita
+++ b/sample/nav.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
@@ -42,15 +42,15 @@
         contents entirely.</p>
       <p>As of version 5.3.1, the plug-in provides five new options to style the table of contents navigation with
         either the Bootstrap
-        <xref href="https://getbootstrap.com/docs/5.3/components/list-group/" format="html" scope="external">list
+        <xref href="https://getbootstrap.com/docs/6.0/components/list-group/" format="html" scope="external">list
           group</xref> component,
         <xref
-          href="https://getbootstrap.com/docs/5.3/components/navs-tabs/#pills"
+          href="https://getbootstrap.com/docs/6.0/components/navs-tabs/#pills"
           format="html"
           scope="external"
         >nav-pills</xref>, or
          <xref
-          href="https://getbootstrap.com/docs/5.3/components/collapse/"
+          href="https://getbootstrap.com/docs/6.0/components/collapse/"
           format="html"
           scope="external"
         >collapsible</xref> menus.
@@ -208,7 +208,7 @@
       <title>Dividers</title>
       <p>
         <xref
-          href="https://getbootstrap.com/docs/5.3/components/dropdowns/#dividers"
+          href="https://getbootstrap.com/docs/6.0/components/dropdowns/#dividers"
           format="html"
           scope="external"
         >Dividers</xref> can be added to items rendered in collapsible sidebars and menus by adding the
diff --git a/sample/offline.dita b/sample/offline.dita
index 855982c5..7b6991c8 100644
--- a/sample/offline.dita
+++ b/sample/offline.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/pagination.dita b/sample/pagination.dita
index c9f16c0f..a2483652 100644
--- a/sample/pagination.dita
+++ b/sample/pagination.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
@@ -194,7 +194,7 @@
       <title>Alignment</title>
       <p>Change the alignment of pagination component by appending Bootstrap
         <xref
-          href="https://getbootstrap.com/docs/5.3/utilities/flex/"
+          href="https://getbootstrap.com/docs/6.0/utilities/flex/"
           format="html"
           scope="external"
         >flexbox utility</xref> classes
diff --git a/sample/popovers.dita b/sample/popovers.dita
index 2c046865..065bbb8e 100644
--- a/sample/popovers.dita
+++ b/sample/popovers.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/rtl.dita b/sample/rtl.dita
index 64dc3a49..b9e033af 100644
--- a/sample/rtl.dita
+++ b/sample/rtl.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/sass.dita b/sample/sass.dita
index 64198710..5fef0083 100644
--- a/sample/sass.dita
+++ b/sample/sass.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/scrollspy.dita b/sample/scrollspy.dita
index bd95a1ee..c4fb0fe3 100644
--- a/sample/scrollspy.dita
+++ b/sample/scrollspy.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!-- 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 (found at https://getbootstrap.com/docs/5.3), however DITA
+   5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
    markup is used throughout the examples describing how to implement these
    components correctly using outputclass. -->
 <topic id="scrollspy">
diff --git a/sample/search-box.dita b/sample/search-box.dita
index 5149026a..fdc8abe0 100644
--- a/sample/search-box.dita
+++ b/sample/search-box.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/tables.dita b/sample/tables.dita
index 9626d018..fec4a7a8 100644
--- a/sample/tables.dita
+++ b/sample/tables.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/tabs.dita b/sample/tabs.dita
index 9a97e624..a64308ee 100644
--- a/sample/tabs.dita
+++ b/sample/tabs.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/tooltips.dita b/sample/tooltips.dita
index 1352474a..4be78411 100644
--- a/sample/tooltips.dita
+++ b/sample/tooltips.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/typography.dita b/sample/typography.dita
index 5b3390b1..2c39f30f 100644
--- a/sample/typography.dita
+++ b/sample/typography.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!-- 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 (found at https://getbootstrap.com/docs/5.3), however DITA
+   5.3 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
    markup is used throughout the examples describing how to implement these
    components correctly using outputclass. -->
 <topic id="typography">

From 7a4c94669a4e193bda8d53f165b64710e1fd28bc Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 1 Aug 2026 18:51:37 +0200
Subject: [PATCH 26/87] 5.3 -> 6.0

---
 sample/accordion.dita        | 2 +-
 sample/alerts.dita           | 2 +-
 sample/badge.dita            | 2 +-
 sample/bootstrap-table.dita  | 2 +-
 sample/borders.dita          | 2 +-
 sample/breadcrumb.dita       | 2 +-
 sample/button-group.dita     | 2 +-
 sample/buttons.dita          | 2 +-
 sample/card.dita             | 2 +-
 sample/carousel.dita         | 2 +-
 sample/containers.dita       | 2 +-
 sample/dark-mode.dita        | 2 +-
 sample/drawer.dita           | 2 +-
 sample/extension-points.dita | 2 +-
 sample/grid.dita             | 2 +-
 sample/images.dita           | 2 +-
 sample/index.dita            | 2 +-
 sample/list-group.dita       | 2 +-
 sample/nav.dita              | 2 +-
 sample/offline.dita          | 2 +-
 sample/pagination.dita       | 2 +-
 sample/popovers.dita         | 2 +-
 sample/rtl.dita              | 2 +-
 sample/sass.dita             | 2 +-
 sample/scrollspy.dita        | 2 +-
 sample/search-box.dita       | 2 +-
 sample/tables.dita           | 2 +-
 sample/tabs.dita             | 2 +-
 sample/tooltips.dita         | 2 +-
 sample/typography.dita       | 2 +-
 30 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/sample/accordion.dita b/sample/accordion.dita
index 634b071c..f78c2f94 100644
--- a/sample/accordion.dita
+++ b/sample/accordion.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/alerts.dita b/sample/alerts.dita
index 3ff6eebd..55874a71 100644
--- a/sample/alerts.dita
+++ b/sample/alerts.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/badge.dita b/sample/badge.dita
index ae7662cb..91114dc2 100644
--- a/sample/badge.dita
+++ b/sample/badge.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/bootstrap-table.dita b/sample/bootstrap-table.dita
index 260be1f9..1d35c746 100644
--- a/sample/bootstrap-table.dita
+++ b/sample/bootstrap-table.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/borders.dita b/sample/borders.dita
index 0cda549d..f6c8aa79 100644
--- a/sample/borders.dita
+++ b/sample/borders.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!-- 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 (found at https://getbootstrap.com/docs/6.0), however DITA
+   6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
    markup is used throughout the examples describing how to implement these
    components correctly using outputclass.
 
diff --git a/sample/breadcrumb.dita b/sample/breadcrumb.dita
index 2f5cb450..50ea2f07 100644
--- a/sample/breadcrumb.dita
+++ b/sample/breadcrumb.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/button-group.dita b/sample/button-group.dita
index 40c4b8a7..84c39cd5 100644
--- a/sample/button-group.dita
+++ b/sample/button-group.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/buttons.dita b/sample/buttons.dita
index fe884fcc..b236baa2 100644
--- a/sample/buttons.dita
+++ b/sample/buttons.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/card.dita b/sample/card.dita
index fb2f8e2d..3b735c0e 100644
--- a/sample/card.dita
+++ b/sample/card.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/carousel.dita b/sample/carousel.dita
index be519d1c..8c2dd034 100644
--- a/sample/carousel.dita
+++ b/sample/carousel.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/containers.dita b/sample/containers.dita
index cc93edb2..4b25d366 100644
--- a/sample/containers.dita
+++ b/sample/containers.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/dark-mode.dita b/sample/dark-mode.dita
index b025f749..88b3dacc 100644
--- a/sample/dark-mode.dita
+++ b/sample/dark-mode.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/drawer.dita b/sample/drawer.dita
index 7307a156..82978d2a 100644
--- a/sample/drawer.dita
+++ b/sample/drawer.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/extension-points.dita b/sample/extension-points.dita
index a2418579..3d869e9b 100644
--- a/sample/extension-points.dita
+++ b/sample/extension-points.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/grid.dita b/sample/grid.dita
index 76f23d89..10a078d1 100644
--- a/sample/grid.dita
+++ b/sample/grid.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/images.dita b/sample/images.dita
index 8fea0a2c..20f2e350 100644
--- a/sample/images.dita
+++ b/sample/images.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/index.dita b/sample/index.dita
index 87c87198..57d6f027 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/list-group.dita b/sample/list-group.dita
index 3e7a11f7..81c5e66e 100644
--- a/sample/list-group.dita
+++ b/sample/list-group.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/nav.dita b/sample/nav.dita
index 3eecdec1..0dda537a 100644
--- a/sample/nav.dita
+++ b/sample/nav.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/offline.dita b/sample/offline.dita
index 7b6991c8..0d63f623 100644
--- a/sample/offline.dita
+++ b/sample/offline.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/pagination.dita b/sample/pagination.dita
index a2483652..14de657d 100644
--- a/sample/pagination.dita
+++ b/sample/pagination.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/popovers.dita b/sample/popovers.dita
index 065bbb8e..d064b96f 100644
--- a/sample/popovers.dita
+++ b/sample/popovers.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/rtl.dita b/sample/rtl.dita
index b9e033af..7718dba0 100644
--- a/sample/rtl.dita
+++ b/sample/rtl.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/sass.dita b/sample/sass.dita
index 5fef0083..fe7bd94b 100644
--- a/sample/sass.dita
+++ b/sample/sass.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/scrollspy.dita b/sample/scrollspy.dita
index c4fb0fe3..9c491c99 100644
--- a/sample/scrollspy.dita
+++ b/sample/scrollspy.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!-- 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 (found at https://getbootstrap.com/docs/6.0), however DITA
+   6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
    markup is used throughout the examples describing how to implement these
    components correctly using outputclass. -->
 <topic id="scrollspy">
diff --git a/sample/search-box.dita b/sample/search-box.dita
index fdc8abe0..b1a8d254 100644
--- a/sample/search-box.dita
+++ b/sample/search-box.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/tables.dita b/sample/tables.dita
index fec4a7a8..f06be464 100644
--- a/sample/tables.dita
+++ b/sample/tables.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/tabs.dita b/sample/tabs.dita
index a64308ee..e7d8c8a7 100644
--- a/sample/tabs.dita
+++ b/sample/tabs.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/tooltips.dita b/sample/tooltips.dita
index 4be78411..1d0f141c 100644
--- a/sample/tooltips.dita
+++ b/sample/tooltips.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   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 (found at https://getbootstrap.com/docs/6.0), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
diff --git a/sample/typography.dita b/sample/typography.dita
index 2c39f30f..9f341082 100644
--- a/sample/typography.dita
+++ b/sample/typography.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!-- 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 (found at https://getbootstrap.com/docs/6.0), however DITA
+   6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
    markup is used throughout the examples describing how to implement these
    components correctly using outputclass. -->
 <topic id="typography">

From 7cedbe5ebc34ca7fa1545764e9ef1a3bc88d8ae5 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sun, 2 Aug 2026 11:00:39 +0200
Subject: [PATCH 27/87] Add v5/v6 builds to CI

---
 .github/dita-ot/html.xml |  2 +-
 .github/workflows/ci.yml | 23 ++++++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/.github/dita-ot/html.xml b/.github/dita-ot/html.xml
index 8bafb2eb..a10ff8da 100644
--- a/.github/dita-ot/html.xml
+++ b/.github/dita-ot/html.xml
@@ -27,7 +27,7 @@
       <param name="icons.include" value="yes"/>
       <param name="popovers.include" value="yes"/>
       <param name="dark.mode.include" value="yes"/>
-      <param name="css.theme.switcher" value="yes"/>
+      <param name="css.theme.switcher" value="no"/>
       <param name="open-graph.url" value="https://dita-bootstrap.github.io"/>
       <param name="twitter.site" value="@infotexture"/>
     </publication>
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 59ba2695..66029879 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -4,6 +4,8 @@ name: CI
     branches:
       - master
       - develop
+      - v5
+      - v6
   workflow_dispatch:
 
 jobs:
@@ -13,7 +15,6 @@ jobs:
     steps:
       - name: Git checkout
         uses: actions/checkout@v7
-
       - name: Calculate short SHA
         uses: benjlevesque/short-sha@v4.0
         id: short-sha
@@ -25,7 +26,6 @@ jobs:
       - run: echo $SHA
         env:
           SHA: ${{ env.SHA }}
-
       - name: Build Bootstrap
         uses: dita-ot/dita-ot-action@4.4
         with:
@@ -43,13 +43,26 @@ jobs:
             fox.jason.open-graph
             https://github.com/dita-bootstrap/dita-bootstrap.theme-switcher/archive/develop.zip
           project: .github/dita-ot/html.xml
-
+      # 1. Determine target directory dynamically based on current branch
+      - name: Determine target folder 📁
+        id: set-target
+        run: |
+          if [ "${{ github.ref_name }}" = "master" ] || [ "${{ github.ref_name }}" = "develop" ]; then
+            echo "target_dir=" >> $GITHUB_OUTPUT
+          else
+            echo "target_dir=${{ github.ref_name }}" >> $GITHUB_OUTPUT
+          fi
+      # 2. Deploy to the dynamically resolved folder
       - name: Deploy HTML 🚀
         uses: JamesIves/github-pages-deploy-action@v4.8.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           branch: gh-pages # The branch the action should deploy to.
           folder: out/html # The folder the action should deploy.
-          commit-message: '🚀 Deploy ${{ env.SHA }} to GitHub Pages'
+          target-folder: ${{ steps.set-target.outputs.target_dir }}
+          commit-message: '🚀 Deploy ${{ env.SHA }} to GitHub Pages (${{ github.ref_name }})'
           git-config-name: 'GitHub Action'
-          git-config-email: 'action@github.com'
+          # Prevent root deployments (master/develop) from cleaning versioned subfolders
+          clean-exclude: |
+            v5
+            v6

From 7509f99a90593206114b88e2da3fe84636a11d9b Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sun, 2 Aug 2026 11:13:09 +0200
Subject: [PATCH 28/87] Build with v6

---
 .github/workflows/ci.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 66029879..b434e1fe 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -36,8 +36,8 @@ jobs:
             nodejs -v
           plugins: |
             fox.jason.extend.css
-            https://github.com/dita-bootstrap/dita-bootstrap.html/archive/develop.zip
-            https://github.com/dita-bootstrap/dita-bootstrap.lunr/archive/develop.zip
+            https://github.com/dita-bootstrap/dita-bootstrap.html/archive/v6.zip
+            https://github.com/dita-bootstrap/dita-bootstrap.lunr/archive/v6.zip
             https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip
             fox.jason.favicon
             fox.jason.open-graph

From cdf796b7d8e5e2bbae485178863435a03d629775 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sun, 2 Aug 2026 11:18:47 +0200
Subject: [PATCH 29/87] Use gitref name

---
 .github/workflows/ci.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b434e1fe..733f2ed1 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -36,8 +36,8 @@ jobs:
             nodejs -v
           plugins: |
             fox.jason.extend.css
-            https://github.com/dita-bootstrap/dita-bootstrap.html/archive/v6.zip
-            https://github.com/dita-bootstrap/dita-bootstrap.lunr/archive/v6.zip
+            https://github.com/dita-bootstrap/dita-bootstrap.html/archive/${{ github.ref_name }}.zip
+            https://github.com/dita-bootstrap/dita-bootstrap.lunr/archive/${{ github.ref_name }}.zip
             https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip
             fox.jason.favicon
             fox.jason.open-graph

From 796b936b925dbce0da5ec30c51b9dcbd625c0a28 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sun, 2 Aug 2026 11:23:33 +0200
Subject: [PATCH 30/87] Use forked repo for testing.

---
 .github/workflows/ci.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 733f2ed1..eda90385 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -36,8 +36,8 @@ jobs:
             nodejs -v
           plugins: |
             fox.jason.extend.css
-            https://github.com/dita-bootstrap/dita-bootstrap.html/archive/${{ github.ref_name }}.zip
-            https://github.com/dita-bootstrap/dita-bootstrap.lunr/archive/${{ github.ref_name }}.zip
+            https://github.com/jason-fox/dita-bootstrap.html/archive/${{ github.ref_name }}.zip
+            https://github.com/jason-fox/dita-bootstrap.lunr/archive/${{ github.ref_name }}.zip
             https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip
             fox.jason.favicon
             fox.jason.open-graph

From 2bb8b10a39b0dc0014d8cd0b66d8bdfff878b59b Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sun, 2 Aug 2026 11:28:05 +0200
Subject: [PATCH 31/87] Generalise build

---
 .github/workflows/ci.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index eda90385..e50ae0e6 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -36,8 +36,8 @@ jobs:
             nodejs -v
           plugins: |
             fox.jason.extend.css
-            https://github.com/jason-fox/dita-bootstrap.html/archive/${{ github.ref_name }}.zip
-            https://github.com/jason-fox/dita-bootstrap.lunr/archive/${{ github.ref_name }}.zip
+            https://github.com/${{ github.repository_owner }}/dita-bootstrap.html/archive/${{ github.ref_name }}.zip
+            https://github.com/${{ github.repository_owner }}/dita-bootstrap.lunr/archive/${{ github.ref_name }}.zip
             https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip
             fox.jason.favicon
             fox.jason.open-graph

From 5f8f1792ca5bcd57efd07c97a44cb4695ad90488 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sun, 2 Aug 2026 12:27:16 +0200
Subject: [PATCH 32/87] Generalise further

---
 .github/workflows/ci.yml | 59 +++++++++++++++++++++++++++++++---------
 1 file changed, 46 insertions(+), 13 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e50ae0e6..3ad5b908 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -15,6 +15,7 @@ jobs:
     steps:
       - name: Git checkout
         uses: actions/checkout@v7
+
       - name: Calculate short SHA
         uses: benjlevesque/short-sha@v4.0
         id: short-sha
@@ -26,6 +27,44 @@ jobs:
       - run: echo $SHA
         env:
           SHA: ${{ env.SHA }}
+
+      # 1. Resolve Plugin URLs dynamically with fallback
+      - name: Resolve Plugin URLs 🔗
+        id: plugins
+        run: |
+          owner="${{ github.repository_owner }}"
+          ref="${{ github.ref_name }}"
+
+          # Function to check URL existence and return fallback on failure
+          get_plugin_url() {
+            local repo=$1
+            local target_url="https://github.com/${owner}/${repo}/archive/${ref}.zip"
+
+            # -s (silent), -f (fail on 4xx), -I (HEAD request), -L (follow redirects)
+            if curl -sfIL "$target_url" >/dev/null; then
+              echo "$target_url"
+            else
+              echo "https://github.com/dita-bootstrap/${repo}/archive/develop.zip"
+            fi
+          }
+
+          HTML_URL=$(get_plugin_url "dita-bootstrap.html")
+          LUNR_URL=$(get_plugin_url "dita-bootstrap.lunr")
+          THEME_URL=$(get_plugin_url "dita-bootstrap.theme-switcher")
+
+          # Generate multiline output list for the plugins
+          EOF=$(dd if=/dev/urandom bs=15 count=1 2>/dev/null | base64 | tr -dc 'a-zA-Z0-9')
+          echo "list<<$EOF" >> $GITHUB_OUTPUT
+          echo "fox.jason.extend.css" >> $GITHUB_OUTPUT
+          echo "$HTML_URL" >> $GITHUB_OUTPUT
+          echo "$LUNR_URL" >> $GITHUB_OUTPUT
+          echo "https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip" >> $GITHUB_OUTPUT
+          echo "fox.jason.favicon" >> $GITHUB_OUTPUT
+          echo "fox.jason.open-graph" >> $GITHUB_OUTPUT
+          echo "$THEME_URL" >> $GITHUB_OUTPUT
+          echo "$EOF" >> $GITHUB_OUTPUT
+
+      # 2. Build Bootstrap using the resolved list
       - name: Build Bootstrap
         uses: dita-ot/dita-ot-action@4.4
         with:
@@ -34,16 +73,10 @@ jobs:
             export DEBIAN_FRONTEND=noninteractive
             apt-get install -qy --no-install-recommends nodejs
             nodejs -v
-          plugins: |
-            fox.jason.extend.css
-            https://github.com/${{ github.repository_owner }}/dita-bootstrap.html/archive/${{ github.ref_name }}.zip
-            https://github.com/${{ github.repository_owner }}/dita-bootstrap.lunr/archive/${{ github.ref_name }}.zip
-            https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip
-            fox.jason.favicon
-            fox.jason.open-graph
-            https://github.com/dita-bootstrap/dita-bootstrap.theme-switcher/archive/develop.zip
+          plugins: ${{ steps.plugins.outputs.list }}
           project: .github/dita-ot/html.xml
-      # 1. Determine target directory dynamically based on current branch
+
+      # 3. Determine target folder dynamically based on current branch
       - name: Determine target folder 📁
         id: set-target
         run: |
@@ -52,17 +85,17 @@ jobs:
           else
             echo "target_dir=${{ github.ref_name }}" >> $GITHUB_OUTPUT
           fi
-      # 2. Deploy to the dynamically resolved folder
+
+      # 4. Deploy to the dynamically resolved folder
       - name: Deploy HTML 🚀
         uses: JamesIves/github-pages-deploy-action@v4.8.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          branch: gh-pages # The branch the action should deploy to.
-          folder: out/html # The folder the action should deploy.
+          branch: gh-pages
+          folder: out/html
           target-folder: ${{ steps.set-target.outputs.target_dir }}
           commit-message: '🚀 Deploy ${{ env.SHA }} to GitHub Pages (${{ github.ref_name }})'
           git-config-name: 'GitHub Action'
-          # Prevent root deployments (master/develop) from cleaning versioned subfolders
           clean-exclude: |
             v5
             v6

From 9ee8fa88cd4ecf4e8523c3d9164b36099bca02ae Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sun, 2 Aug 2026 12:43:26 +0200
Subject: [PATCH 33/87] Add badge

---
 .github/dita-ot/header.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml
index d2d8a335..5e54209d 100644
--- a/.github/dita-ot/header.xml
+++ b/.github/dita-ot/header.xml
@@ -23,7 +23,7 @@
             d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
           />
     </svg>
-      DITA Bootstrap
+      DITA Bootstrap <span class="badge theme-accent">v6</span>
     </a>
 
     <ul class="nav navbar-nav flex-row d-none lg:d-flex">

From 579dc65dda51472aef540cb31760dcb9d165a238 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sun, 2 Aug 2026 12:51:54 +0200
Subject: [PATCH 34/87] Tweak container

---
 .github/dita-ot/header.xml                | 2 +-
 xsl/dita2html5-bootstrapImpl_template.xsl | 2 +-
 xsl/dita2html5-legacy-3.0_template.xsl    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml
index 5e54209d..d48e9da1 100644
--- a/.github/dita-ot/header.xml
+++ b/.github/dita-ot/header.xml
@@ -23,7 +23,7 @@
             d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
           />
     </svg>
-      DITA Bootstrap <span class="badge theme-accent">v6</span>
+      DITA Bootstrap <span class="ps-1 badge theme-info">v6</span>
     </a>
 
     <ul class="nav navbar-nav flex-row d-none lg:d-flex">
diff --git a/xsl/dita2html5-bootstrapImpl_template.xsl b/xsl/dita2html5-bootstrapImpl_template.xsl
index e173a008..529959b6 100644
--- a/xsl/dita2html5-bootstrapImpl_template.xsl
+++ b/xsl/dita2html5-bootstrapImpl_template.xsl
@@ -16,7 +16,7 @@
   <!-- Whether to include a scrollspy Toc -->
   <xsl:param name="BOOTSTRAP_SCROLLSPY_TOC" select="'none'"/>
   <!-- Defines container class for main layout and menubar-TOC -->
-  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'lg:container'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'2xl:container'"/>
 
   <xsl:import href="plugin:org.dita.base:xsl/common/output-message.xsl"/>
   <xsl:import href="plugin:org.dita.base:xsl/common/dita-utilities.xsl"/>
diff --git a/xsl/dita2html5-legacy-3.0_template.xsl b/xsl/dita2html5-legacy-3.0_template.xsl
index b3bebe1c..c9c80a1a 100644
--- a/xsl/dita2html5-legacy-3.0_template.xsl
+++ b/xsl/dita2html5-legacy-3.0_template.xsl
@@ -16,7 +16,7 @@
   <!-- Whether to include a scrollspy Toc -->
   <xsl:param name="BOOTSTRAP_SCROLLSPY_TOC" select="'none'"/>
   <!-- Defines container class for main layout and menubar-TOC -->
-  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'lg:container'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'2xl:container'"/>
 
   <xsl:import href="plugin:org.dita.base:xsl/common/output-message.xsl"/>
   <xsl:import href="plugin:org.dita.base:xsl/common/dita-utilities.xsl"/>

From 361550ed1be6216cccd0f57752b6232a26517720 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sun, 2 Aug 2026 13:14:42 +0200
Subject: [PATCH 35/87] Tweak badge

---
 .github/dita-ot/header.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml
index d48e9da1..4d1e8381 100644
--- a/.github/dita-ot/header.xml
+++ b/.github/dita-ot/header.xml
@@ -23,7 +23,7 @@
             d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
           />
     </svg>
-      DITA Bootstrap <span class="ps-1 badge theme-info">v6</span>
+      DITA Bootstrap <span class="ms-1 badge bg-subtle-primary fg-primary">v6</span>
     </a>
 
     <ul class="nav navbar-nav flex-row d-none lg:d-flex">

From 1ffde1c64ca880f11f3cc13783097774d179cd09 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sun, 2 Aug 2026 13:22:59 +0200
Subject: [PATCH 36/87] formatting

---
 .github/dita-ot/header.xml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml
index 4d1e8381..41eecbd6 100644
--- a/.github/dita-ot/header.xml
+++ b/.github/dita-ot/header.xml
@@ -23,7 +23,9 @@
             d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
           />
     </svg>
-      DITA Bootstrap <span class="ms-1 badge bg-subtle-primary fg-primary">v6</span>
+      DITA Bootstrap <span
+          class="ms-1 badge bg-subtle-primary fg-primary"
+        >v6</span>
     </a>
 
     <ul class="nav navbar-nav flex-row d-none lg:d-flex">

From e610229edc37cc9a4a71b2b0eb47fd2818800475 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sun, 2 Aug 2026 13:40:35 +0200
Subject: [PATCH 37/87] Increase font-size

---
 .github/dita-ot/theme.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/dita-ot/theme.css b/.github/dita-ot/theme.css
index b373f998..f9b79914 100644
--- a/.github/dita-ot/theme.css
+++ b/.github/dita-ot/theme.css
@@ -39,6 +39,7 @@
   --bs-navbar-bg: var(--bs-primary-bg);
   --bs-navbar-color: var(--bs-primary-contrast);
   --bs-navbar-brand-color: var(--bs-primary-contrast);
+  --bs-navbar-brand-font-size: 1.25rem;
 }
 
 .nav-link {

From 8610534493014ff0551020765368d2deb3c49f6a Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sun, 2 Aug 2026 17:03:58 +0200
Subject: [PATCH 38/87] Amend CSS variables

---
 .github/dita-ot/theme.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/dita-ot/theme.css b/.github/dita-ot/theme.css
index f9b79914..59f374c3 100644
--- a/.github/dita-ot/theme.css
+++ b/.github/dita-ot/theme.css
@@ -18,20 +18,20 @@
 
 .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);
 }
 
 /* override parts of the Bootstrap color scheme */
 :root {
-  --bs-code-color: var(--bs-secondary-color);
+  --bs-code-color: var(--bs-secondary-contrast);
 }
 
 .navbar {

From 890eb0ed66c4fb9cdb7ced7a67e4e91dd7cea2b8 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Thu, 6 Aug 2026 16:50:41 +0200
Subject: [PATCH 39/87] Add import

---
 includes/bootstrap.hdf.xml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/includes/bootstrap.hdf.xml b/includes/bootstrap.hdf.xml
index f6922e2b..f2e9c1b7 100644
--- a/includes/bootstrap.hdf.xml
+++ b/includes/bootstrap.hdf.xml
@@ -12,8 +12,8 @@
     href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/dist/css/bootstrap.min.css"
     rel="stylesheet"
   />
-  <script
-    type="module"
-    src="https://corsproxy.io/?https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/assets/bootstrap.bundle.iT8eRQvy.js"
-  />
+  <script type="module">
+    import * as bootstrap from 'https://corsproxy.io/?url=https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/dist/js/bootstrap.bundle.min.js';
+    window.bootstrap = bootstrap;
+  </script>
 </div>

From af586cef1139c604889a10e3321abb79f6f4b7bb Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Thu, 6 Aug 2026 17:54:12 +0200
Subject: [PATCH 40/87] Update toggler and search CSS.

---
 .github/dita-ot/html.xml  |  1 +
 .github/dita-ot/theme.css | 12 ++++++++++++
 sample/search-box.dita    | 13 +++++++++++++
 3 files changed, 26 insertions(+)

diff --git a/.github/dita-ot/html.xml b/.github/dita-ot/html.xml
index a10ff8da..3668ad3d 100644
--- a/.github/dita-ot/html.xml
+++ b/.github/dita-ot/html.xml
@@ -28,6 +28,7 @@
       <param name="popovers.include" value="yes"/>
       <param name="dark.mode.include" value="yes"/>
       <param name="css.theme.switcher" value="no"/>
+      <param name="bootstrap.css.search.card" value="theme-primary"/>
       <param name="open-graph.url" value="https://dita-bootstrap.github.io"/>
       <param name="twitter.site" value="@infotexture"/>
     </publication>
diff --git a/.github/dita-ot/theme.css b/.github/dita-ot/theme.css
index 59f374c3..262b4e70 100644
--- a/.github/dita-ot/theme.css
+++ b/.github/dita-ot/theme.css
@@ -40,12 +40,24 @@
   --bs-navbar-color: var(--bs-primary-contrast);
   --bs-navbar-brand-color: var(--bs-primary-contrast);
   --bs-navbar-brand-font-size: 1.25rem;
+  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }
 
 .nav-link {
   --bs-nav-link-hover-color: var(--bs-primary-contrast);
 }
 
+.navbar-toggler {
+  color: var(--bs-navbar-color);
+  border-color: rgba(255, 255, 255, 0.15);
+  background-color: transparent;
+  transition: background-color 0.15s ease-in-out;
+}
+
+.navbar-toggler:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
 /* Make all CSS themes scrollable */
 .css-themes-list {
   height: calc(100vh - 6rem);
diff --git a/sample/search-box.dita b/sample/search-box.dita
index b1a8d254..d4ed374e 100644
--- a/sample/search-box.dita
+++ b/sample/search-box.dita
@@ -81,6 +81,19 @@
   <parmname>--args.hdr</parmname>=path/to/your-header.xml</codeblock>
     </section>
 
+    <section id="parameters">
+      <title>Parameters</title>
+      <p>The plug-in supports the following parameter:</p>
+      <parml>
+        <plentry>
+          <pt><parmname>--bootstrap.css.search.card</parmname></pt>
+          <pd>
+            <p>Specifies the Bootstrap CSS classes to append to the search results card component (e.g. <codeph>theme-primary</codeph> to color the card).</p>
+          </pd>
+        </plentry>
+      </parml>
+    </section>
+
     <section id="sample-header-navigation-bars">
       <title>Sample header navigation bars</title>
       <p>To add a search box to the menu bar, add a <xmlelement>form class="search-box"</xmlelement> element

From 3765e784a2eaf95d74032de7de37828844ec2f6e Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Fri, 7 Aug 2026 08:40:50 +0200
Subject: [PATCH 41/87] Update navbars

---
 .github/dita-ot/header.xml      | 69 ++++++++++++++++++++++-----------
 includes/dark-mode-toggler.js   | 10 ++++-
 includes/hdr.navbar.default.xml | 41 +++++++++-----------
 includes/hdr.navbar.example.xml | 41 +++++++++-----------
 sample/search-box.dita          |  3 +-
 5 files changed, 93 insertions(+), 71 deletions(-)

diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml
index 41eecbd6..fc9f510b 100644
--- a/.github/dita-ot/header.xml
+++ b/.github/dita-ot/header.xml
@@ -75,6 +75,11 @@
       </li>
     </ul>
     <ul class="nav navbar-nav flex-row d-none lg:d-flex ms-auto">
+      <li class="nav-item">
+        <a class="nav-link" href="https://github.com/dita-bootstrap/">
+            <i class="bi bi-github text-white"/>
+          </a>
+      </li>
       <!--
         This is a dark/light color theme toggler.
         It requires JavaScript to function.
@@ -88,36 +93,53 @@
             data-bs-toggle="menu"
             aria-expanded="false"
           >
-          <span class="d-light">
-            <i class="bi bi-brightness-high-fill"/>
-          </span>
-          <span class="d-dark">
-            <i class="bi bi-moon-stars-fill"/>
-          </span>
-          <span class="d-auto">
-            <i class="bi bi-circle-half"/>
-          </span>
+          <i class="bi bi-brightness-high-fill" data-bs-theme='light'/>
+          <i class="bi bi-moon-stars-fill" data-bs-theme='dark'/>
+          <i class="bi bi-circle-half" data-bs-theme='auto'/>
+          <i class="fs-xs bi bi-chevron-expand"/>
         </a>
         <div class="menu">
           <a href="#" class="menu-item" data-bs-theme-value="light">
-              <i class="bi bi-brightness-high-fill"/>
-              <span class="ms-2">Light</span>
-            </a>
-
-            <a href="#" class="menu-item" data-bs-theme-value="dark">
-              <i class="bi bi-moon-stars-fill"/>
-              <span class="ms-2">Dark</span>
-            </a>
-
-            <a href="#" class="menu-item" data-bs-theme-value="auto">
-              <i class="bi bi-circle-half"/>
-              <span class="ms-2">Auto</span>
-            </a>
+            <i class="bi bi-brightness-high-fill me-2"/>
+            Light
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
+          <a href="#" class="menu-item" data-bs-theme-value="dark">
+            <i class="bi bi-moon-stars-fill me-2"/>
+            Dark
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
+          <a href="#" class="menu-item" data-bs-theme-value="auto">
+            <i class="bi bi-circle-half me-2"/>
+            Auto
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
         </div>
-
       </li>
     </ul>
     <ul class="nav navbar-nav flex-row d-none lg:d-flex ms-0 me-1">
+      <li class="nav-item fs-xs">
+        <a
+            href="#"
+            class="nav-link"
+            id="bd-docs-version"
+            role="button"
+            data-bs-toggle="menu"
+            aria-expanded="false"
+          >
+          v6.0
+          <i class="bi bi-chevron-expand"/>
+        </a>
+        <div class="menu">
+          <a href="../v6" class="menu-item active selected">
+              v6.0
+              <i class="menu-item-check bi bi-check2 ms-auto"/>
+            </a>
+            <a href="../v5" class="menu-item">
+              v5.3
+            </a>
+        </div>
+      </li>
       <!--
         This is a css bootstrap theme toggler.
         It requires JavaScript to function.
@@ -132,6 +154,7 @@
             aria-expanded="false"
           >
           <i class="bi bi-filetype-css"/>
+          <i class="fs-xs bi bi-chevron-expand"/>
         </a>
         <div class="menu">
           <button
diff --git a/includes/dark-mode-toggler.js b/includes/dark-mode-toggler.js
index 52d7489e..54996093 100644
--- a/includes/dark-mode-toggler.js
+++ b/includes/dark-mode-toggler.js
@@ -36,17 +36,25 @@
       return;
     }
 
-    const activeThemeIcon = document.querySelector('.theme-icon-active use');
+    const activeThemeIcon = document.querySelector(`i[data-bs-theme="${theme}"]`);
     const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
 
     document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('selected');
       element.classList.remove('active');
       element.setAttribute('aria-pressed', 'false');
     });
 
+    btnToActive.classList.add('selected');
     btnToActive.classList.add('active');
     btnToActive.setAttribute('aria-pressed', 'true');
 
+    document.querySelectorAll('i[data-bs-theme]').forEach(element => {
+      element.classList.add('d-none');
+    });
+    activeThemeIcon.classList.remove('d-none');
+
+
     if (focus) {
       themeSwitcher.focus();
     }
diff --git a/includes/hdr.navbar.default.xml b/includes/hdr.navbar.default.xml
index 050b2ca4..516593af 100644
--- a/includes/hdr.navbar.default.xml
+++ b/includes/hdr.navbar.default.xml
@@ -51,33 +51,28 @@
             data-bs-toggle="menu"
             aria-expanded="false"
           >
-          <span class="d-light">
-            <i class="bi bi-brightness-high-fill"/>
-          </span>
-          <span class="d-dark">
-            <i class="bi bi-moon-stars-fill"/>
-          </span>
-          <span class="d-auto">
-            <i class="bi bi-circle-half"/>
-          </span>
+          <i class="bi bi-brightness-high-fill" data-bs-theme='light'/>
+          <i class="bi bi-moon-stars-fill" data-bs-theme='dark'/>
+          <i class="bi bi-circle-half" data-bs-theme='auto'/>
+          <i class="fs-xs bi bi-chevron-expand"/>
         </a>
         <div class="menu">
           <a href="#" class="menu-item" data-bs-theme-value="light">
-              <i class="bi bi-brightness-high-fill"/>
-              <span class="ms-2">Light</span>
-            </a>
-
-            <a href="#" class="menu-item" data-bs-theme-value="dark">
-              <i class="bi bi-moon-stars-fill"/>
-              <span class="ms-2">Dark</span>
-            </a>
-
-            <a href="#" class="menu-item" data-bs-theme-value="auto">
-              <i class="bi bi-circle-half"/>
-              <span class="ms-2">Auto</span>
-            </a>
+            <i class="bi bi-brightness-high-fill me-2"/>
+            Light
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
+          <a href="#" class="menu-item" data-bs-theme-value="dark">
+            <i class="bi bi-moon-stars-fill me-2"/>
+            Dark
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
+          <a href="#" class="menu-item" data-bs-theme-value="auto">
+            <i class="bi bi-circle-half me-2"/>
+            Auto
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
         </div>
-
       </li>
     </ul>
     <button
diff --git a/includes/hdr.navbar.example.xml b/includes/hdr.navbar.example.xml
index b8afdf7a..05338d75 100644
--- a/includes/hdr.navbar.example.xml
+++ b/includes/hdr.navbar.example.xml
@@ -51,33 +51,28 @@
             data-bs-toggle="menu"
             aria-expanded="false"
           >
-          <span class="d-light">
-            <i class="bi bi-brightness-high-fill"/>
-          </span>
-          <span class="d-dark">
-            <i class="bi bi-moon-stars-fill"/>
-          </span>
-          <span class="d-auto">
-            <i class="bi bi-circle-half"/>
-          </span>
+          <i class="bi bi-brightness-high-fill" data-bs-theme='light'/>
+          <i class="bi bi-moon-stars-fill" data-bs-theme='dark'/>
+          <i class="bi bi-circle-half" data-bs-theme='auto'/>
+          <i class="fs-xs bi bi-chevron-expand"/>
         </a>
         <div class="menu">
           <a href="#" class="menu-item" data-bs-theme-value="light">
-              <i class="bi bi-brightness-high-fill"/>
-              <span class="ms-2">Light</span>
-            </a>
-
-            <a href="#" class="menu-item" data-bs-theme-value="dark">
-              <i class="bi bi-moon-stars-fill"/>
-              <span class="ms-2">Dark</span>
-            </a>
-
-            <a href="#" class="menu-item" data-bs-theme-value="auto">
-              <i class="bi bi-circle-half"/>
-              <span class="ms-2">Auto</span>
-            </a>
+            <i class="bi bi-brightness-high-fill me-2"/>
+            Light
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
+          <a href="#" class="menu-item" data-bs-theme-value="dark">
+            <i class="bi bi-moon-stars-fill me-2"/>
+            Dark
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
+          <a href="#" class="menu-item" data-bs-theme-value="auto">
+            <i class="bi bi-circle-half me-2"/>
+            Auto
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
         </div>
-
       </li>
     </ul>
     <button
diff --git a/sample/search-box.dita b/sample/search-box.dita
index d4ed374e..48d7eaa6 100644
--- a/sample/search-box.dita
+++ b/sample/search-box.dita
@@ -88,7 +88,8 @@
         <plentry>
           <pt><parmname>--bootstrap.css.search.card</parmname></pt>
           <pd>
-            <p>Specifies the Bootstrap CSS classes to append to the search results card component (e.g. <codeph>theme-primary</codeph> to color the card).</p>
+            <p>Specifies the Bootstrap CSS classes to append to the search results card component (e.g. <codeph
+              >theme-primary</codeph> to color the card).</p>
           </pd>
         </plentry>
       </parml>

From 5dca709ef8122b19ae65b718e921dfd427b1828d Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Fri, 7 Aug 2026 11:45:33 +0200
Subject: [PATCH 42/87] Update CSS

---
 .github/dita-ot/theme.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/dita-ot/theme.css b/.github/dita-ot/theme.css
index 262b4e70..70018e42 100644
--- a/.github/dita-ot/theme.css
+++ b/.github/dita-ot/theme.css
@@ -49,8 +49,8 @@
 
 .navbar-toggler {
   color: var(--bs-navbar-color);
-  border-color: rgba(255, 255, 255, 0.15);
   background-color: transparent;
+  border-color: rgba(255, 255, 255, 0.15);
   transition: background-color 0.15s ease-in-out;
 }
 

From e867f9ff9680c6bb2534511a1a99dfefb6a1240c Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Fri, 7 Aug 2026 21:02:21 +0200
Subject: [PATCH 43/87] Generate v6 material theme.

---
 css/custom.css | 641 ++++++++++++++++++++++++++++++++-----------------
 1 file changed, 420 insertions(+), 221 deletions(-)

diff --git a/css/custom.css b/css/custom.css
index b2d70412..4fa54695 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
-@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');
-/* 
+@import url('https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/dist/css/bootstrap.min.css');
+/*
  * Material Design Theme for DITA Bootstrap
  * Based on Material Design 3 principles.
  * See https://m3.material.io/
@@ -14,35 +14,26 @@
 :root,
 [data-bs-theme='light'] {
     /* MDB Modern Color Palette */
-    --bs-primary: #3B71CA;
-    --bs-primary-rgb: 59, 113, 202;
-    --bs-secondary: #9FA6B2;
-    --bs-secondary-rgb: 159, 166, 178;
-    --bs-success: #14A44D;
-    --bs-success-rgb: 20, 164, 77;
-    --bs-info: #54B4D3;
-    --bs-info-rgb: 84, 180, 211;
-    --bs-warning: #E4A11B;
-    --bs-warning-rgb: 228, 161, 27;
-    --bs-danger: #DC4C64;
-    --bs-danger-rgb: 220, 76, 100;
-    --bs-light: #FBFBFB;
-    --bs-light-rgb: 251, 251, 251;
-    --bs-dark: #332D2D;
-    --bs-dark-rgb: 51, 45, 45;
+    --bs-primary-base: #3B71CA;
+    --bs-secondary-base: #9FA6B2;
+    --bs-success-base: #14A44D;
+    --bs-info-base: #54B4D3;
+    --bs-warning-base: #E4A11B;
+    --bs-danger-base: #DC4C64;
+    --bs-inverse-base: #332D2D;
 
     /* Mapping Standard Bootstrap Color Names to MDB */
-    --bs-blue: var(--bs-primary);
-    --bs-red: var(--bs-danger);
-    --bs-green: var(--bs-success);
-    --bs-yellow: var(--bs-warning);
-    --bs-cyan: var(--bs-info);
-    --bs-gray: var(--bs-secondary);
-    --bs-teal: #20c997;
-    --bs-orange: #fd7e14;
-    --bs-pink: #d63384;
-    --bs-indigo: #6610f2;
-    --bs-purple: #6f42c1;
+    --bs-blue-500: var(--bs-primary-base);
+    --bs-red-500: var(--bs-danger-base);
+    --bs-green-500: var(--bs-success-base);
+    --bs-yellow-500: var(--bs-warning-base);
+    --bs-cyan-500: var(--bs-info-base);
+    --bs-gray-500: var(--bs-secondary-base);
+    --bs-teal-500: #20c997;
+    --bs-orange-500: #fd7e14;
+    --bs-pink-500: #d63384;
+    --bs-indigo-500: #6610f2;
+    --bs-purple-500: #6f42c1;
 
     --bs-body-font-family: 'Roboto', sans-serif;
     --bs-body-font-size: 1rem;
@@ -60,9 +51,54 @@
     --bs-border-radius: 0.25rem;
     --bs-border-radius-sm: 0.125rem;
     --bs-border-radius-lg: 0.5rem;
-}
 
-[data-bs-theme='dark'] {
+    /* Override Bootstrap v6 theme color variables for MDB */
+    --bs-primary-bg: var(--bs-primary-base);
+    --bs-primary-fg: var(--bs-primary-base);
+    --bs-primary-border: var(--bs-primary-base);
+
+    --bs-secondary-bg: var(--bs-secondary-base);
+    --bs-secondary-fg: var(--bs-secondary-base);
+    --bs-secondary-border: var(--bs-secondary-base);
+    --bs-secondary-contrast: var(--bs-white);
+
+    --bs-success-bg: var(--bs-success-base);
+    --bs-success-fg: var(--bs-success-base);
+    --bs-success-border: var(--bs-success-base);
+
+    --bs-danger-bg: var(--bs-danger-base);
+    --bs-danger-fg: var(--bs-danger-base);
+    --bs-danger-border: var(--bs-danger-base);
+
+    --bs-warning-bg: var(--bs-warning-base);
+    --bs-warning-fg: var(--bs-warning-base);
+    --bs-warning-border: var(--bs-warning-base);
+
+    --bs-info-bg: var(--bs-info-base);
+    --bs-info-fg: var(--bs-info-base);
+    --bs-info-border: var(--bs-info-base);
+
+    --bs-accent-base: color-mix(in oklch, var(--bs-primary-base), var(--bs-warning-base));
+    --bs-accent-bg: var(--bs-accent-base);
+    --bs-accent-fg: var(--bs-accent-base);
+    --bs-accent-border: var(--bs-accent-base);
+    --bs-accent-contrast: var(--bs-white);
+
+    --bs-inverse-bg: var(--bs-inverse-base);
+    --bs-inverse-fg: var(--bs-inverse-base);
+    --bs-inverse-border: var(--bs-inverse-base);
+
+    /* Explicit Contrast Colors for Light Theme */
+    --bs-primary-contrast: var(--bs-white);
+    --bs-secondary-contrast: var(--bs-white);
+    --bs-success-contrast: var(--bs-white);
+    --bs-danger-contrast: var(--bs-white);
+    --bs-warning-contrast: #000;
+    --bs-info-contrast: #000;
+    --bs-inverse-contrast: var(--bs-white);
+}
+
+:root[data-bs-theme='dark'] {
     --bs-body-bg: #121212;
     --bs-body-color: #eee;
     --bs-secondary-color: #b2b2b2;
@@ -70,20 +106,55 @@
     --bs-emphasis-color: #fff;
     --bs-border-color: #404040;
 
-    --bs-primary: #8ab4f8;
-    /* Lighter variant of MDB Primary #3B71CA */
-    --bs-primary-rgb: 138, 180, 248;
-
-    --bs-card-bg: #262626;
-    --bs-card-border-color: #404040;
-    --bs-card-cap-bg: #2d2d2d;
-
-    --bs-list-group-bg: #262626;
-    --bs-list-group-border-color: #404040;
-    --bs-list-group-action-hover-bg: #333;
-
-    --bs-nav-link-color: #eee;
-    --bs-nav-link-hover-color: #fff;
+    /* Lighter MDB palette, tuned for contrast against #121212 / #262626 card bg */
+    --bs-primary-base: #8ab4f8;
+    --bs-secondary-base: #ced4da;
+    --bs-success-base: #66bb6a;
+    --bs-info-base: #4fc3f7;
+    --bs-warning-base: #ffca28;
+    --bs-danger-base: #f06292;
+    --bs-accent-base: #e699c2;
+    --bs-inverse-base: #eeeeee;
+
+    --bs-primary-bg: var(--bs-primary-base);
+    --bs-primary-fg: var(--bs-primary-base);
+    --bs-primary-border: var(--bs-primary-base);
+
+    --bs-secondary-bg: var(--bs-secondary-base);
+    --bs-secondary-fg: var(--bs-secondary-base);
+    --bs-secondary-border: var(--bs-secondary-base);
+
+    --bs-success-bg: var(--bs-success-base);
+    --bs-success-fg: var(--bs-success-base);
+    --bs-success-border: var(--bs-success-base);
+
+    --bs-danger-bg: var(--bs-danger-base);
+    --bs-danger-fg: var(--bs-danger-base);
+    --bs-danger-border: var(--bs-danger-base);
+
+    --bs-warning-bg: var(--bs-warning-base);
+    --bs-warning-fg: var(--bs-warning-base);
+    --bs-warning-border: var(--bs-warning-base);
+
+    --bs-info-bg: var(--bs-info-base);
+    --bs-info-fg: var(--bs-info-base);
+    --bs-info-border: var(--bs-info-base);
+
+    --bs-accent-bg: var(--bs-accent-base);
+    --bs-accent-fg: var(--bs-accent-base);
+    --bs-accent-border: var(--bs-accent-base);
+
+    --bs-inverse-bg: var(--bs-inverse-base);
+    --bs-inverse-fg: var(--bs-inverse-base);
+    --bs-inverse-border: var(--bs-inverse-base);
+
+    /* All dark bases are light tints, so they need dark (not white) contrast text */
+    --bs-primary-contrast: #000;
+    --bs-secondary-contrast: #000;
+    --bs-success-contrast: #000;
+    --bs-danger-contrast: #000;
+    --bs-accent-contrast: #000;
+    --bs-inverse-contrast: #212121;
 
     /* Dark mode specific shadows - deeper and darker */
     --shadow-1: 0 2px 5px 0 rgba(0, 0, 0, 0.5), 0 2px 10px 0 rgba(0, 0, 0, 0.4);
@@ -93,48 +164,55 @@
     color: var(--bs-body-color);
 }
 
-[data-bs-theme='dark'] .alert-primary,
-[data-bs-theme='dark'] .note.note-primary {
+[data-bs-theme='dark'] .alert.theme-primary,
+[data-bs-theme='dark'] .note.theme-primary {
     background-color: rgba(59, 113, 202, 0.2);
     color: #8ab4f8;
     border: 1px solid rgba(59, 113, 202, 0.4) !important;
 }
 
-[data-bs-theme='dark'] .alert-secondary,
-[data-bs-theme='dark'] .note.note-secondary {
+[data-bs-theme='dark'] .alert.theme-secondary,
+[data-bs-theme='dark'] .note.theme-secondary {
     background-color: rgba(159, 166, 178, 0.2);
     color: #ced4da;
     border: 1px solid rgba(159, 166, 178, 0.4) !important;
 }
 
-[data-bs-theme='dark'] .alert-success,
-[data-bs-theme='dark'] .note.note-success {
+[data-bs-theme='dark'] .alert.theme-success,
+[data-bs-theme='dark'] .note.theme-success {
     background-color: rgba(20, 164, 77, 0.2);
     color: #66bb6a;
     border: 1px solid rgba(20, 164, 77, 0.4) !important;
 }
 
-[data-bs-theme='dark'] .alert-danger,
-[data-bs-theme='dark'] .note.note-danger {
+[data-bs-theme='dark'] .alert.theme-danger,
+[data-bs-theme='dark'] .note.theme-danger {
     background-color: rgba(220, 76, 100, 0.2);
     color: #f06292;
     border: 1px solid rgba(220, 76, 100, 0.4) !important;
 }
 
-[data-bs-theme='dark'] .alert-warning,
-[data-bs-theme='dark'] .note.note-warning {
+[data-bs-theme='dark'] .alert.theme-warning,
+[data-bs-theme='dark'] .note.theme-warning {
     background-color: rgba(228, 161, 27, 0.2);
     color: #ffca28;
     border: 1px solid rgba(228, 161, 27, 0.4) !important;
 }
 
-[data-bs-theme='dark'] .alert-info,
-[data-bs-theme='dark'] .note.note-info {
+[data-bs-theme='dark'] .alert.theme-info,
+[data-bs-theme='dark'] .note.theme-info {
     background-color: rgba(84, 180, 211, 0.2);
     color: #4fc3f7;
     border: 1px solid rgba(84, 180, 211, 0.4) !important;
 }
 
+[data-bs-theme='dark'] .alert.theme-accent,
+[data-bs-theme='dark'] .note.theme-accent {
+    background-color: rgba(210, 102, 160, 0.2);
+    color: #e699c2;
+    border: 1px solid rgba(210, 102, 160, 0.4) !important;
+}
+
 body {
     background-color: var(--bs-body-bg, #fafafa);
     color: var(--bs-body-color, #212121);
@@ -161,20 +239,24 @@ h6 {
     border-radius: 0.5rem;
 }
 
+/* v6's card-body is a flex column, which blockifies inline children like
+   .card-link — forcing each link onto its own row. Revert to block flow. */
+.card-body {
+    display: block;
+}
+
 .card:hover {
     box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 15px 35px -5px rgba(0, 0, 0, 0.05);
 }
 
 .card-header {
     padding: 0.75rem 1.5rem !important;
-    background-color: transparent !important;
     border-bottom: 2px solid #f5f5f5 !important;
     font-weight: 400 !important;
 }
 
 .card-footer {
     padding: 0.75rem 1.5rem !important;
-    background-color: transparent !important;
     border-top: 2px solid #f5f5f5 !important;
 }
 
@@ -186,8 +268,32 @@ h6 {
     border-top-color: rgba(255, 255, 255, 0.1) !important;
 }
 
+/* 3a. Themed Cards overrides for theme-* and alert-* output classes */
+.card[class*="theme-"],
+.card[class*="alert-"] {
+    border: 1px solid var(--bs-theme-border) !important;
+}
+
+.card[class*="theme-"] .card-header,
+.card[class*="alert-"] .card-header {
+    background-color: var(--bs-theme-bg) !important;
+    color: var(--bs-theme-contrast) !important;
+    border-bottom: none !important;
+}
+
+.card[class*="theme-"] .card-footer,
+.card[class*="alert-"] .card-footer {
+    background-color: var(--bs-theme-bg-subtle) !important;
+    color: var(--bs-theme-fg) !important;
+    border-top: 1px solid var(--bs-theme-border) !important;
+}
+
+
 /* 4. Material Buttons */
-.btn {
+.btn,
+.btn-solid,
+.btn-outline {
+    min-height: 2.25rem;
     text-transform: uppercase;
     font-weight: 500;
     font-size: 0.75rem;
@@ -198,101 +304,114 @@ h6 {
     border: none;
     border-radius: var(--bs-border-radius);
 }
+.btn.btn-icon,
+.btn-icon {
+    padding: 0;
+    width: var(--bs-btn-min-height, 2.375rem);
+    height: var(--bs-btn-min-height, 2.375rem);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
 
-.btn-outline-primary {
-    --bs-btn-color: var(--bs-primary);
-    --bs-btn-border-color: var(--bs-primary);
-    --bs-btn-hover-color: var(--bs-primary);
+.btn-outline.theme-primary{
+    --bs-btn-color: var(--bs-primary-base);
+    --bs-btn-border-color: var(--bs-primary-base);
+    --bs-btn-hover-color: var(--bs-primary-base);
     --bs-btn-hover-bg: rgba(59, 113, 202, 0.1);
-    --bs-btn-hover-border-color: var(--bs-primary);
+    --bs-btn-hover-border-color: var(--bs-primary-base);
     --bs-btn-active-bg: rgba(59, 113, 202, 0.2);
-    --bs-btn-active-color: var(--bs-primary);
-    border: 2px solid var(--bs-primary) !important;
+    --bs-btn-active-color: var(--bs-primary-base);
+    border: 2px solid var(--bs-primary-base) !important;
 }
 
-.btn-outline-secondary {
-    --bs-btn-color: var(--bs-secondary);
-    --bs-btn-border-color: var(--bs-secondary);
-    --bs-btn-hover-color: var(--bs-secondary);
+.btn-outline.theme-secondary{
+    --bs-btn-color: var(--bs-secondary-base);
+    --bs-btn-border-color: var(--bs-secondary-base);
+    --bs-btn-hover-color: var(--bs-secondary-base);
     --bs-btn-hover-bg: rgba(159, 166, 178, 0.1);
-    --bs-btn-active-color: var(--bs-secondary);
+    --bs-btn-active-color: var(--bs-secondary-base);
     --bs-btn-active-bg: rgba(159, 166, 178, 0.2);
-    border: 2px solid var(--bs-secondary) !important;
+    border: 2px solid var(--bs-secondary-base) !important;
 }
 
-.btn-outline-success {
-    --bs-btn-color: var(--bs-success);
-    --bs-btn-border-color: var(--bs-success);
-    --bs-btn-hover-color: var(--bs-success);
+.btn-outline.theme-success{
+    --bs-btn-color: var(--bs-success-base);
+    --bs-btn-border-color: var(--bs-success-base);
+    --bs-btn-hover-color: var(--bs-success-base);
     --bs-btn-hover-bg: rgba(20, 164, 77, 0.1);
-    --bs-btn-active-color: var(--bs-success);
+    --bs-btn-active-color: var(--bs-success-base);
     --bs-btn-active-bg: rgba(20, 164, 77, 0.2);
-    border: 2px solid var(--bs-success) !important;
+    border: 2px solid var(--bs-success-base) !important;
 }
 
-.btn-outline-danger {
-    --bs-btn-color: var(--bs-danger);
-    --bs-btn-border-color: var(--bs-danger);
-    --bs-btn-hover-color: var(--bs-danger);
+.btn-outline.theme-danger{
+    --bs-btn-color: var(--bs-danger-base);
+    --bs-btn-border-color: var(--bs-danger-base);
+    --bs-btn-hover-color: var(--bs-danger-base);
     --bs-btn-hover-bg: rgba(220, 76, 100, 0.1);
-    --bs-btn-active-color: var(--bs-danger);
+    --bs-btn-active-color: var(--bs-danger-base);
     --bs-btn-active-bg: rgba(220, 76, 100, 0.2);
-    border: 2px solid var(--bs-danger) !important;
+    border: 2px solid var(--bs-danger-base) !important;
 }
 
-.btn-outline-warning {
-    --bs-btn-color: var(--bs-warning);
-    --bs-btn-border-color: var(--bs-warning);
-    --bs-btn-hover-color: var(--bs-warning);
+.btn-outline.theme-warning{
+    --bs-btn-color: var(--bs-warning-base);
+    --bs-btn-border-color: var(--bs-warning-base);
+    --bs-btn-hover-color: var(--bs-warning-base);
     --bs-btn-hover-bg: rgba(228, 161, 27, 0.1);
-    --bs-btn-active-color: var(--bs-warning);
+    --bs-btn-active-color: var(--bs-warning-base);
     --bs-btn-active-bg: rgba(228, 161, 27, 0.2);
-    border: 2px solid var(--bs-warning) !important;
+    border: 2px solid var(--bs-warning-base) !important;
 }
 
-.btn-outline-info {
-    --bs-btn-color: var(--bs-info);
-    --bs-btn-border-color: var(--bs-info);
-    --bs-btn-hover-color: var(--bs-info);
+.btn-outline.theme-info{
+    --bs-btn-color: var(--bs-info-base);
+    --bs-btn-border-color: var(--bs-info-base);
+    --bs-btn-hover-color: var(--bs-info-base);
     --bs-btn-hover-bg: rgba(84, 180, 211, 0.1);
-    --bs-btn-active-color: var(--bs-info);
+    --bs-btn-active-color: var(--bs-info-base);
     --bs-btn-active-bg: rgba(84, 180, 211, 0.2);
-    border: 2px solid var(--bs-info) !important;
-}
-
-.btn-outline-light {
-    --bs-btn-color: #616161;
-    --bs-btn-border-color: #eee;
-    --bs-btn-hover-color: #616161;
-    --bs-btn-hover-bg: rgba(0, 0, 0, 0.02);
-    --bs-btn-active-color: #616161;
-    --bs-btn-active-bg: rgba(0, 0, 0, 0.04);
-    border: 2px solid #eee !important;
+    border: 2px solid var(--bs-info-base) !important;
 }
 
-[data-bs-theme='dark'] .btn-outline-light {
-    --bs-btn-color: #fbfbfb;
-    --bs-btn-border-color: #fbfbfb;
+.btn-outline.theme-accent{
+    --bs-btn-color: var(--bs-accent-base);
+    --bs-btn-border-color: var(--bs-accent-base);
+    --bs-btn-hover-color: var(--bs-accent-base);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-accent-base) 10%, transparent);
+    --bs-btn-hover-border-color: var(--bs-accent-base);
+    --bs-btn-active-bg: color-mix(in srgb, var(--bs-accent-base) 20%, transparent);
+    --bs-btn-active-color: var(--bs-accent-base);
+    border: 2px solid var(--bs-accent-base) !important;
 }
 
-.btn-outline-dark {
-    --bs-btn-color: var(--bs-dark);
-    --bs-btn-border-color: var(--bs-dark);
-    --bs-btn-hover-color: var(--bs-dark);
+.btn-outline.theme-inverse{
+    --bs-btn-color: var(--bs-inverse-base);
+    --bs-btn-border-color: var(--bs-inverse-base);
+    --bs-btn-hover-color: var(--bs-inverse-base);
     --bs-btn-hover-bg: rgba(0, 0, 0, 0.05);
-    --bs-btn-active-color: var(--bs-dark);
+    --bs-btn-active-color: var(--bs-inverse-base);
     --bs-btn-active-bg: rgba(0, 0, 0, 0.1);
-    border: 2px solid var(--bs-dark) !important;
+    border: 2px solid var(--bs-inverse-base) !important;
 }
 
+.btn-outline.theme-primary:hover,
 .btn-outline-primary:hover,
+.btn-outline.theme-secondary:hover,
 .btn-outline-secondary:hover,
+.btn-outline.theme-success:hover,
 .btn-outline-success:hover,
+.btn-outline.theme-danger:hover,
 .btn-outline-danger:hover,
+.btn-outline.theme-warning:hover,
 .btn-outline-warning:hover,
+.btn-outline.theme-info:hover,
 .btn-outline-info:hover,
-.btn-outline-light:hover,
-.btn-outline-dark:hover {
+.btn-outline.theme-accent:hover,
+.btn-outline-accent:hover,
+.btn-outline.theme-inverse:hover,
+.btn-outline-inverse:hover {
     box-shadow: 0 8px 9px -4px rgba(0, 0, 0, 0.15), 0 4px 18px 0 rgba(0, 0, 0, 0.1) !important;
     transform: translateY(0);
     /* MDB outline buttons don't usually lift as much as solid */
@@ -306,6 +425,8 @@ h6 {
     border-radius: 0.27rem;
     text-transform: uppercase;
     letter-spacing: 0.02rem;
+    color: var(--bs-theme-contrast, inherit);
+    background-color: var(--bs-theme-bg, var(--bs-badge-bg));
 }
 
 .badge-pill {
@@ -314,23 +435,6 @@ h6 {
     padding-right: 0.8em;
 }
 
-/* 13. Carousel (MDB Style Indicators & Captions) */
-.carousel-indicators [data-bs-target] {
-    width: 30px;
-    height: 4px;
-    border-radius: 0;
-    background-color: #fff;
-    opacity: 0.5;
-    transition: opacity 0.6s ease;
-}
-
-.carousel-indicators .active {
-    opacity: 1;
-}
-
-.carousel-caption {
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-}
 
 /* 14. List Group (Material Style) */
 .list-group {
@@ -355,11 +459,11 @@ h6 {
 }
 
 .list-group-item.active {
-    background-color: var(--bs-primary) !important;
-    border-color: var(--bs-primary) !important;
+    background-color: var(--bs-primary-base) !important;
+    border-color: var(--bs-primary-base) !important;
 }
 
-list-group-flush {
+.list-group-flush {
     border: none;
 }
 
@@ -375,14 +479,14 @@ list-group-flush {
     transform: translateY(0);
 }
 
-.btn-lg {
+.btn-lg:not(.btn-icon) {
     padding: 0.75rem 1.625rem 0.625rem;
     font-size: 0.875rem;
     line-height: 1.5;
     border-radius: var(--bs-border-radius-lg);
 }
 
-.btn-sm {
+.btn-sm:not(.btn-icon) {
     padding: 0.375rem 1rem 0.3125rem;
     font-size: 0.625rem;
     line-height: 1.5;
@@ -399,26 +503,9 @@ list-group-flush {
     transform: none;
 }
 
-/* 5. FIX: Carousel Icons (Restoring standard Bootstrap SVGs) */
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
-    width: 2.5rem;
-    height: 2.5rem;
-    background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 50%;
-    background-size: 60%;
-}
-
-.carousel-control-prev-icon {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
-}
-
-.carousel-control-next-icon {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-}
 
 /* 6. FIX: Offcanvas (Ensuring clean Material slide-out) */
-.offcanvas {
+.drawer {
     box-shadow: var(--shadow-3);
     border: none;
 }
@@ -430,7 +517,11 @@ list-group-flush {
     --bs-nav-link-hover-color: #757575;
     --bs-nav-link-disabled-color: #9e9e9e;
     --bs-nav-pills-link-active-color: #fff;
-    --bs-nav-pills-link-active-bg: var(--bs-primary);
+    --bs-nav-pills-link-active-bg: var(--bs-primary-base);
+    /* v6 defaults both of these to var(--bs-radius-9) (1.5rem, a full pill shape) for
+       the track and the active link alike. Match our own button radius instead. */
+    --bs-nav-pills-border-radius: var(--bs-border-radius);
+    --bs-nav-pills-link-border-radius: var(--bs-border-radius);
 }
 
 .nav-pills .nav-link {
@@ -445,7 +536,7 @@ list-group-flush {
 
 .nav-pills .nav-link.active,
 .nav-pills .show>.nav-link {
-    background-color: var(--bs-primary) !important;
+    background-color: var(--bs-primary-base) !important;
     box-shadow: var(--shadow-1) !important;
     color: #fff !important;
 }
@@ -483,10 +574,6 @@ list-group-flush {
     /* Increased gap to content */
 }
 
-.carousel-indicators .btn {
-   box-shadow: none;
-}
-
 .nav-tabs .nav-link {
     text-transform: uppercase !important;
     font-weight: 500 !important;
@@ -509,9 +596,9 @@ list-group-flush {
 }
 
 .nav-tabs .nav-link.active {
-    color: var(--bs-primary) !important;
+    color: var(--bs-primary-base) !important;
     background-color: transparent !important;
-    border-bottom: 2px solid var(--bs-primary) !important;
+    border-bottom: 2px solid var(--bs-primary-base) !important;
 }
 
 [data-bs-theme='dark'] .nav-pills .nav-link.active {
@@ -519,7 +606,7 @@ list-group-flush {
 }
 
 [data-bs-theme='dark'] .nav-tabs .nav-link.active {
-    color: var(--bs-primary) !important;
+    color: var(--bs-primary-base) !important;
 }
 
 /* 9. Alerts & Notes (DITA Notes) */
@@ -543,57 +630,73 @@ list-group-flush {
     border-left: 6px solid !important
 }
 
-.alert-primary,
-.note.note-primary {
+.alert.theme-primary,
+.note.theme-primary,
+.alert.alert-primary,
+.note.alert-primary {
     background-color: #E2EAF7;
     color: #2F5AA2;
     border-left-color: #2F5AA2 !important;
 }
 
-.alert-secondary,
-.note.note-secondary {
+.alert.theme-secondary,
+.note.theme-secondary,
+.alert.alert-secondary,
+.note.alert-secondary {
     background-color: #f5f5f5;
     color: #424242;
     border-left-color: #424242 !important;
 }
 
-.alert-success,
-.note.note-success {
+.alert.theme-success,
+.note.theme-success,
+.alert.alert-success,
+.note.alert-success {
     background-color: #E1F0E5;
     color: #1B5E20;
     border-left-color: #1B5E20 !important;
 }
 
-.alert-danger,
-.note.note-danger {
+.alert.theme-danger,
+.note.theme-danger,
+.alert.alert-danger,
+.note.alert-danger {
     background-color: #F9E3E8;
     color: #B71C1C;
     border-left-color: #B71C1C !important;
 }
 
-.alert-warning,
-.note.note-warning {
+.alert.theme-warning,
+.note.theme-warning,
+.alert.alert-warning,
+.note.alert-warning {
     background-color: #FBF1DD;
     color: #896110;
     border-left-color: #896110 !important;
 }
 
-.alert-info,
-.note.note-info {
+.alert.theme-info,
+.note.theme-info,
+.alert.alert-info,
+.note.alert-info {
     background-color: #E8F5FD;
     color: #0D47A1;
     border-left-color: #0D47A1 !important;
 }
 
-.alert-light,
-.note.note-light {
-    background-color: #fafafa;
-    color: #616161;
-    border-left-color: #bdbdbd !important;
+.alert.theme-accent,
+.note.theme-accent,
+.alert.alert-accent,
+.note.alert-accent {
+    background-color: color-mix(in srgb, var(--bs-accent-base) 10%, #fff);
+    color: color-mix(in srgb, var(--bs-accent-base) 65%, #000);
+    border-left-color: color-mix(in srgb, var(--bs-accent-base) 65%, #000) !important;
 }
 
-.alert-dark,
-.note.note-dark {
+.alert.theme-inverse,
+.note.theme-inverse,
+.alert.alert-inverse,
+.note.alert-inverse {
     background-color: #eeeeee;
     color: #212121;
     border-left-color: #212121 !important;
@@ -606,10 +709,24 @@ list-group-flush {
 /* 10. Navigation & App Bar */
 .navbar {
     box-shadow: var(--shadow-1);
-    background-color: var(--bs-primary) !important;
+    background-color: var(--bs-primary-base) !important;
+}
+
+/* .navbar always sits on --bs-primary-base regardless of theme, but Bootstrap's own
+   nav-link/brand colors (default and hover) are tuned for a dark-mode navbar that's
+   actually dark, and a light-mode navbar bg that's white. Ours never is either, since
+   it always carries the brand color, so pin both states to the color already tuned to
+   read well against --bs-primary-base: --bs-primary-contrast. */
+.navbar .nav-link,
+.navbar .nav-link:hover,
+.navbar .nav-link:focus,
+.navbar-brand,
+.navbar-brand:hover,
+.navbar-brand:focus {
+    color: var(--bs-primary-contrast);
 }
 
-.navbar-dark .navbar-nav .nav-link {
+.navbar-inverse .navbar-nav .nav-link {
     color: rgba(255, 255, 255, 0.85);
     font-weight: 500;
     text-transform: uppercase;
@@ -625,19 +742,15 @@ list-group-flush {
 .form-floating>.form-control:focus~label,
 .form-floating>.form-control:not(:placeholder-shown)~label,
 .form-floating>.form-select~label {
-    color: var(--bs-primary);
+    color: var(--bs-primary-base);
     opacity: 1;
 }
 
 .form-control:focus {
-    border-color: var(--bs-primary);
-    box-shadow: inset 0 0 0 1px var(--bs-primary);
+    border-color: var(--bs-primary-base);
+    box-shadow: inset 0 0 0 1px var(--bs-primary-base);
 }
 
-/* 9. Selection & Focus */
-::selection {
-    background: rgba(var(--bs-primary-rgb), 0.2);
-}
 
 /* 10. Table Enhancements */
 .table {
@@ -654,84 +767,170 @@ list-group-flush {
 }
 
 /* 11. Explicit Color Overrides to ensure MDB colors take precedence */
+.btn-solid.theme-primary,
 .btn-primary {
-    --bs-btn-bg: var(--bs-primary);
-    --bs-btn-border-color: var(--bs-primary);
+    --bs-btn-bg: var(--bs-primary-base);
+    --bs-btn-border-color: var(--bs-primary-base);
+    --bs-btn-color: var(--bs-primary-contrast);
     --bs-btn-hover-bg: #0b51c5;
     --bs-btn-hover-border-color: #0a4ab4;
 }
 
+.btn-solid.theme-secondary,
 .btn-secondary {
-    --bs-btn-bg: var(--bs-secondary);
-    --bs-btn-border-color: var(--bs-secondary);
+    --bs-btn-bg: var(--bs-secondary-base);
+    --bs-btn-border-color: var(--bs-secondary-base);
+    --bs-btn-color: var(--bs-secondary-contrast);
+    --bs-btn-hover-bg: #8c939e;
+    --bs-btn-hover-border-color: #858c97;
 }
 
+.btn-solid.theme-success,
 .btn-success {
-    --bs-btn-bg: var(--bs-success);
-    --bs-btn-border-color: var(--bs-success);
+    --bs-btn-bg: var(--bs-success-base);
+    --bs-btn-border-color: var(--bs-success-base);
+    --bs-btn-color: var(--bs-success-contrast);
+    --bs-btn-hover-bg: #118b41;
+    --bs-btn-hover-border-color: #0f803c;
 }
 
+.btn-solid.theme-danger,
 .btn-danger {
-    --bs-btn-bg: var(--bs-danger);
-    --bs-btn-border-color: var(--bs-danger);
+    --bs-btn-bg: var(--bs-danger-base);
+    --bs-btn-border-color: var(--bs-danger-base);
+    --bs-btn-color: var(--bs-danger-contrast);
+    --bs-btn-hover-bg: #bd364d;
+    --bs-btn-hover-border-color: #b33045;
 }
 
+.btn-solid.theme-warning,
 .btn-warning {
-    --bs-btn-bg: var(--bs-warning);
-    --bs-btn-border-color: var(--bs-warning);
-    --bs-btn-color: #000;
+    --bs-btn-bg: var(--bs-warning-base);
+    --bs-btn-border-color: var(--bs-warning-base);
+    --bs-btn-color: var(--bs-warning-contrast);
+    --bs-btn-hover-bg: #ecb33b;
+    --bs-btn-hover-border-color: #eab033;
 }
 
+.btn-solid.theme-info,
 .btn-info {
-    --bs-btn-bg: var(--bs-info);
-    --bs-btn-border-color: var(--bs-info);
-    --bs-btn-color: #000;
+    --bs-btn-bg: var(--bs-info-base);
+    --bs-btn-border-color: var(--bs-info-base);
+    --bs-btn-color: var(--bs-info-contrast);
+    --bs-btn-hover-bg: #3da8cb;
+    --bs-btn-hover-border-color: #359ec0;
+}
+
+.btn-solid.theme-accent,
+.btn-accent {
+    --bs-btn-bg: var(--bs-accent-base);
+    --bs-btn-border-color: var(--bs-accent-base);
+    --bs-btn-color: var(--bs-accent-contrast);
+    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-accent-base), var(--bs-white) 15%);
+    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-accent-base), var(--bs-white) 10%);
+}
+
+.btn-solid.theme-inverse,
+.btn-inverse {
+    --bs-btn-bg: var(--bs-inverse-base);
+    --bs-btn-border-color: var(--bs-inverse-base);
+    --bs-btn-color: var(--bs-inverse-contrast);
+    --bs-btn-hover-bg: #4c4444;
+    --bs-btn-hover-border-color: #463f3f;
+}
+
+/* Specificity overrides for links styled as buttons to prevent default/visited link color leakage and underlines */
+a.btn-solid,
+a.btn-solid:visited,
+a.btn-solid:hover,
+a.btn-outline,
+a.btn-outline:visited,
+a.btn-outline:hover,
+a.btn-primary,
+a.btn-primary:visited,
+a.btn-primary:hover,
+a.btn-secondary,
+a.btn-secondary:visited,
+a.btn-secondary:hover,
+a.btn-success,
+a.btn-success:visited,
+a.btn-success:hover,
+a.btn-danger,
+a.btn-danger:visited,
+a.btn-danger:hover,
+a.btn-warning,
+a.btn-warning:visited,
+a.btn-warning:hover,
+a.btn-info,
+a.btn-info:visited,
+a.btn-info:hover,
+a.btn-accent,
+a.btn-accent:visited,
+a.btn-accent:hover,
+a.btn-inverse,
+a.btn-inverse:visited,
+a.btn-inverse:hover {
+    color: var(--bs-btn-color);
+    text-decoration: none !important;
 }
 
 .bg-primary {
-    background-color: var(--bs-primary) !important;
+    background-color: var(--bs-primary-base) !important;
 }
 
 .bg-secondary {
-    background-color: var(--bs-secondary) !important;
+    background-color: var(--bs-secondary-base) !important;
 }
 
 .bg-success {
-    background-color: var(--bs-success) !important;
+    background-color: var(--bs-success-base) !important;
 }
 
 .bg-danger {
-    background-color: var(--bs-danger) !important;
+    background-color: var(--bs-danger-base) !important;
 }
 
 .bg-warning {
-    background-color: var(--bs-warning) !important;
+    background-color: var(--bs-warning-base) !important;
 }
 
 .bg-info {
-    background-color: var(--bs-info) !important;
+    background-color: var(--bs-info-base) !important;
 }
 
 .text-primary {
-    color: var(--bs-primary) !important;
+    color: var(--bs-primary-base) !important;
 }
 
 .text-secondary {
-    color: var(--bs-secondary) !important;
+    color: var(--bs-secondary-base) !important;
 }
 
 .text-success {
-    color: var(--bs-success) !important;
+    color: var(--bs-success-base) !important;
 }
 
 .text-danger {
-    color: var(--bs-danger) !important;
+    color: var(--bs-danger-base) !important;
 }
 
 .text-warning {
-    color: var(--bs-warning) !important;
+    color: var(--bs-warning-base) !important;
 }
 
 .text-info {
-    color: var(--bs-info) !important;
+    color: var(--bs-info-base) !important;
+}
+
+/* 15. Accordion Caret Alignment Fix & Header Font Reset */
+.accordion-header {
+    display: flex !important;
+    align-items: center !important;
+}
+
+.accordion-header h2,
+.accordion-header .title {
+    margin: 0 !important;
+    font-size: inherit !important;
+    font-weight: inherit !important;
 }

From c3589d850916cd750ea9914e4acb2a63024d25eb Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Fri, 7 Aug 2026 22:18:02 +0200
Subject: [PATCH 44/87] Simplifying color themes

---
 css/custom.css | 360 ++++++++++++-------------------------------------
 1 file changed, 84 insertions(+), 276 deletions(-)

diff --git a/css/custom.css b/css/custom.css
index 4fa54695..92adc78e 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -164,55 +164,6 @@
     color: var(--bs-body-color);
 }
 
-[data-bs-theme='dark'] .alert.theme-primary,
-[data-bs-theme='dark'] .note.theme-primary {
-    background-color: rgba(59, 113, 202, 0.2);
-    color: #8ab4f8;
-    border: 1px solid rgba(59, 113, 202, 0.4) !important;
-}
-
-[data-bs-theme='dark'] .alert.theme-secondary,
-[data-bs-theme='dark'] .note.theme-secondary {
-    background-color: rgba(159, 166, 178, 0.2);
-    color: #ced4da;
-    border: 1px solid rgba(159, 166, 178, 0.4) !important;
-}
-
-[data-bs-theme='dark'] .alert.theme-success,
-[data-bs-theme='dark'] .note.theme-success {
-    background-color: rgba(20, 164, 77, 0.2);
-    color: #66bb6a;
-    border: 1px solid rgba(20, 164, 77, 0.4) !important;
-}
-
-[data-bs-theme='dark'] .alert.theme-danger,
-[data-bs-theme='dark'] .note.theme-danger {
-    background-color: rgba(220, 76, 100, 0.2);
-    color: #f06292;
-    border: 1px solid rgba(220, 76, 100, 0.4) !important;
-}
-
-[data-bs-theme='dark'] .alert.theme-warning,
-[data-bs-theme='dark'] .note.theme-warning {
-    background-color: rgba(228, 161, 27, 0.2);
-    color: #ffca28;
-    border: 1px solid rgba(228, 161, 27, 0.4) !important;
-}
-
-[data-bs-theme='dark'] .alert.theme-info,
-[data-bs-theme='dark'] .note.theme-info {
-    background-color: rgba(84, 180, 211, 0.2);
-    color: #4fc3f7;
-    border: 1px solid rgba(84, 180, 211, 0.4) !important;
-}
-
-[data-bs-theme='dark'] .alert.theme-accent,
-[data-bs-theme='dark'] .note.theme-accent {
-    background-color: rgba(210, 102, 160, 0.2);
-    color: #e699c2;
-    border: 1px solid rgba(210, 102, 160, 0.4) !important;
-}
-
 body {
     background-color: var(--bs-body-bg, #fafafa);
     color: var(--bs-body-color, #212121);
@@ -314,110 +265,27 @@ h6 {
     justify-content: center;
 }
 
-.btn-outline.theme-primary{
-    --bs-btn-color: var(--bs-primary-base);
-    --bs-btn-border-color: var(--bs-primary-base);
-    --bs-btn-hover-color: var(--bs-primary-base);
-    --bs-btn-hover-bg: rgba(59, 113, 202, 0.1);
-    --bs-btn-hover-border-color: var(--bs-primary-base);
-    --bs-btn-active-bg: rgba(59, 113, 202, 0.2);
-    --bs-btn-active-color: var(--bs-primary-base);
-    border: 2px solid var(--bs-primary-base) !important;
-}
-
-.btn-outline.theme-secondary{
-    --bs-btn-color: var(--bs-secondary-base);
-    --bs-btn-border-color: var(--bs-secondary-base);
-    --bs-btn-hover-color: var(--bs-secondary-base);
-    --bs-btn-hover-bg: rgba(159, 166, 178, 0.1);
-    --bs-btn-active-color: var(--bs-secondary-base);
-    --bs-btn-active-bg: rgba(159, 166, 178, 0.2);
-    border: 2px solid var(--bs-secondary-base) !important;
+/* .theme-* classes set --bs-theme-base natively (Bootstrap), so one rule covers
+   every color instead of a hand-copied block per color. */
+.btn-outline[class*="theme-"] {
+    --bs-btn-color: var(--bs-theme-base);
+    --bs-btn-border-color: var(--bs-theme-base);
+    --bs-btn-hover-color: var(--bs-theme-base);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-theme-base) 10%, transparent);
+    --bs-btn-hover-border-color: var(--bs-theme-base);
+    --bs-btn-active-bg: color-mix(in srgb, var(--bs-theme-base) 20%, transparent);
+    --bs-btn-active-color: var(--bs-theme-base);
+    border: 2px solid var(--bs-theme-base) !important;
 }
 
-.btn-outline.theme-success{
-    --bs-btn-color: var(--bs-success-base);
-    --bs-btn-border-color: var(--bs-success-base);
-    --bs-btn-hover-color: var(--bs-success-base);
-    --bs-btn-hover-bg: rgba(20, 164, 77, 0.1);
-    --bs-btn-active-color: var(--bs-success-base);
-    --bs-btn-active-bg: rgba(20, 164, 77, 0.2);
-    border: 2px solid var(--bs-success-base) !important;
-}
-
-.btn-outline.theme-danger{
-    --bs-btn-color: var(--bs-danger-base);
-    --bs-btn-border-color: var(--bs-danger-base);
-    --bs-btn-hover-color: var(--bs-danger-base);
-    --bs-btn-hover-bg: rgba(220, 76, 100, 0.1);
-    --bs-btn-active-color: var(--bs-danger-base);
-    --bs-btn-active-bg: rgba(220, 76, 100, 0.2);
-    border: 2px solid var(--bs-danger-base) !important;
-}
-
-.btn-outline.theme-warning{
-    --bs-btn-color: var(--bs-warning-base);
-    --bs-btn-border-color: var(--bs-warning-base);
-    --bs-btn-hover-color: var(--bs-warning-base);
-    --bs-btn-hover-bg: rgba(228, 161, 27, 0.1);
-    --bs-btn-active-color: var(--bs-warning-base);
-    --bs-btn-active-bg: rgba(228, 161, 27, 0.2);
-    border: 2px solid var(--bs-warning-base) !important;
-}
-
-.btn-outline.theme-info{
-    --bs-btn-color: var(--bs-info-base);
-    --bs-btn-border-color: var(--bs-info-base);
-    --bs-btn-hover-color: var(--bs-info-base);
-    --bs-btn-hover-bg: rgba(84, 180, 211, 0.1);
-    --bs-btn-active-color: var(--bs-info-base);
-    --bs-btn-active-bg: rgba(84, 180, 211, 0.2);
-    border: 2px solid var(--bs-info-base) !important;
-}
-
-.btn-outline.theme-accent{
-    --bs-btn-color: var(--bs-accent-base);
-    --bs-btn-border-color: var(--bs-accent-base);
-    --bs-btn-hover-color: var(--bs-accent-base);
-    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-accent-base) 10%, transparent);
-    --bs-btn-hover-border-color: var(--bs-accent-base);
-    --bs-btn-active-bg: color-mix(in srgb, var(--bs-accent-base) 20%, transparent);
-    --bs-btn-active-color: var(--bs-accent-base);
-    border: 2px solid var(--bs-accent-base) !important;
-}
-
-.btn-outline.theme-inverse{
-    --bs-btn-color: var(--bs-inverse-base);
-    --bs-btn-border-color: var(--bs-inverse-base);
-    --bs-btn-hover-color: var(--bs-inverse-base);
-    --bs-btn-hover-bg: rgba(0, 0, 0, 0.05);
-    --bs-btn-active-color: var(--bs-inverse-base);
-    --bs-btn-active-bg: rgba(0, 0, 0, 0.1);
-    border: 2px solid var(--bs-inverse-base) !important;
-}
-
-.btn-outline.theme-primary:hover,
-.btn-outline-primary:hover,
-.btn-outline.theme-secondary:hover,
-.btn-outline-secondary:hover,
-.btn-outline.theme-success:hover,
-.btn-outline-success:hover,
-.btn-outline.theme-danger:hover,
-.btn-outline-danger:hover,
-.btn-outline.theme-warning:hover,
-.btn-outline-warning:hover,
-.btn-outline.theme-info:hover,
-.btn-outline-info:hover,
-.btn-outline.theme-accent:hover,
-.btn-outline-accent:hover,
-.btn-outline.theme-inverse:hover,
-.btn-outline-inverse:hover {
+.btn-outline[class*="theme-"]:hover,
+[class^="btn-outline-"]:hover {
     box-shadow: 0 8px 9px -4px rgba(0, 0, 0, 0.15), 0 4px 18px 0 rgba(0, 0, 0, 0.1) !important;
     transform: translateY(0);
     /* MDB outline buttons don't usually lift as much as solid */
 }
 
-/* 12. Badges */
+/* 5. Badges */
 .badge {
     padding: 0.35em 0.65em;
     font-size: 0.75em;
@@ -436,7 +304,7 @@ h6 {
 }
 
 
-/* 14. List Group (Material Style) */
+/* 6. List Group (Material Style) */
 .list-group {
     border-radius: 0.5rem;
     border: 1px solid #eee;
@@ -504,13 +372,13 @@ h6 {
 }
 
 
-/* 6. FIX: Offcanvas (Ensuring clean Material slide-out) */
+/* 7. FIX: Offcanvas (Ensuring clean Material slide-out) */
 .drawer {
     box-shadow: var(--shadow-3);
     border: none;
 }
 
-/* 7. Navs (Pills & Tabs) */
+/* 8. Navs (Pills & Tabs) */
 .nav-pills,
 .nav-tabs {
     --bs-nav-link-color: #616161;
@@ -614,7 +482,7 @@ h6 {
 .note {
     padding: 1.25rem 1.5rem;
     margin-bottom: 1.5rem;
-    border: none !important;
+    border: 1px solid !important;
 }
 
 .alert:not(.card),
@@ -627,80 +495,33 @@ h6 {
 }
 
 .note {
-    border-left: 6px solid !important
-}
-
-.alert.theme-primary,
-.note.theme-primary,
-.alert.alert-primary,
-.note.alert-primary {
-    background-color: #E2EAF7;
-    color: #2F5AA2;
-    border-left-color: #2F5AA2 !important;
-}
-
-.alert.theme-secondary,
-.note.theme-secondary,
-.alert.alert-secondary,
-.note.alert-secondary {
-    background-color: #f5f5f5;
-    color: #424242;
-    border-left-color: #424242 !important;
-}
-
-.alert.theme-success,
-.note.theme-success,
-.alert.alert-success,
-.note.alert-success {
-    background-color: #E1F0E5;
-    color: #1B5E20;
-    border-left-color: #1B5E20 !important;
-}
-
-.alert.theme-danger,
-.note.theme-danger,
-.alert.alert-danger,
-.note.alert-danger {
-    background-color: #F9E3E8;
-    color: #B71C1C;
-    border-left-color: #B71C1C !important;
-}
-
-.alert.theme-warning,
-.note.theme-warning,
-.alert.alert-warning,
-.note.alert-warning {
-    background-color: #FBF1DD;
-    color: #896110;
-    border-left-color: #896110 !important;
-}
-
-.alert.theme-info,
-.note.theme-info,
-.alert.alert-info,
-.note.alert-info {
-    background-color: #E8F5FD;
-    color: #0D47A1;
-    border-left-color: #0D47A1 !important;
-}
-
-.alert.theme-accent,
-.note.theme-accent,
-.alert.alert-accent,
-.note.alert-accent {
-    background-color: color-mix(in srgb, var(--bs-accent-base) 10%, #fff);
-    color: color-mix(in srgb, var(--bs-accent-base) 65%, #000);
-    border-left-color: color-mix(in srgb, var(--bs-accent-base) 65%, #000) !important;
-}
-
-.alert.theme-inverse,
-.note.theme-inverse,
-.alert.alert-inverse,
-.note.alert-inverse {
-    background-color: #eeeeee;
-    color: #212121;
-    border-left-color: #212121 !important;
-}
+    /* Width only, not the `border-left` shorthand — that would reset
+       border-left-color back to currentColor and fight the rule below. */
+    border-left-width: 6px !important;
+}
+
+/* v6's native .theme-* classes (and our own for accent/inverse) already expose
+   --bs-theme-base, so one formula covers every color instead of a hardcoded block
+   per color per theme. light-dark() picks the right shape for each: light mode
+   darkens the base for text/border against a near-white tint; dark mode's base is
+   already a light, legible tint (see the palettes above), so it's used as-is. */
+.alert[class*="theme-"],
+.note[class*="theme-"],
+.alert[class*="alert-"],
+.note[class*="alert-"] {
+    background-color: color-mix(in srgb, var(--bs-theme-base) 12%, var(--bs-body-bg, #fafafa));
+    color: light-dark(color-mix(in srgb, var(--bs-theme-base) 60%, #000), var(--bs-theme-base));
+    border-color: light-dark(color-mix(in srgb, var(--bs-theme-base) 60%, #000), var(--bs-theme-base)) !important;
+}
+
+/* v6 dropped .alert-primary etc. entirely (no --bs-theme-base to read from), so
+   alias the legacy names to the same token the .theme-* classes provide natively. */
+.alert-primary, .note.alert-primary { --bs-theme-base: var(--bs-primary-base); }
+.alert-secondary, .note.alert-secondary { --bs-theme-base: var(--bs-secondary-base); }
+.alert-success, .note.alert-success { --bs-theme-base: var(--bs-success-base); }
+.alert-danger, .note.alert-danger { --bs-theme-base: var(--bs-danger-base); }
+.alert-warning, .note.alert-warning { --bs-theme-base: var(--bs-warning-base); }
+.alert-info, .note.alert-info { --bs-theme-base: var(--bs-info-base); }
 
 .alert-heading {
     font-weight: 500;
@@ -738,7 +559,7 @@ h6 {
     letter-spacing: 0.05em;
 }
 
-/* 8. Floating Labels (Material Style) */
+/* 11. Floating Labels (Material Style) */
 .form-floating>.form-control:focus~label,
 .form-floating>.form-control:not(:placeholder-shown)~label,
 .form-floating>.form-select~label {
@@ -752,7 +573,7 @@ h6 {
 }
 
 
-/* 10. Table Enhancements */
+/* 12. Table Enhancements */
 .table {
     background: #fff;
     border-radius: var(--bs-border-radius);
@@ -766,77 +587,83 @@ h6 {
     letter-spacing: 0.05em;
 }
 
-/* 11. Explicit Color Overrides to ensure MDB colors take precedence */
-.btn-solid.theme-primary,
+/* 13. Explicit Color Overrides to ensure MDB colors take precedence */
+.btn-solid[class*="theme-"] {
+    --bs-btn-bg: var(--bs-theme-base);
+    --bs-btn-border-color: var(--bs-theme-base);
+    --bs-btn-color: var(--bs-theme-contrast);
+    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-theme-base), #000 12%);
+    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-theme-base), #000 16%);
+}
+
+/* Legacy v5-style .btn-primary etc. aren't defined by v6 at all (no --bs-theme-base
+   to read from), so each color still needs its own anchor. Hover darkens the base by
+   a fixed amount instead of a hand-picked hex, so it stays correct in dark mode too
+   (dark bases are light tints; the old hardcoded hex hovers assumed a light-mode
+   base and went the wrong direction — lighter instead of darker — once dark mode
+   swapped the base to a light tint). */
 .btn-primary {
     --bs-btn-bg: var(--bs-primary-base);
     --bs-btn-border-color: var(--bs-primary-base);
     --bs-btn-color: var(--bs-primary-contrast);
-    --bs-btn-hover-bg: #0b51c5;
-    --bs-btn-hover-border-color: #0a4ab4;
+    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-primary-base), #000 12%);
+    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-primary-base), #000 16%);
 }
 
-.btn-solid.theme-secondary,
 .btn-secondary {
     --bs-btn-bg: var(--bs-secondary-base);
     --bs-btn-border-color: var(--bs-secondary-base);
     --bs-btn-color: var(--bs-secondary-contrast);
-    --bs-btn-hover-bg: #8c939e;
-    --bs-btn-hover-border-color: #858c97;
+    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-secondary-base), #000 12%);
+    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-secondary-base), #000 16%);
 }
 
-.btn-solid.theme-success,
 .btn-success {
     --bs-btn-bg: var(--bs-success-base);
     --bs-btn-border-color: var(--bs-success-base);
     --bs-btn-color: var(--bs-success-contrast);
-    --bs-btn-hover-bg: #118b41;
-    --bs-btn-hover-border-color: #0f803c;
+    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-success-base), #000 12%);
+    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-success-base), #000 16%);
 }
 
-.btn-solid.theme-danger,
 .btn-danger {
     --bs-btn-bg: var(--bs-danger-base);
     --bs-btn-border-color: var(--bs-danger-base);
     --bs-btn-color: var(--bs-danger-contrast);
-    --bs-btn-hover-bg: #bd364d;
-    --bs-btn-hover-border-color: #b33045;
+    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-danger-base), #000 12%);
+    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-danger-base), #000 16%);
 }
 
-.btn-solid.theme-warning,
 .btn-warning {
     --bs-btn-bg: var(--bs-warning-base);
     --bs-btn-border-color: var(--bs-warning-base);
     --bs-btn-color: var(--bs-warning-contrast);
-    --bs-btn-hover-bg: #ecb33b;
-    --bs-btn-hover-border-color: #eab033;
+    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-warning-base), #000 12%);
+    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-warning-base), #000 16%);
 }
 
-.btn-solid.theme-info,
 .btn-info {
     --bs-btn-bg: var(--bs-info-base);
     --bs-btn-border-color: var(--bs-info-base);
     --bs-btn-color: var(--bs-info-contrast);
-    --bs-btn-hover-bg: #3da8cb;
-    --bs-btn-hover-border-color: #359ec0;
+    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-info-base), #000 12%);
+    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-info-base), #000 16%);
 }
 
-.btn-solid.theme-accent,
 .btn-accent {
     --bs-btn-bg: var(--bs-accent-base);
     --bs-btn-border-color: var(--bs-accent-base);
     --bs-btn-color: var(--bs-accent-contrast);
-    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-accent-base), var(--bs-white) 15%);
-    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-accent-base), var(--bs-white) 10%);
+    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-accent-base), #000 12%);
+    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-accent-base), #000 16%);
 }
 
-.btn-solid.theme-inverse,
 .btn-inverse {
     --bs-btn-bg: var(--bs-inverse-base);
     --bs-btn-border-color: var(--bs-inverse-base);
     --bs-btn-color: var(--bs-inverse-contrast);
-    --bs-btn-hover-bg: #4c4444;
-    --bs-btn-hover-border-color: #463f3f;
+    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-inverse-base), #000 12%);
+    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-inverse-base), #000 16%);
 }
 
 /* Specificity overrides for links styled as buttons to prevent default/visited link color leakage and underlines */
@@ -874,30 +701,11 @@ a.btn-inverse:hover {
     text-decoration: none !important;
 }
 
-.bg-primary {
-    background-color: var(--bs-primary-base) !important;
-}
-
-.bg-secondary {
-    background-color: var(--bs-secondary-base) !important;
-}
-
-.bg-success {
-    background-color: var(--bs-success-base) !important;
-}
-
-.bg-danger {
-    background-color: var(--bs-danger-base) !important;
-}
-
-.bg-warning {
-    background-color: var(--bs-warning-base) !important;
-}
-
-.bg-info {
-    background-color: var(--bs-info-base) !important;
-}
-
+/* .bg-primary etc. are not overridden here: Bootstrap's own .bg-primary already
+   reads --bs-primary-bg, which we already pin to --bs-primary-base above (verified:
+   removing this block changes nothing). .text-primary etc. still need one, though —
+   v6 renamed that utility to .fg-primary and dropped .text-* entirely, so DITA
+   content still emitting .text-primary would otherwise get no color at all. */
 .text-primary {
     color: var(--bs-primary-base) !important;
 }
@@ -922,7 +730,7 @@ a.btn-inverse:hover {
     color: var(--bs-info-base) !important;
 }
 
-/* 15. Accordion Caret Alignment Fix & Header Font Reset */
+/* 14. Accordion Caret Alignment Fix & Header Font Reset */
 .accordion-header {
     display: flex !important;
     align-items: center !important;

From ffc91be19cd60ccd714be14ca5b1f1a3d5b4251c Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Fri, 7 Aug 2026 22:26:14 +0200
Subject: [PATCH 45/87] Fix radius

---
 css/custom.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/css/custom.css b/css/custom.css
index 92adc78e..5122764f 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -187,7 +187,9 @@ h6 {
     background-color: var(--bs-card-bg, #fff);
     box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
     transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    border-radius: 0.5rem;
+    --bs-card-border-radius: 0.5rem;
+    --bs-card-inner-border-radius: calc(0.5rem - var(--bs-border-width, 1px));
+    border-radius: var(--bs-card-border-radius);
 }
 
 /* v6's card-body is a flex column, which blockifies inline children like

From 86c5c691db187d75b805f69f6dc0bf1408a00de7 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 8 Aug 2026 07:50:33 +0200
Subject: [PATCH 46/87] Removing legacy CSS classes

---
 .github/dita-ot/theme.css        |   4 +-
 .gitignore                       |   3 +-
 Customization/xsl/card.xsl       |   2 +-
 Customization/xsl/carousel.xsl   |   2 +-
 Customization/xsl/drawer.xsl     |   2 +-
 Customization/xsl/nav.xsl        |   8 +-
 Customization/xsl/scrollspy.xsl  |   6 +-
 Customization/xsl/topic.xsl      |   6 +-
 css/collapsible-toc.css          |  12 +--
 css/custom.css                   | 164 ++++---------------------------
 css/menubar-toc.css              |   2 +-
 css/scrollspy-toc.css            |  30 ++++--
 css/side-toc.css                 |  23 ++++-
 includes/hdr.navbar.default.xml  |   2 +-
 includes/hdr.navbar.example.xml  |   2 +-
 includes/hdr.sidebar.example.xml |   9 +-
 includes/hdr.topbar.example.xml  |  14 +--
 xsl/utility-classes.xsl          |   4 +-
 18 files changed, 104 insertions(+), 191 deletions(-)

diff --git a/.github/dita-ot/theme.css b/.github/dita-ot/theme.css
index 70018e42..0b2cfd68 100644
--- a/.github/dita-ot/theme.css
+++ b/.github/dita-ot/theme.css
@@ -40,7 +40,7 @@
   --bs-navbar-color: var(--bs-primary-contrast);
   --bs-navbar-brand-color: var(--bs-primary-contrast);
   --bs-navbar-brand-font-size: 1.25rem;
-  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  --bs-navbar-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }
 
 .nav-link {
@@ -63,7 +63,7 @@
   height: calc(100vh - 6rem);
 }
 
-@media (max-width: 991.98px) {
+@media (max-width: 1023.98px) {
   .css-themes-list {
     height: calc(100vh - 25rem);
   }
diff --git a/.gitignore b/.gitignore
index e640b74e..80ec90ea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -71,4 +71,5 @@ xsl/dita2html5-bootstrapImpl.xsl
 xsl/dita2html5-legacy-3.0.xsl
 node_modules
 
-out
\ No newline at end of file
+out
+.gstack/
diff --git a/Customization/xsl/card.xsl b/Customization/xsl/card.xsl
index 08b95da1..9b654edb 100644
--- a/Customization/xsl/card.xsl
+++ b/Customization/xsl/card.xsl
@@ -74,7 +74,7 @@
     <xsl:variable
       name="bootstrap-class"
       select="
-        if (count(preceding-sibling::*[contains(@class, ' topic/title ')]) > 0) then 'sectiontitle card-subtitle text-body-secondary'
+        if (count(preceding-sibling::*[contains(@class, ' topic/title ')]) > 0) then 'sectiontitle card-subtitle fg-2'
         else 'sectiontitle card-title'"
     />
     <xsl:element name="{$headLevel}">
diff --git a/Customization/xsl/carousel.xsl b/Customization/xsl/carousel.xsl
index 3130d3ff..c2f79798 100644
--- a/Customization/xsl/carousel.xsl
+++ b/Customization/xsl/carousel.xsl
@@ -68,7 +68,7 @@
     <xsl:variable name="id">
       <xsl:value-of select="concat('carousel_' ,dita-ot:generate-html-id(.))"/>
     </xsl:variable>
-    <div class="carousel slide">
+    <div class="carousel">
       <!--xsl:choose>
         <xsl:when test="@autoplay = 'no' or contains(@otherprops, 'autoplay(false)')">
           <xsl:attribute name="data-bs-ride" select="'true'"/>
diff --git a/Customization/xsl/drawer.xsl b/Customization/xsl/drawer.xsl
index d59a3857..5785e9dd 100644
--- a/Customization/xsl/drawer.xsl
+++ b/Customization/xsl/drawer.xsl
@@ -36,7 +36,7 @@
           <xsl:attribute name="class" select='drawer-title'/>
           <xsl:value-of select="*[contains(@class, ' topic/title ')]"/>
         </xsl:element>
-        <button type="button" class="btn-close text-reset" aria-label="Close" data-bs-dismiss="drawer"/>
+        <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="drawer"/>
       </div>
       <div class="drawer-body">
         <xsl:apply-templates select="*[not(contains(@class, ' topic/title '))]"/>
diff --git a/Customization/xsl/nav.xsl b/Customization/xsl/nav.xsl
index cbddc3ac..60778cf9 100644
--- a/Customization/xsl/nav.xsl
+++ b/Customization/xsl/nav.xsl
@@ -172,7 +172,7 @@
 
   <!-- Generate a menubar-toc - a menubar as part of the static header -->
   <xsl:template match="*" mode="gen-user-toptoc">
-    <div class="bg-body-tertiary">
+    <div class="bg-3">
       <div>
         <xsl:attribute name="class" select="$BOOTSTRAP_CSS_CONTAINER_SIZE"/>
         <nav xsl:use-attribute-sets="menubar-toc">
@@ -293,7 +293,7 @@
           </xsl:when>
           <xsl:when test="$nav-toc = ('nav-pill-partial', 'nav-pill-full')">
             <!-- ↓ Remove <ul> and add nested <nav> element with Bootstrap classes ↓ -->
-            <nav class="nav nav-pills flex-column navbar-secondary">
+            <nav class="nav nav-pills flex-column">
               <!-- ↑ End customization · Continue with DITA-OT defaults ↓ -->
               <xsl:choose>
                 <xsl:when test="$nav-toc = 'nav-pill-partial'">
@@ -538,7 +538,7 @@
                 <xsl:with-param name="class">
                   <xsl:text>list-group-item list-group-item-action</xsl:text>
                   <xsl:if test="parent::* is $current-topicref">
-                    <xsl:text> bg-body-tertiary</xsl:text>
+                    <xsl:text> bg-3</xsl:text>
                   </xsl:if>
                   <xsl:if test=". is $current-topicref">
                     <xsl:text> active</xsl:text>
@@ -688,7 +688,7 @@
           </xsl:otherwise>
         </xsl:choose>
         <xsl:if test="exists($children)">
-          <nav class="nav nav-pills flex-column ps-3 mw-100 w-100">
+          <nav class="nav nav-pills flex-column ps-3 max-w-100 w-100">
             <xsl:apply-templates select="$children" mode="#current">
               <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>
             </xsl:apply-templates>
diff --git a/Customization/xsl/scrollspy.xsl b/Customization/xsl/scrollspy.xsl
index 97b4c721..20717165 100644
--- a/Customization/xsl/scrollspy.xsl
+++ b/Customization/xsl/scrollspy.xsl
@@ -22,7 +22,7 @@
         </div>
       </xsl:when>
       <xsl:when test="$BOOTSTRAP_SCROLLSPY_TOC = ('nav-pill')">
-        <nav class="nav nav-pills flex-column navbar-light bg-subtle-secondary" id="bs-scrollspy">
+        <nav class="nav nav-pills flex-column bg-subtle-secondary" id="bs-scrollspy">
           <xsl:if test="$BIDIRECTIONAL_DOCUMENT = 'yes'">
             <xsl:attribute name="dir" select="'rtl'"/>
           </xsl:if>
@@ -91,7 +91,7 @@
         </a>
       </xsl:when>
       <xsl:when test="$BOOTSTRAP_SCROLLSPY_TOC = ('nav-pill')">
-        <a class="my-1 ps-2 nav-link">
+        <a class="ps-2 nav-link">
           <xsl:call-template name="scrollspy-href"/>
           <xsl:apply-templates/>
         </a>
@@ -148,7 +148,7 @@
         </a>
       </xsl:when>
       <xsl:when test="$BOOTSTRAP_SCROLLSPY_TOC = ('nav-pill')">
-        <a class="my-1 ps-2 nav-link">
+        <a class="ps-2 nav-link">
           <xsl:attribute name="href">
             <xsl:text>#</xsl:text>
             <xsl:sequence select="dita-ot:generate-id(parent::*/parent::*/@id, @id)"/>
diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl
index 5de74ca1..510ea4d8 100644
--- a/Customization/xsl/topic.xsl
+++ b/Customization/xsl/topic.xsl
@@ -173,14 +173,14 @@
       <xsl:if test="$BOOTSTRAP_SCROLLSPY_TOC != 'none'">
         <xsl:choose>
           <xsl:when test="count(*[contains(@class, ' topic/topic ')])&gt;0">
-            <div class="bs-scrollspy mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1 text-body-secondary">
+            <div class="bs-scrollspy mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1 fg-2">
               <xsl:call-template name="scrollspy-content"/>
             </div>
           </xsl:when>
           <xsl:when
             test="count(*/*[@id and (contains(@class, ' topic/section ') or contains(@class, ' topic/example '))])&gt;0"
           >
-            <div class="bs-scrollspy mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1 text-body-secondary">
+            <div class="bs-scrollspy mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1 fg-2">
               <xsl:call-template name="scrollspy-content"/>
             </div>
           </xsl:when>
@@ -834,7 +834,7 @@
   <xsl:attribute-set name="toc">
     <xsl:attribute name="role">navigation</xsl:attribute>
     <xsl:attribute name="id">bs-sidebar-nav</xsl:attribute>
-    <xsl:attribute name="class">d-flex flex-align-start flex-column h-100 overflow-y-auto</xsl:attribute>
+    <xsl:attribute name="class">d-flex align-items-start flex-column h-100 overflow-y-auto</xsl:attribute>
   </xsl:attribute-set>
 
   <xsl:attribute-set name="menubar-toc">
diff --git a/css/collapsible-toc.css b/css/collapsible-toc.css
index 173ad7db..90e3a695 100644
--- a/css/collapsible-toc.css
+++ b/css/collapsible-toc.css
@@ -16,7 +16,7 @@
 .bd-links a {
   padding: 0.1875rem 0.5rem;
   margin-top: 0.125rem;
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
   text-decoration: none;
 }
 
@@ -25,7 +25,7 @@
 }
 
 .bd-links span {
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
 }
 
 .bd-links span:hover {
@@ -33,7 +33,7 @@
 }
 
 .bd-links span.bd-divider:hover {
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
 }
 
 @media (min-width: 768px) {
@@ -47,7 +47,7 @@
 @media (max-width: 767.98px) {
   .bd-links > ul {
     padding: 1.5rem 0.75rem;
-    background-color: var(--bs-body-bg);
+    background-color: var(--bs-bg-body);
   }
 }
 
@@ -63,7 +63,7 @@
 .bd-links .btn {
   padding: 0.25rem !important;
   font-weight: 600;
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
   background-color: transparent;
   box-shadow: none;
 }
@@ -113,5 +113,5 @@
 
 .bd-links .active {
   font-weight: 600;
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
 }
diff --git a/css/custom.css b/css/custom.css
index 5122764f..09a2bb9b 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -46,11 +46,11 @@
     --shadow-3: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     --shadow-4: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
 
-    /* MDB Border Radii */
+    /* MDB Border Radii (pinned to v6's own --bs-radius-* scale steps) */
     --bs-border-width: 1px;
-    --bs-border-radius: 0.25rem;
-    --bs-border-radius-sm: 0.125rem;
-    --bs-border-radius-lg: 0.5rem;
+    --bs-radius-1: 0.125rem;
+    --bs-radius-3: 0.25rem;
+    --bs-radius-5: 0.5rem;
 
     /* Override Bootstrap v6 theme color variables for MDB */
     --bs-primary-bg: var(--bs-primary-base);
@@ -99,11 +99,11 @@
 }
 
 :root[data-bs-theme='dark'] {
-    --bs-body-bg: #121212;
-    --bs-body-color: #eee;
-    --bs-secondary-color: #b2b2b2;
-    --bs-tertiary-color: #757575;
-    --bs-emphasis-color: #fff;
+    --bs-bg-body: #121212;
+    --bs-fg-body: #eee;
+    --bs-secondary-fg: #b2b2b2;
+    --bs-fg-3: #757575;
+    --bs-fg-1: #fff;
     --bs-border-color: #404040;
 
     /* Lighter MDB palette, tuned for contrast against #121212 / #262626 card bg */
@@ -160,13 +160,13 @@
     --shadow-1: 0 2px 5px 0 rgba(0, 0, 0, 0.5), 0 2px 10px 0 rgba(0, 0, 0, 0.4);
     --shadow-2: 0 5px 11px 0 rgba(0, 0, 0, 0.6), 0 4px 15px 0 rgba(0, 0, 0, 0.5);
 
-    background-color: var(--bs-body-bg);
-    color: var(--bs-body-color);
+    background-color: var(--bs-bg-body);
+    color: var(--bs-fg-body);
 }
 
 body {
-    background-color: var(--bs-body-bg, #fafafa);
-    color: var(--bs-body-color, #212121);
+    background-color: var(--bs-bg-body, #fafafa);
+    color: var(--bs-fg-body, #212121);
 }
 
 /* 2. Typography Enhancements */
@@ -255,7 +255,7 @@ h6 {
     box-shadow: var(--shadow-1);
     transition: all 0.2s ease-in-out;
     border: none;
-    border-radius: var(--bs-border-radius);
+    border-radius: var(--bs-radius-3);
 }
 .btn.btn-icon,
 .btn-icon {
@@ -299,13 +299,6 @@ h6 {
     background-color: var(--bs-theme-bg, var(--bs-badge-bg));
 }
 
-.badge-pill {
-    border-radius: 10rem;
-    padding-left: 0.8em;
-    padding-right: 0.8em;
-}
-
-
 /* 6. List Group (Material Style) */
 .list-group {
     border-radius: 0.5rem;
@@ -353,14 +346,14 @@ h6 {
     padding: 0.75rem 1.625rem 0.625rem;
     font-size: 0.875rem;
     line-height: 1.5;
-    border-radius: var(--bs-border-radius-lg);
+    border-radius: var(--bs-radius-5);
 }
 
 .btn-sm:not(.btn-icon) {
     padding: 0.375rem 1rem 0.3125rem;
     font-size: 0.625rem;
     line-height: 1.5;
-    border-radius: var(--bs-border-radius-sm);
+    border-radius: var(--bs-radius-1);
 }
 
 .btn-link {
@@ -390,8 +383,8 @@ h6 {
     --bs-nav-pills-link-active-bg: var(--bs-primary-base);
     /* v6 defaults both of these to var(--bs-radius-9) (1.5rem, a full pill shape) for
        the track and the active link alike. Match our own button radius instead. */
-    --bs-nav-pills-border-radius: var(--bs-border-radius);
-    --bs-nav-pills-link-border-radius: var(--bs-border-radius);
+    --bs-nav-pills-border-radius: var(--bs-radius-3);
+    --bs-nav-pills-link-border-radius: var(--bs-radius-3);
 }
 
 .nav-pills .nav-link {
@@ -401,7 +394,7 @@ h6 {
     letter-spacing: 0.02rem !important;
     padding: 0.625rem 1.5rem 0.5rem !important;
     transition: all 0.2s ease-in-out !important;
-    border-radius: var(--bs-border-radius) !important;
+    border-radius: var(--bs-radius-3) !important;
 }
 
 .nav-pills .nav-link.active,
@@ -511,20 +504,11 @@ h6 {
 .note[class*="theme-"],
 .alert[class*="alert-"],
 .note[class*="alert-"] {
-    background-color: color-mix(in srgb, var(--bs-theme-base) 12%, var(--bs-body-bg, #fafafa));
+    background-color: color-mix(in srgb, var(--bs-theme-base) 12%, var(--bs-bg-body, #fafafa));
     color: light-dark(color-mix(in srgb, var(--bs-theme-base) 60%, #000), var(--bs-theme-base));
     border-color: light-dark(color-mix(in srgb, var(--bs-theme-base) 60%, #000), var(--bs-theme-base)) !important;
 }
 
-/* v6 dropped .alert-primary etc. entirely (no --bs-theme-base to read from), so
-   alias the legacy names to the same token the .theme-* classes provide natively. */
-.alert-primary, .note.alert-primary { --bs-theme-base: var(--bs-primary-base); }
-.alert-secondary, .note.alert-secondary { --bs-theme-base: var(--bs-secondary-base); }
-.alert-success, .note.alert-success { --bs-theme-base: var(--bs-success-base); }
-.alert-danger, .note.alert-danger { --bs-theme-base: var(--bs-danger-base); }
-.alert-warning, .note.alert-warning { --bs-theme-base: var(--bs-warning-base); }
-.alert-info, .note.alert-info { --bs-theme-base: var(--bs-info-base); }
-
 .alert-heading {
     font-weight: 500;
 }
@@ -549,13 +533,6 @@ h6 {
     color: var(--bs-primary-contrast);
 }
 
-.navbar-inverse .navbar-nav .nav-link {
-    color: rgba(255, 255, 255, 0.85);
-    font-weight: 500;
-    text-transform: uppercase;
-    font-size: 0.875rem;
-}
-
 .navbar-brand {
     font-weight: 700;
     letter-spacing: 0.05em;
@@ -578,7 +555,7 @@ h6 {
 /* 12. Table Enhancements */
 .table {
     background: #fff;
-    border-radius: var(--bs-border-radius);
+    border-radius: var(--bs-radius-3);
     overflow: hidden;
 }
 
@@ -598,76 +575,6 @@ h6 {
     --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-theme-base), #000 16%);
 }
 
-/* Legacy v5-style .btn-primary etc. aren't defined by v6 at all (no --bs-theme-base
-   to read from), so each color still needs its own anchor. Hover darkens the base by
-   a fixed amount instead of a hand-picked hex, so it stays correct in dark mode too
-   (dark bases are light tints; the old hardcoded hex hovers assumed a light-mode
-   base and went the wrong direction — lighter instead of darker — once dark mode
-   swapped the base to a light tint). */
-.btn-primary {
-    --bs-btn-bg: var(--bs-primary-base);
-    --bs-btn-border-color: var(--bs-primary-base);
-    --bs-btn-color: var(--bs-primary-contrast);
-    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-primary-base), #000 12%);
-    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-primary-base), #000 16%);
-}
-
-.btn-secondary {
-    --bs-btn-bg: var(--bs-secondary-base);
-    --bs-btn-border-color: var(--bs-secondary-base);
-    --bs-btn-color: var(--bs-secondary-contrast);
-    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-secondary-base), #000 12%);
-    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-secondary-base), #000 16%);
-}
-
-.btn-success {
-    --bs-btn-bg: var(--bs-success-base);
-    --bs-btn-border-color: var(--bs-success-base);
-    --bs-btn-color: var(--bs-success-contrast);
-    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-success-base), #000 12%);
-    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-success-base), #000 16%);
-}
-
-.btn-danger {
-    --bs-btn-bg: var(--bs-danger-base);
-    --bs-btn-border-color: var(--bs-danger-base);
-    --bs-btn-color: var(--bs-danger-contrast);
-    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-danger-base), #000 12%);
-    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-danger-base), #000 16%);
-}
-
-.btn-warning {
-    --bs-btn-bg: var(--bs-warning-base);
-    --bs-btn-border-color: var(--bs-warning-base);
-    --bs-btn-color: var(--bs-warning-contrast);
-    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-warning-base), #000 12%);
-    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-warning-base), #000 16%);
-}
-
-.btn-info {
-    --bs-btn-bg: var(--bs-info-base);
-    --bs-btn-border-color: var(--bs-info-base);
-    --bs-btn-color: var(--bs-info-contrast);
-    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-info-base), #000 12%);
-    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-info-base), #000 16%);
-}
-
-.btn-accent {
-    --bs-btn-bg: var(--bs-accent-base);
-    --bs-btn-border-color: var(--bs-accent-base);
-    --bs-btn-color: var(--bs-accent-contrast);
-    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-accent-base), #000 12%);
-    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-accent-base), #000 16%);
-}
-
-.btn-inverse {
-    --bs-btn-bg: var(--bs-inverse-base);
-    --bs-btn-border-color: var(--bs-inverse-base);
-    --bs-btn-color: var(--bs-inverse-contrast);
-    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-inverse-base), #000 12%);
-    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-inverse-base), #000 16%);
-}
-
 /* Specificity overrides for links styled as buttons to prevent default/visited link color leakage and underlines */
 a.btn-solid,
 a.btn-solid:visited,
@@ -703,35 +610,6 @@ a.btn-inverse:hover {
     text-decoration: none !important;
 }
 
-/* .bg-primary etc. are not overridden here: Bootstrap's own .bg-primary already
-   reads --bs-primary-bg, which we already pin to --bs-primary-base above (verified:
-   removing this block changes nothing). .text-primary etc. still need one, though —
-   v6 renamed that utility to .fg-primary and dropped .text-* entirely, so DITA
-   content still emitting .text-primary would otherwise get no color at all. */
-.text-primary {
-    color: var(--bs-primary-base) !important;
-}
-
-.text-secondary {
-    color: var(--bs-secondary-base) !important;
-}
-
-.text-success {
-    color: var(--bs-success-base) !important;
-}
-
-.text-danger {
-    color: var(--bs-danger-base) !important;
-}
-
-.text-warning {
-    color: var(--bs-warning-base) !important;
-}
-
-.text-info {
-    color: var(--bs-info-base) !important;
-}
-
 /* 14. Accordion Caret Alignment Fix & Header Font Reset */
 .accordion-header {
     display: flex !important;
diff --git a/css/menubar-toc.css b/css/menubar-toc.css
index ab94547e..baf20734 100644
--- a/css/menubar-toc.css
+++ b/css/menubar-toc.css
@@ -6,7 +6,7 @@
 /*! This value keeps the sidebar-nav below the menubar-toc
  *  main content window compared with the sidebar-nav
  */
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
   .bs-sidebar {
     top: 9rem;
     height: calc(100vh - 13rem);
diff --git a/css/scrollspy-toc.css b/css/scrollspy-toc.css
index aa0eb6b3..96faacb3 100644
--- a/css/scrollspy-toc.css
+++ b/css/scrollspy-toc.css
@@ -2,7 +2,7 @@
   grid-area: scrollspy;
 }
 
-@media (max-width: 991.98px) {
+@media (max-width: 1023.98px) {
   .bs-main {
     grid-template-areas: 'content';
   }
@@ -12,10 +12,13 @@
   }
 }
 
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
   .bs-main {
     grid-template-areas: 'content scrollspy';
-    grid-template-columns: 4fr 1fr;
+    /* A bare 1fr track computes to ~225px on typical viewports, and Bootstrap's
+       base .nav-link is white-space: nowrap, so long headings just overflow
+       past the track edge instead of wrapping. Floor it wider. */
+    grid-template-columns: minmax(0, 4fr) minmax(280px, 1fr);
   }
 
   .bs-scrollspy {
@@ -25,6 +28,7 @@
     z-index: 2;
     height: calc(100vh - 6rem);
     overflow-y: auto;
+    padding-inline: 0.5rem;
   }
 }
 
@@ -50,20 +54,24 @@
 .bs-scrollspy nav a {
   display: block;
   padding: 0.125rem 0 0.125rem 0.75rem;
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
   text-decoration: none;
   border-left: 0.125rem solid transparent;
+  /* Bootstrap's base .nav-link is white-space: nowrap, which forces long
+     headings past the column edge instead of wrapping onto a second line. */
+  white-space: normal;
+  overflow-wrap: break-word;
 }
 
 .bs-scrollspy nav a:hover,
 .bs-scrollspy nav a.active {
   color: var(--bs-link-hover-color);
-  border-left-color: var(--bs-primary);
+  border-left-color: var(--bs-primary-base);
 }
 
 .bs-scrollspy nav[dir='rtl'] a.active,
 .bs-scrollspy nav[dir='rtl'] a:hover {
-  border-right-color: var(--bs-primary);
+  border-right-color: var(--bs-primary-base);
   border-right-style: solid;
   border-left-color: transparent;
 }
@@ -74,6 +82,16 @@
   border-left-color: transparent;
 }
 
+/* Bootstrap's .nav-pills .nav-link.active already paints a solid
+   --bs-nav-pills-link-active-bg background. Bootstrap v6 ships its own rules
+   inside @layer, and unlayered CSS always wins the cascade regardless of
+   specificity — so the plain color: var(--bs-link-hover-color) above (meant
+   for the borderless list/list-group modes) overrides Bootstrap's contrast
+   color here too, leaving dark blue text on a bright blue pill. Restore it. */
+.bs-scrollspy nav a.nav-link.active {
+  color: var(--bs-nav-pills-link-active-color);
+}
+
 .bs-scrollspy nav a.active {
   font-weight: 500;
 }
diff --git a/css/side-toc.css b/css/side-toc.css
index e4f372a6..85ea2d56 100644
--- a/css/side-toc.css
+++ b/css/side-toc.css
@@ -10,7 +10,12 @@
 .bs-container {
   display: grid;
   grid-template-areas: 'sidebar main';
-  grid-template-columns: 1fr 5fr;
+  /* A bare 1fr/5fr split has no explicit minimum, so CSS Grid falls back to
+     each track's content-based automatic minimum size. Bootstrap's .nav-link
+     is white-space: nowrap, so a long topic title (nav-toc=nav-pill-*) forces
+     the sidebar track to balloon past its "fair" 1fr share instead of
+     wrapping, spilling text over the main content column. Floor it. */
+  grid-template-columns: minmax(260px, 1fr) minmax(0, 5fr);
   gap: 1.5rem;
 }
 
@@ -18,6 +23,14 @@
   grid-area: sidebar;
 }
 
+/* Same nowrap issue as .bs-scrollspy: Bootstrap's base .nav-link is
+   white-space: nowrap, so long topic titles (nav-toc=nav-pill-*) can't wrap
+   onto a second line and just overflow the sidebar column. */
+.bs-sidebar .nav-link {
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+
 .bs-main {
   grid-area: main;
 }
@@ -35,7 +48,7 @@
   padding-top: 0.25rem;
 }
 
-@media (max-width: 991.98px) {
+@media (max-width: 1023.98px) {
   .bs-main {
     margin-inline: auto;
   }
@@ -53,7 +66,7 @@
   }
 }
 
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
   .bs-main {
     grid-template-areas: 'content';
     grid-template-rows: auto 1fr;
@@ -74,7 +87,7 @@
   }
 }
 
-@media (max-width: 991.98px) {
+@media (max-width: 1023.98px) {
   .bd-navbar .bd-navbar-toggle {
     width: 4.25rem;
   }
@@ -94,7 +107,7 @@
     max-width: calc(100vw - 4rem);
   }
 
-  .bs-sidebar .offcanvas-lg {
+  .bs-sidebar .lg\:drawer {
     border-right-color: var(--bs-border-color);
   }
 }
diff --git a/includes/hdr.navbar.default.xml b/includes/hdr.navbar.default.xml
index 516593af..a09b1344 100644
--- a/includes/hdr.navbar.default.xml
+++ b/includes/hdr.navbar.default.xml
@@ -1,5 +1,5 @@
 <nav
-  class="my-brand 2xl:container bd-gutter flex-wrap lg:flex-nowrap justify-content-start"
+  class="my-brand xl:container flex-wrap lg:flex-nowrap justify-content-start"
   aria-label="Main navigation"
 >
   <div class="container-fluid">
diff --git a/includes/hdr.navbar.example.xml b/includes/hdr.navbar.example.xml
index 05338d75..6687c1f5 100644
--- a/includes/hdr.navbar.example.xml
+++ b/includes/hdr.navbar.example.xml
@@ -1,5 +1,5 @@
 <nav
-  class="2xl:container bd-gutter flex-wrap lg:flex-nowrap justify-content-start"
+  class="xl:container flex-wrap lg:flex-nowrap justify-content-start"
   aria-label="Main navigation"
 >
   <div class="container-fluid">
diff --git a/includes/hdr.sidebar.example.xml b/includes/hdr.sidebar.example.xml
index 37682832..f2a344a6 100644
--- a/includes/hdr.sidebar.example.xml
+++ b/includes/hdr.sidebar.example.xml
@@ -1,5 +1,8 @@
-<div class="offcanvas-header bg-primary border-start border-top">
-  <div class="container navbar-dark text-center">
+<div
+  class="drawer-header bg-primary border-start border-top"
+  data-bs-theme="dark"
+>
+  <div class="container text-center">
     <a class="navbar-brand" href="/">
         <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -21,7 +24,7 @@
   </div>
   <button
     type="button"
-    class="btn-close btn-close-white"
+    class="btn-close"
     data-bs-dismiss="drawer"
     aria-label="Close"
     data-bs-target="#bdSidebar"
diff --git a/includes/hdr.topbar.example.xml b/includes/hdr.topbar.example.xml
index 464200eb..06e21f53 100644
--- a/includes/hdr.topbar.example.xml
+++ b/includes/hdr.topbar.example.xml
@@ -1,19 +1,19 @@
 <nav class="navbar bg-black p-0">
-  <!-- Modify -xxl to change container size -->
-  <div class="container-xxl px-4">
+  <!-- Modify the sm:/md:/lg:/xl: prefix to change container breakpoint -->
+  <div class="xl:container px-4">
     <a class="btn mx-1" href="#!" role="button">
-      <i class="bi bi-github text-white"/>
+      <i class="bi bi-github fg-white"/>
     </a>
     <a class="btn mx-1" href="#!" role="button">
-      <i class="bi bi-linkedin text-white"/>
+      <i class="bi bi-linkedin fg-white"/>
     </a>
     <a class="btn mx-1" href="#!" role="button">
-      <i class="bi bi-mastodon text-white"/>
+      <i class="bi bi-mastodon fg-white"/>
     </a>
-    <a class="nav-link text-white ms-auto" href="#">
+    <a class="nav-link fg-white ms-auto" href="#">
       Log In
     </a>
-    <a class="nav-link text-white ms-4" href="#">
+    <a class="nav-link fg-white ms-4" href="#">
       Sign Up
     </a>
   </div>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 9a734898..fe9a8582 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -24,7 +24,7 @@
   <xsl:param name="BOOTSTRAP_CSS_ACCORDION" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_NAV" select="'bg-subtle-secondary'"/>
   <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_LINK" select="'btn btn-outline theme-primary btn-sm'"/>
-  <xsl:param name="BOOTSTRAP_CSS_FIGURE" select="' w-100 mw-100 p-3 '"/>
+  <xsl:param name="BOOTSTRAP_CSS_FIGURE" select="' w-100 max-w-100 p-3 '"/>
   <xsl:param name="BOOTSTRAP_CSS_FIGURE_CAPTION" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_FIGURE_IMAGE" select="'img-fluid border rounded'"/>
   <xsl:param name="BOOTSTRAP_CSS_DL" select="'row'"/>
@@ -510,7 +510,7 @@
             else if (contains(@class, ' topic/lq ') and parent::*[contains(@class, ' topic/fig ')]) then ''
             else if (contains(@class, ' topic/lq ')) then ' blockquote '
             else if (contains(@class, ' topic/dl ')) then $BOOTSTRAP_CSS_DL
-            else if (contains(@class, ' topic/image ') and ancestor::*[contains(@class, ' topic/fig ')]) then '  figure-img ' || $BOOTSTRAP_CSS_FIGURE_IMAGE
+            else if (contains(@class, ' topic/image ') and ancestor::*[contains(@class, ' topic/fig ')]) then ' ' || $BOOTSTRAP_CSS_FIGURE_IMAGE
             else if (contains(@outputclass, 'carousel-')) then 'carousel'
             else if (contains(@class, ' topic/title ') and ancestor::*[contains(@outputclass, 'alert-')]) then 'alert-heading'
             else if (contains(@class, ' topic/xref ') and ancestor::*[contains(@outputclass, 'alert-')]) then 'alert-link'

From 28309e258348cce01220ae2fbc6c389fc4f743a3 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 8 Aug 2026 08:02:04 +0200
Subject: [PATCH 47/87] Tweaking sidebar items

---
 Customization/xsl/nav.xsl |  6 +++---
 css/scrollspy-toc.css     | 11 -----------
 css/side-toc.css          | 13 ++++---------
 3 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/Customization/xsl/nav.xsl b/Customization/xsl/nav.xsl
index 60778cf9..08382d3f 100644
--- a/Customization/xsl/nav.xsl
+++ b/Customization/xsl/nav.xsl
@@ -603,7 +603,7 @@
                   <xsl:call-template name="nav-attributes">
                     <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>
                     <xsl:with-param name="class">
-                      <xsl:text>my-1 nav-link</xsl:text>
+                      <xsl:text>nav-link</xsl:text>
                       <xsl:value-of select="$active-class"/>
                     </xsl:with-param>
                   </xsl:call-template>
@@ -671,7 +671,7 @@
               <xsl:call-template name="nav-attributes">
                 <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>
                 <xsl:with-param name="class">
-                  <xsl:text>my-1 nav-link</xsl:text>
+                  <xsl:text>nav-link</xsl:text>
                   <xsl:value-of select="$active-class"/>
                 </xsl:with-param>
               </xsl:call-template>
@@ -681,7 +681,7 @@
           </xsl:when>
           <xsl:otherwise>
             <!-- ↓ Add Bootstrap nav-brand class ↓ -->
-            <span class="my-1 ps-3 navbar-brand pt-2 pb-1">
+            <span class="ps-3 navbar-brand pt-2 pb-1">
               <xsl:call-template name="nav-icon"/>
               <xsl:value-of select="$title"/>
             </span>
diff --git a/css/scrollspy-toc.css b/css/scrollspy-toc.css
index 96faacb3..e67fc0ac 100644
--- a/css/scrollspy-toc.css
+++ b/css/scrollspy-toc.css
@@ -15,9 +15,6 @@
 @media (min-width: 1024px) {
   .bs-main {
     grid-template-areas: 'content scrollspy';
-    /* A bare 1fr track computes to ~225px on typical viewports, and Bootstrap's
-       base .nav-link is white-space: nowrap, so long headings just overflow
-       past the track edge instead of wrapping. Floor it wider. */
     grid-template-columns: minmax(0, 4fr) minmax(280px, 1fr);
   }
 
@@ -57,8 +54,6 @@
   color: var(--bs-fg-body);
   text-decoration: none;
   border-left: 0.125rem solid transparent;
-  /* Bootstrap's base .nav-link is white-space: nowrap, which forces long
-     headings past the column edge instead of wrapping onto a second line. */
   white-space: normal;
   overflow-wrap: break-word;
 }
@@ -82,12 +77,6 @@
   border-left-color: transparent;
 }
 
-/* Bootstrap's .nav-pills .nav-link.active already paints a solid
-   --bs-nav-pills-link-active-bg background. Bootstrap v6 ships its own rules
-   inside @layer, and unlayered CSS always wins the cascade regardless of
-   specificity — so the plain color: var(--bs-link-hover-color) above (meant
-   for the borderless list/list-group modes) overrides Bootstrap's contrast
-   color here too, leaving dark blue text on a bright blue pill. Restore it. */
 .bs-scrollspy nav a.nav-link.active {
   color: var(--bs-nav-pills-link-active-color);
 }
diff --git a/css/side-toc.css b/css/side-toc.css
index 85ea2d56..4b73f49a 100644
--- a/css/side-toc.css
+++ b/css/side-toc.css
@@ -10,11 +10,6 @@
 .bs-container {
   display: grid;
   grid-template-areas: 'sidebar main';
-  /* A bare 1fr/5fr split has no explicit minimum, so CSS Grid falls back to
-     each track's content-based automatic minimum size. Bootstrap's .nav-link
-     is white-space: nowrap, so a long topic title (nav-toc=nav-pill-*) forces
-     the sidebar track to balloon past its "fair" 1fr share instead of
-     wrapping, spilling text over the main content column. Floor it. */
   grid-template-columns: minmax(260px, 1fr) minmax(0, 5fr);
   gap: 1.5rem;
 }
@@ -23,12 +18,12 @@
   grid-area: sidebar;
 }
 
-/* Same nowrap issue as .bs-scrollspy: Bootstrap's base .nav-link is
-   white-space: nowrap, so long topic titles (nav-toc=nav-pill-*) can't wrap
-   onto a second line and just overflow the sidebar column. */
-.bs-sidebar .nav-link {
+.bs-sidebar .nav-pills .nav-link {
   white-space: normal;
   overflow-wrap: break-word;
+  font-size: 0.875rem;
+  justify-content: flex-start;
+  text-align: left;
 }
 
 .bs-main {

From bd97bc3bb18a8c8c9d4e6a543c425a08ce6eba22 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 8 Aug 2026 08:06:48 +0200
Subject: [PATCH 48/87] Reduce button size

---
 Customization/xsl/nav.xsl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Customization/xsl/nav.xsl b/Customization/xsl/nav.xsl
index 08382d3f..033db6df 100644
--- a/Customization/xsl/nav.xsl
+++ b/Customization/xsl/nav.xsl
@@ -743,7 +743,7 @@
                   <!-- ↓ Add Toggle without text ↓ -->
                   <button data-bs-toggle="collapse">
                     <xsl:attribute name="class">
-                      <xsl:text>btn d-inline-flex align-items-center p-0 border-0</xsl:text>
+                      <xsl:text>btn btn-sm d-inline-flex align-items-center p-0 border-0</xsl:text>
                       <xsl:if test="$show-menu='show'">
                         <xsl:text> active</xsl:text>
                       </xsl:if>
@@ -793,7 +793,7 @@
               <div class="d-flex flex-row ps-0">
                 <button data-bs-toggle="collapse">
                   <xsl:attribute name="class">
-                    <xsl:text>btn d-inline-flex align-items-center p-0 border-0</xsl:text>
+                    <xsl:text>btn btn-sm d-inline-flex align-items-center p-0 border-0</xsl:text>
                     <xsl:if test="$show-menu='show'">
                       <xsl:text> active</xsl:text>
                     </xsl:if>

From a77821e567d8204dd8b9aa29e8b3faed6f987997 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 8 Aug 2026 11:29:17 +0200
Subject: [PATCH 49/87] Remove border

---
 Customization/xsl/nav.xsl | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/Customization/xsl/nav.xsl b/Customization/xsl/nav.xsl
index 033db6df..412c04d8 100644
--- a/Customization/xsl/nav.xsl
+++ b/Customization/xsl/nav.xsl
@@ -258,9 +258,6 @@
           <xsl:if test="$BOOTSTRAP_SIDEBAR_FTR">
             <xsl:text> bs-fixed-sidetoc</xsl:text>
           </xsl:if>
-          <xsl:if test="$nav-toc = ('nav-pill-partial', 'nav-pill-full')">
-            <xsl:text> alert theme-secondary</xsl:text>
-          </xsl:if>
         </xsl:attribute>
 
         <xsl:choose>

From 1a177f5f6b995c56bba5c7900615c1bc690ccc98 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 8 Aug 2026 11:33:51 +0200
Subject: [PATCH 50/87] Remove unnecessary background

---
 Customization/xsl/scrollspy.xsl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Customization/xsl/scrollspy.xsl b/Customization/xsl/scrollspy.xsl
index 20717165..5ae42e13 100644
--- a/Customization/xsl/scrollspy.xsl
+++ b/Customization/xsl/scrollspy.xsl
@@ -22,7 +22,7 @@
         </div>
       </xsl:when>
       <xsl:when test="$BOOTSTRAP_SCROLLSPY_TOC = ('nav-pill')">
-        <nav class="nav nav-pills flex-column bg-subtle-secondary" id="bs-scrollspy">
+        <nav class="nav nav-pills flex-column" id="bs-scrollspy">
           <xsl:if test="$BIDIRECTIONAL_DOCUMENT = 'yes'">
             <xsl:attribute name="dir" select="'rtl'"/>
           </xsl:if>

From 9aef5d63dfa15231b5a10464825ee036b6c89f5d Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 8 Aug 2026 11:58:15 +0200
Subject: [PATCH 51/87] Parameterize menu-toc CSS.

---
 Customization/xsl/nav.xsl                 |  3 ++-
 README.md                                 |  3 ++-
 insertParameters.xml                      |  5 +++++
 plugin.xml                                | 14 +++++++++-----
 sample/index.dita                         | 10 ++++++++++
 sample/nav.dita                           | 10 ++++++++++
 xsl/dita2html5-bootstrapImpl_template.xsl |  4 +++-
 xsl/dita2html5-legacy-3.0_template.xsl    |  4 +++-
 8 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/Customization/xsl/nav.xsl b/Customization/xsl/nav.xsl
index 412c04d8..97022b2d 100644
--- a/Customization/xsl/nav.xsl
+++ b/Customization/xsl/nav.xsl
@@ -172,7 +172,8 @@
 
   <!-- Generate a menubar-toc - a menubar as part of the static header -->
   <xsl:template match="*" mode="gen-user-toptoc">
-    <div class="bg-3">
+    <div>
+      <xsl:attribute name="class" select="$BOOTSTRAP_CSS_MENUBAR_TOC"/>
       <div>
         <xsl:attribute name="class" select="$BOOTSTRAP_CSS_CONTAINER_SIZE"/>
         <nav xsl:use-attribute-sets="menubar-toc">
diff --git a/README.md b/README.md
index 9cb83774..8e145be1 100644
--- a/README.md
+++ b/README.md
@@ -170,7 +170,7 @@ The HTML output for the following DITA elements can be annotated with common Boo
 - `bootstrap.css.carousel.caption` – Common utility classes for Bootstrap carousel captions
 - `bootstrap.css.carousel.indicators` – Common utility classes for Bootstrap carousel indicators
 - `bootstrap.css.codeblock` – Common Bootstrap utility classes for DITA `<codeblock>` elements
-- `bootstrap.css.container.size` – Bootstrap container class for main layout and menubar-TOC. Options: `container`, `container-fluid`, `container-sm`, `container-md`, `container-lg`, `container-xl`, `container-xxl` (default)
+- `bootstrap.css.container.size` – Bootstrap container class for main layout and menubar-TOC. Options: `container`, `container-fluid`, `sm:container`, `md:container`, `lg:container`, `xl:container` (default)
 - `bootstrap.css.dd` – Common utility classes for DITA `<dd>` elements
 - `bootstrap.css.dl` – Common utility classes for DITA `<dl>` elements
 - `bootstrap.css.dt` – Common utility classes for DITA `<dt>` elements
@@ -178,6 +178,7 @@ The HTML output for the following DITA elements can be annotated with common Boo
 - `bootstrap.css.figure.caption` – Common utility classes for DITA figure titles
 - `bootstrap.css.figure.image` – Common utility classes for images within DITA`<fig>` elements
 - `bootstrap.css.footer` – Common utility classes for the HTML `<footer>` element
+- `bootstrap.css.menubar.toc` – CSS class for the menu bar. Defaults to `sticky-top`
 - `bootstrap.css.nav.parent` – Common utility classes for ancestors of active nav-pill elements
 - `bootstrap.css.pagination` – Common utility classes for Bootstrap pagination components
 - `bootstrap.css.section.title` – Common Bootstrap utility classes for DITA `<section>` titles
diff --git a/insertParameters.xml b/insertParameters.xml
index f300ddf0..59567663 100644
--- a/insertParameters.xml
+++ b/insertParameters.xml
@@ -259,4 +259,9 @@
     expression="${bootstrap.css.container.size}"
     if:set="bootstrap.css.container.size"
   />
+  <param
+    name="BOOTSTRAP_CSS_MENUBAR_TOC"
+    expression="${bootstrap.css.menubar.toc}"
+    if:set="bootstrap.css.menubar.toc"
+  />
 </dummy>
diff --git a/plugin.xml b/plugin.xml
index 3caaa00b..8a9a9542 100755
--- a/plugin.xml
+++ b/plugin.xml
@@ -177,6 +177,11 @@
       type="string"
       desc="Bootstrap classes for footers"
     />
+    <param
+      name="bootstrap.css.menubar.toc"
+      type="string"
+      desc="CSS class for the menu bar. Defaults to sticky-top"
+    />
     <param
       name="bootstrap.css.tabs"
       type="string"
@@ -372,11 +377,10 @@
       desc="Defines Bootstrap container class for main layout and menubar-TOC."
     >
       <val>container</val>
-      <val>container-sm</val>
-      <val>container-md</val>
-      <val>container-lg</val>
-      <val>container-xl</val>
-      <val default="true">container-xxl</val>
+      <val>sm:container</val>
+      <val>md:container</val>
+      <val>lg:container</val>
+      <val default="true">xl:container</val>
       <val>container-fluid</val>
     </param>
   </transtype>
diff --git a/sample/index.dita b/sample/index.dita
index 57d6f027..029e671e 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -600,6 +600,7 @@
       <indexterm><parmname>--bootstrap.css.carousel.caption</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.carousel.indicators</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.footer</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.menubar.toc</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.table</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.tabs</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.tabs.vertical</parmname></indexterm>
@@ -765,6 +766,15 @@
             <xmlelement>footer</xmlelement> element
           </pd>
         </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.css&#8203;.menubar&#8203;.toc</parmname>
+          </pt>
+          <pd>
+            CSS class for the <xref href="./nav.dita" format="dita">menu bar</xref>. Defaults to
+            <option>sticky-top</option>
+          </pd>
+        </plentry>
         <plentry>
           <pt>
             <parmname>--bootstrap.css&#8203;.nav&#8203;.parent</parmname>
diff --git a/sample/nav.dita b/sample/nav.dita
index 0dda537a..a4dd5e1b 100644
--- a/sample/nav.dita
+++ b/sample/nav.dita
@@ -183,6 +183,16 @@
       <fig>
         <image scalefit="yes" href="./src/menubar-toc.png"/>
       </fig>
+      <p>The menu bar's wrapper element defaults to Bootstrap's <option>sticky-top</option> utility
+        class, keeping it pinned to the top of the viewport while scrolling. This can be overridden
+        using the <parmname>--bootstrap.css.menubar.toc</parmname> parameter, for example to use a
+        plain background tint instead of sticky positioning:</p>
+      <codeblock outputclass="language-bash"><cmdname>dita</cmdname> <parmname>--input</parmname>=<filepath
+        >path/to/your.ditamap</filepath> \
+     <parmname>--format</parmname>=<option>html5-bootstrap</option> \
+     <parmname>--nav-toc</parmname>=<option>list-group-partial</option> \
+     <parmname>--menubar-toc.include</parmname>=<option>yes</option> \
+     <parmname>--bootstrap.css.menubar.toc</parmname>=<option>bg-3</option></codeblock>
     </section>
     <section id="top-bar">
       <title>Top bar</title>
diff --git a/xsl/dita2html5-bootstrapImpl_template.xsl b/xsl/dita2html5-bootstrapImpl_template.xsl
index 529959b6..a4a14d5d 100644
--- a/xsl/dita2html5-bootstrapImpl_template.xsl
+++ b/xsl/dita2html5-bootstrapImpl_template.xsl
@@ -16,7 +16,9 @@
   <!-- Whether to include a scrollspy Toc -->
   <xsl:param name="BOOTSTRAP_SCROLLSPY_TOC" select="'none'"/>
   <!-- Defines container class for main layout and menubar-TOC -->
-  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'2xl:container'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'xl:container'"/>
+  <!-- Defines the CSS class for the menubar-TOC -->
+  <xsl:param name="BOOTSTRAP_CSS_MENUBAR_TOC" select="'sticky-top'"/>
 
   <xsl:import href="plugin:org.dita.base:xsl/common/output-message.xsl"/>
   <xsl:import href="plugin:org.dita.base:xsl/common/dita-utilities.xsl"/>
diff --git a/xsl/dita2html5-legacy-3.0_template.xsl b/xsl/dita2html5-legacy-3.0_template.xsl
index c9c80a1a..1ea6d5fd 100644
--- a/xsl/dita2html5-legacy-3.0_template.xsl
+++ b/xsl/dita2html5-legacy-3.0_template.xsl
@@ -16,7 +16,9 @@
   <!-- Whether to include a scrollspy Toc -->
   <xsl:param name="BOOTSTRAP_SCROLLSPY_TOC" select="'none'"/>
   <!-- Defines container class for main layout and menubar-TOC -->
-  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'2xl:container'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'xl:container'"/>
+  <!-- Defines the CSS class for the menubar-TOC -->
+  <xsl:param name="BOOTSTRAP_CSS_MENUBAR_TOC" select="'sticky-top'"/>
 
   <xsl:import href="plugin:org.dita.base:xsl/common/output-message.xsl"/>
   <xsl:import href="plugin:org.dita.base:xsl/common/dita-utilities.xsl"/>

From f61ea7c636b7524a65bf1f907dc343360922e247 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 8 Aug 2026 12:00:55 +0200
Subject: [PATCH 52/87] Amend text

---
 sample/nav.dita | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sample/nav.dita b/sample/nav.dita
index a4dd5e1b..517f3516 100644
--- a/sample/nav.dita
+++ b/sample/nav.dita
@@ -183,7 +183,7 @@
       <fig>
         <image scalefit="yes" href="./src/menubar-toc.png"/>
       </fig>
-      <p>The menu bar's wrapper element defaults to Bootstrap's <option>sticky-top</option> utility
+      <p>The menu bar's CSS class defaults to Bootstrap's <option>sticky-top</option> utility
         class, keeping it pinned to the top of the viewport while scrolling. This can be overridden
         using the <parmname>--bootstrap.css.menubar.toc</parmname> parameter, for example to use a
         plain background tint instead of sticky positioning:</p>

From 47efbb86aae5c4b8e7a2cbac5f68b6e2e217198f Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 8 Aug 2026 12:43:27 +0200
Subject: [PATCH 53/87] Use Bootstrap variables for offsets

---
 Customization/xsl/nav.xsl                 |  2 +-
 README.md                                 |  2 +-
 css/menubar-toc.css                       | 19 ++++++++++---------
 css/scrollspy-toc.css                     |  5 +++--
 css/side-toc.css                          |  5 +++--
 plugin.xml                                |  2 +-
 sample/index.dita                         |  2 +-
 sample/nav.dita                           |  9 +++++----
 xsl/dita2html5-bootstrapImpl_template.xsl |  2 +-
 xsl/dita2html5-legacy-3.0_template.xsl    |  2 +-
 10 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/Customization/xsl/nav.xsl b/Customization/xsl/nav.xsl
index 97022b2d..86f34108 100644
--- a/Customization/xsl/nav.xsl
+++ b/Customization/xsl/nav.xsl
@@ -173,7 +173,7 @@
   <!-- Generate a menubar-toc - a menubar as part of the static header -->
   <xsl:template match="*" mode="gen-user-toptoc">
     <div>
-      <xsl:attribute name="class" select="$BOOTSTRAP_CSS_MENUBAR_TOC"/>
+      <xsl:attribute name="class" select="concat('bs-menubar-toc ', $BOOTSTRAP_CSS_MENUBAR_TOC)"/>
       <div>
         <xsl:attribute name="class" select="$BOOTSTRAP_CSS_CONTAINER_SIZE"/>
         <nav xsl:use-attribute-sets="menubar-toc">
diff --git a/README.md b/README.md
index 8e145be1..4eeebb41 100644
--- a/README.md
+++ b/README.md
@@ -178,7 +178,7 @@ The HTML output for the following DITA elements can be annotated with common Boo
 - `bootstrap.css.figure.caption` – Common utility classes for DITA figure titles
 - `bootstrap.css.figure.image` – Common utility classes for images within DITA`<fig>` elements
 - `bootstrap.css.footer` – Common utility classes for the HTML `<footer>` element
-- `bootstrap.css.menubar.toc` – CSS class for the menu bar. Defaults to `sticky-top`
+- `bootstrap.css.menubar.toc` – CSS class for the menu bar. Defaults to `sticky-top bg-body`
 - `bootstrap.css.nav.parent` – Common utility classes for ancestors of active nav-pill elements
 - `bootstrap.css.pagination` – Common utility classes for Bootstrap pagination components
 - `bootstrap.css.section.title` – Common Bootstrap utility classes for DITA `<section>` titles
diff --git a/css/menubar-toc.css b/css/menubar-toc.css
index baf20734..1dab6338 100644
--- a/css/menubar-toc.css
+++ b/css/menubar-toc.css
@@ -3,17 +3,18 @@
  *  See the accompanying LICENSE file for applicable licenses.
  */
 
-/*! This value keeps the sidebar-nav below the menubar-toc
- *  main content window compared with the sidebar-nav
+/*! This value keeps the menubar-toc below the nav-bar
  */
+.bs-menubar-toc.sticky-top {
+  top: calc(var(--bs-navbar-min-height, 3.5rem) + 0px);
+}
+
 @media (min-width: 1024px) {
-  .bs-sidebar {
-    top: 9rem;
-    height: calc(100vh - 13rem);
-  }
+  .bs-sidebar,
   .bs-scrollspy {
-    top: 9rem;
-    height: calc(100vh - 13rem);
+    --bs-menubar-toc-offset: calc(2 * var(--bs-navbar-min-height, 3.5rem) + 2rem);
+    top: var(--bs-menubar-toc-offset);
+    height: calc(100vh - var(--bs-menubar-toc-offset) - 4rem);
   }
 }
 
@@ -28,6 +29,6 @@ article h3,
 article h4,
 article [tabindex='0'],
 section {
-  scroll-margin-top: 9rem;
+  scroll-margin-top: calc(2 * var(--bs-navbar-min-height, 3.5rem) + 2rem);
   scroll-margin-bottom: 100px;
 }
diff --git a/css/scrollspy-toc.css b/css/scrollspy-toc.css
index e67fc0ac..09998cc9 100644
--- a/css/scrollspy-toc.css
+++ b/css/scrollspy-toc.css
@@ -19,11 +19,12 @@
   }
 
   .bs-scrollspy {
+    --bs-scrollspy-top: calc(var(--bs-navbar-min-height, 3.5rem) + 1.75rem);
     position: sticky;
-    top: 5.25rem;
+    top: var(--bs-scrollspy-top);
     right: 0;
     z-index: 2;
-    height: calc(100vh - 6rem);
+    height: calc(100vh - var(--bs-scrollspy-top) - 0.75rem);
     overflow-y: auto;
     padding-inline: 0.5rem;
   }
diff --git a/css/side-toc.css b/css/side-toc.css
index 4b73f49a..4b5d9d2b 100644
--- a/css/side-toc.css
+++ b/css/side-toc.css
@@ -73,10 +73,11 @@
   }
 
   .bs-sidebar {
+    --bs-sidebar-top: calc(var(--bs-navbar-min-height, 3.5rem) + 1.5rem);
     position: sticky;
-    top: 5rem;
+    top: var(--bs-sidebar-top);
     display: block !important;
-    height: calc(100vh - 6rem);
+    height: calc(100vh - var(--bs-sidebar-top) - 1rem);
     padding-left: 0.25rem;
     margin-left: -0.25rem;
   }
diff --git a/plugin.xml b/plugin.xml
index 8a9a9542..9cedbf1e 100755
--- a/plugin.xml
+++ b/plugin.xml
@@ -180,7 +180,7 @@
     <param
       name="bootstrap.css.menubar.toc"
       type="string"
-      desc="CSS class for the menu bar. Defaults to sticky-top"
+      desc="CSS class for the menu bar. Defaults to sticky-top bg-body"
     />
     <param
       name="bootstrap.css.tabs"
diff --git a/sample/index.dita b/sample/index.dita
index 029e671e..cb44a748 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -772,7 +772,7 @@
           </pt>
           <pd>
             CSS class for the <xref href="./nav.dita" format="dita">menu bar</xref>. Defaults to
-            <option>sticky-top</option>
+            <option>sticky-top bg-body</option>
           </pd>
         </plentry>
         <plentry>
diff --git a/sample/nav.dita b/sample/nav.dita
index 517f3516..1ccfa497 100644
--- a/sample/nav.dita
+++ b/sample/nav.dita
@@ -183,10 +183,11 @@
       <fig>
         <image scalefit="yes" href="./src/menubar-toc.png"/>
       </fig>
-      <p>The menu bar's CSS class defaults to Bootstrap's <option>sticky-top</option> utility
-        class, keeping it pinned to the top of the viewport while scrolling. This can be overridden
-        using the <parmname>--bootstrap.css.menubar.toc</parmname> parameter, for example to use a
-        plain background tint instead of sticky positioning:</p>
+      <p>The menu bar's CSS class defaults to Bootstrap's <option>sticky-top</option> and
+        <option>bg-body</option> utility classes, keeping it pinned to the top of the viewport
+        while scrolling, with an opaque background so content doesn't show through as it scrolls
+        underneath. This can be overridden using the <parmname>--bootstrap.css.menubar.toc</parmname>
+        parameter, for example to use a plain background tint instead of sticky positioning:</p>
       <codeblock outputclass="language-bash"><cmdname>dita</cmdname> <parmname>--input</parmname>=<filepath
         >path/to/your.ditamap</filepath> \
      <parmname>--format</parmname>=<option>html5-bootstrap</option> \
diff --git a/xsl/dita2html5-bootstrapImpl_template.xsl b/xsl/dita2html5-bootstrapImpl_template.xsl
index a4a14d5d..b4b555e6 100644
--- a/xsl/dita2html5-bootstrapImpl_template.xsl
+++ b/xsl/dita2html5-bootstrapImpl_template.xsl
@@ -18,7 +18,7 @@
   <!-- Defines container class for main layout and menubar-TOC -->
   <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'xl:container'"/>
   <!-- Defines the CSS class for the menubar-TOC -->
-  <xsl:param name="BOOTSTRAP_CSS_MENUBAR_TOC" select="'sticky-top'"/>
+  <xsl:param name="BOOTSTRAP_CSS_MENUBAR_TOC" select="'sticky-top bg-body'"/>
 
   <xsl:import href="plugin:org.dita.base:xsl/common/output-message.xsl"/>
   <xsl:import href="plugin:org.dita.base:xsl/common/dita-utilities.xsl"/>
diff --git a/xsl/dita2html5-legacy-3.0_template.xsl b/xsl/dita2html5-legacy-3.0_template.xsl
index 1ea6d5fd..da950704 100644
--- a/xsl/dita2html5-legacy-3.0_template.xsl
+++ b/xsl/dita2html5-legacy-3.0_template.xsl
@@ -18,7 +18,7 @@
   <!-- Defines container class for main layout and menubar-TOC -->
   <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'xl:container'"/>
   <!-- Defines the CSS class for the menubar-TOC -->
-  <xsl:param name="BOOTSTRAP_CSS_MENUBAR_TOC" select="'sticky-top'"/>
+  <xsl:param name="BOOTSTRAP_CSS_MENUBAR_TOC" select="'sticky-top bg-body'"/>
 
   <xsl:import href="plugin:org.dita.base:xsl/common/output-message.xsl"/>
   <xsl:import href="plugin:org.dita.base:xsl/common/dita-utilities.xsl"/>

From 80e6dff2507ca32f0eba371679890057f8b5e189 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 8 Aug 2026 13:09:38 +0200
Subject: [PATCH 54/87] Center title

---
 sample/index.dita | 100 +++++++++++++++++++++++-----------------------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/sample/index.dita b/sample/index.dita
index cb44a748..4e4bb80b 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -78,9 +78,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/brite/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/brite/"
                     format="html"
                     scope="external"
@@ -95,9 +95,9 @@
                   scope="external"
                   href="https://bootswatch.com/cerulean/thumbnail.png"
                 />
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/cerulean/"
                     format="html"
                     scope="external"
@@ -108,9 +108,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/cosmo/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/cosmo/"
                     format="html"
                     scope="external"
@@ -125,9 +125,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/cyborg/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/cyborg/"
                     format="html"
                     scope="external"
@@ -138,9 +138,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/darkly/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/darkly/"
                     format="html"
                     scope="external"
@@ -151,9 +151,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/flatly/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/flatly/"
                     format="html"
                     scope="external"
@@ -168,9 +168,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/journal/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/journal/"
                     format="html"
                     scope="external"
@@ -181,9 +181,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/litera/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/litera/"
                     format="html"
                     scope="external"
@@ -194,9 +194,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/lumen/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/lumen/"
                     format="html"
                     scope="external"
@@ -211,9 +211,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/lux/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/lux/"
                     format="html"
                     scope="external"
@@ -224,9 +224,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/materia/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/materia/"
                     format="html"
                     scope="external"
@@ -237,9 +237,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/minty/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/minty/"
                     format="html"
                     scope="external"
@@ -254,9 +254,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/morph/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/morph/"
                     format="html"
                     scope="external"
@@ -267,9 +267,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/pulse/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/pulse/"
                     format="html"
                     scope="external"
@@ -280,9 +280,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/quartz/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/quartz/"
                     format="html"
                     scope="external"
@@ -301,9 +301,9 @@
                   scope="external"
                   href="https://bootswatch.com/sandstone/thumbnail.png"
                 />
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/sandstone/"
                     format="html"
                     scope="external"
@@ -314,9 +314,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/simplex/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/simplex/"
                     format="html"
                     scope="external"
@@ -327,9 +327,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/sketchy/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/sketchy/"
                     format="html"
                     scope="external"
@@ -344,9 +344,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/slate/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/slate/"
                     format="html"
                     scope="external"
@@ -357,9 +357,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/solar/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/solar/"
                     format="html"
                     scope="external"
@@ -374,9 +374,9 @@
                   scope="external"
                   href="https://bootswatch.com/spacelab/thumbnail.png"
                 />
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/spacelab/"
                     format="html"
                     scope="external"
@@ -395,9 +395,9 @@
                   scope="external"
                   href="https://bootswatch.com/superhero/thumbnail.png"
                 />
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/superhero/"
                     format="html"
                     scope="external"
@@ -408,9 +408,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/united/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/united/"
                     format="html"
                     scope="external"
@@ -421,9 +421,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/vapor/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/vapor/"
                     format="html"
                     scope="external"
@@ -438,9 +438,9 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/yeti/thumbnail.png"/>
-                <p outputclass="text-center">
+                <p outputclass="d-block w-100 text-center">
                   <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
+                    outputclass="link stretched-link text-decoration-none"
                     href="https://bootswatch.com/yeti/"
                     format="html"
                     scope="external"

From b1e618d1cfff6af435c676912733a84f75f54600 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 8 Aug 2026 13:18:10 +0200
Subject: [PATCH 55/87] Amend container size

---
 Customization/xsl/topic.xsl               | 3 ++-
 sample/index.dita                         | 3 ++-
 xsl/dita2html5-bootstrapImpl_template.xsl | 2 +-
 xsl/dita2html5-legacy-3.0_template.xsl    | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl
index 510ea4d8..9977b501 100644
--- a/Customization/xsl/topic.xsl
+++ b/Customization/xsl/topic.xsl
@@ -782,7 +782,8 @@
         select="concat('visually-hidden-focusable overflow-hidden p-2 ', $BOOTSTRAP_CSS_ACCESSIBILITY_NAV)"
       />
 
-      <div class="xl:container">
+      <div>
+        <xsl:attribute name="class" select="$BOOTSTRAP_CSS_CONTAINER_SIZE"/>
         <a>
           <xsl:attribute name="class" select="concat('d-inline-flex m-1 ', $BOOTSTRAP_CSS_ACCESSIBILITY_LINK)"/>
           <xsl:apply-templates mode="scrollspy-href" select="*[contains(@class, ' topic/title ')][1]"/>
diff --git a/sample/index.dita b/sample/index.dita
index 4e4bb80b..89c077a6 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -704,7 +704,8 @@
             Bootstrap <xref
               href="./containers.dita"
               format="dita"
-            >container class</xref> for main layout and menubar-TOC
+            >container class</xref> for main layout and menubar-TOC.
+            Defaults to <option>2xl:container</option>
           </pd>
         </plentry>
         <plentry>
diff --git a/xsl/dita2html5-bootstrapImpl_template.xsl b/xsl/dita2html5-bootstrapImpl_template.xsl
index b4b555e6..faf3494d 100644
--- a/xsl/dita2html5-bootstrapImpl_template.xsl
+++ b/xsl/dita2html5-bootstrapImpl_template.xsl
@@ -16,7 +16,7 @@
   <!-- Whether to include a scrollspy Toc -->
   <xsl:param name="BOOTSTRAP_SCROLLSPY_TOC" select="'none'"/>
   <!-- Defines container class for main layout and menubar-TOC -->
-  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'xl:container'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'2xl:container'"/>
   <!-- Defines the CSS class for the menubar-TOC -->
   <xsl:param name="BOOTSTRAP_CSS_MENUBAR_TOC" select="'sticky-top bg-body'"/>
 
diff --git a/xsl/dita2html5-legacy-3.0_template.xsl b/xsl/dita2html5-legacy-3.0_template.xsl
index da950704..039c8967 100644
--- a/xsl/dita2html5-legacy-3.0_template.xsl
+++ b/xsl/dita2html5-legacy-3.0_template.xsl
@@ -16,7 +16,7 @@
   <!-- Whether to include a scrollspy Toc -->
   <xsl:param name="BOOTSTRAP_SCROLLSPY_TOC" select="'none'"/>
   <!-- Defines container class for main layout and menubar-TOC -->
-  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'xl:container'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'2xl:container'"/>
   <!-- Defines the CSS class for the menubar-TOC -->
   <xsl:param name="BOOTSTRAP_CSS_MENUBAR_TOC" select="'sticky-top bg-body'"/>
 

From c1a6c593716c68f4c1b49f970fe0d3599609e05f Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sat, 8 Aug 2026 15:40:11 +0200
Subject: [PATCH 56/87] CSS formatting

---
 .github/dita-ot/header.xml | 2 +-
 .gitignore                 | 1 +
 .lefthook.yml              | 4 ++--
 css/scrollspy-toc.css      | 6 +++---
 css/side-toc.css           | 7 ++++---
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml
index fc9f510b..c03495cd 100644
--- a/.github/dita-ot/header.xml
+++ b/.github/dita-ot/header.xml
@@ -28,7 +28,7 @@
         >v6</span>
     </a>
 
-    <ul class="nav navbar-nav flex-row d-none lg:d-flex">
+    <ul class="nav navbar-nav flex-row" data-bs-toggle="nav-overflow">
       <li class="nav-item">
         <a
             class="nav-link"
diff --git a/.gitignore b/.gitignore
index 80ec90ea..fd802f2f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -73,3 +73,4 @@ node_modules
 
 out
 .gstack/
+.husky/
diff --git a/.lefthook.yml b/.lefthook.yml
index 538b7b26..c91702c4 100644
--- a/.lefthook.yml
+++ b/.lefthook.yml
@@ -7,9 +7,9 @@ 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
     stylelint:
       glob: '*.{css}'
-      run: stylelint {staged_files}
+      run: npx stylelint {staged_files}
       stage_fixed: true
diff --git a/css/scrollspy-toc.css b/css/scrollspy-toc.css
index 09998cc9..46505a57 100644
--- a/css/scrollspy-toc.css
+++ b/css/scrollspy-toc.css
@@ -25,8 +25,8 @@
     right: 0;
     z-index: 2;
     height: calc(100vh - var(--bs-scrollspy-top) - 0.75rem);
-    overflow-y: auto;
     padding-inline: 0.5rem;
+    overflow-y: auto;
   }
 }
 
@@ -54,9 +54,9 @@
   padding: 0.125rem 0 0.125rem 0.75rem;
   color: var(--bs-fg-body);
   text-decoration: none;
-  border-left: 0.125rem solid transparent;
-  white-space: normal;
   overflow-wrap: break-word;
+  white-space: normal;
+  border-left: 0.125rem solid transparent;
 }
 
 .bs-scrollspy nav a:hover,
diff --git a/css/side-toc.css b/css/side-toc.css
index 4b5d9d2b..63d3ed8b 100644
--- a/css/side-toc.css
+++ b/css/side-toc.css
@@ -19,11 +19,11 @@
 }
 
 .bs-sidebar .nav-pills .nav-link {
-  white-space: normal;
-  overflow-wrap: break-word;
-  font-size: 0.875rem;
   justify-content: flex-start;
+  font-size: 0.875rem;
   text-align: left;
+  overflow-wrap: break-word;
+  white-space: normal;
 }
 
 .bs-main {
@@ -103,6 +103,7 @@
     max-width: calc(100vw - 4rem);
   }
 
+  /* stylelint-disable-next-line selector-class-pattern */
   .bs-sidebar .lg\:drawer {
     border-right-color: var(--bs-border-color);
   }

From 20e5da26020a85559c80b0fe99cfa232094e035d Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Sun, 9 Aug 2026 15:07:34 +0200
Subject: [PATCH 57/87] Tweak CSS

---
 Customization/xsl/nav.xsl   | 12 ++++++------
 Customization/xsl/topic.xsl |  2 +-
 css/collapsible-toc.css     |  8 ++++----
 css/common-bootstrap.css    |  9 ++-------
 css/custom.css              | 14 +++++++-------
 5 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/Customization/xsl/nav.xsl b/Customization/xsl/nav.xsl
index 86f34108..8b2a58aa 100644
--- a/Customization/xsl/nav.xsl
+++ b/Customization/xsl/nav.xsl
@@ -735,13 +735,13 @@
           <xsl:choose>
             <xsl:when test="normalize-space(@href)">
               <div>
-                <xsl:attribute name="class" select="'d-flex flex-row ps-0'"/>
+                <xsl:attribute name="class" select="'d-flex'"/>
                 <xsl:if test="exists($children)">
                   <xsl:attribute name="id" select="concat('menu-collapse-trigger-',$id)"/>
                   <!-- ↓ Add Toggle without text ↓ -->
                   <button data-bs-toggle="collapse">
                     <xsl:attribute name="class">
-                      <xsl:text>btn btn-sm d-inline-flex align-items-center p-0 border-0</xsl:text>
+                      <xsl:text>btn btn-sm p-0 border-0</xsl:text>
                       <xsl:if test="$show-menu='show'">
                         <xsl:text> active</xsl:text>
                       </xsl:if>
@@ -770,7 +770,7 @@
                   <xsl:call-template name="nav-attributes">
                     <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>
                     <xsl:with-param name="class">
-                      <xsl:text>d-inline-flex align-items-center flex-shrink-1 </xsl:text>
+                      <xsl:text>d-inline-flex align-items-center </xsl:text>
                       <xsl:choose>
                         <xsl:when test="exists($children)"/>
                         <xsl:when test="count(ancestor::*/@href) eq 0"/>
@@ -788,10 +788,10 @@
             </xsl:when>
             <xsl:otherwise>
               <!-- ↓ Add Toggle with title text ↓ -->
-              <div class="d-flex flex-row ps-0">
+              <div class="d-flex">
                 <button data-bs-toggle="collapse">
                   <xsl:attribute name="class">
-                    <xsl:text>btn btn-sm d-inline-flex align-items-center p-0 border-0</xsl:text>
+                    <xsl:text>btn btn-sm p-0 border-0</xsl:text>
                     <xsl:if test="$show-menu='show'">
                       <xsl:text> active</xsl:text>
                     </xsl:if>
@@ -814,7 +814,7 @@
                 </button>
                 <span data-bs-toggle="collapse">
                   <xsl:attribute name="class">
-                    <xsl:text>d-inline-flex align-items-center flex-shrink-1 ps-2</xsl:text>
+                    <xsl:text>d-inline-flex align-items-center ps-2</xsl:text>
                     <xsl:if test="$show-menu='show'">
                       <xsl:text> active</xsl:text>
                     </xsl:if>
diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl
index 9977b501..030393ea 100644
--- a/Customization/xsl/topic.xsl
+++ b/Customization/xsl/topic.xsl
@@ -835,7 +835,7 @@
   <xsl:attribute-set name="toc">
     <xsl:attribute name="role">navigation</xsl:attribute>
     <xsl:attribute name="id">bs-sidebar-nav</xsl:attribute>
-    <xsl:attribute name="class">d-flex align-items-start flex-column h-100 overflow-y-auto</xsl:attribute>
+    <xsl:attribute name="class">d-flex align-items-start flex-column h-100</xsl:attribute>
   </xsl:attribute-set>
 
   <xsl:attribute-set name="menubar-toc">
diff --git a/css/collapsible-toc.css b/css/collapsible-toc.css
index 90e3a695..efe02be5 100644
--- a/css/collapsible-toc.css
+++ b/css/collapsible-toc.css
@@ -24,6 +24,10 @@
   color: var(--bs-link-hover-color);
 }
 
+.bd-links a:focus-visible {
+  outline: var(--bs-focus-ring);
+}
+
 .bd-links span {
   color: var(--bs-fg-body);
 }
@@ -107,10 +111,6 @@
   transform: rotate(90deg);
 }
 
-.bd-links .btn:focus-visible {
-  outline: -webkit-focus-ring-color auto 1px;
-}
-
 .bd-links .active {
   font-weight: 600;
   color: var(--bs-fg-body);
diff --git a/css/common-bootstrap.css b/css/common-bootstrap.css
index 449d3b0e..a02476b8 100644
--- a/css/common-bootstrap.css
+++ b/css/common-bootstrap.css
@@ -6,7 +6,7 @@
 .list-group-item.active,
 .nav-link.active,
 [data-bs-theme='dark'] {
-  --dita-violet: #cc99cd;
+  --dita-violet: color-mix(in oklch, var(--bs-purple-400), var(--bs-white) 30%);
 }
 
 .list-group-item {
@@ -40,7 +40,7 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --dita-violet: #cc99cd;
+    --dita-violet: color-mix(in oklch, var(--bs-purple-400), var(--bs-white) 30%);
   }
 
   [data-bs-theme='light'] {
@@ -120,11 +120,6 @@
   color: color-mix(in oklch, var(--bs-fg-body) 35%, transparent);
 }
 
-.search-box:hover,
-.search-box:focus-visible {
-  outline: -webkit-focus-ring-color auto 1px;
-}
-
 .note {
   border-left: 6px solid;
   border-left-color: var(--bs-alert-border-color, transparent);
diff --git a/css/custom.css b/css/custom.css
index 09a2bb9b..54a995ca 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -14,13 +14,13 @@
 :root,
 [data-bs-theme='light'] {
     /* MDB Modern Color Palette */
-    --bs-primary-base: #3B71CA;
-    --bs-secondary-base: #9FA6B2;
-    --bs-success-base: #14A44D;
-    --bs-info-base: #54B4D3;
-    --bs-warning-base: #E4A11B;
-    --bs-danger-base: #DC4C64;
-    --bs-inverse-base: #332D2D;
+    --bs-primary-base: #3b71ca;
+    --bs-secondary-base: #9fa6b2;
+    --bs-success-base: #14a44d;
+    --bs-info-base: #54b4d3;
+    --bs-warning-base: #e4a11b;
+    --bs-danger-base: #dc4c64;
+    --bs-inverse-base: #332d2d;
 
     /* Mapping Standard Bootstrap Color Names to MDB */
     --bs-blue-500: var(--bs-primary-base);

From bf4d14c90c6fbb197dfacf05d0dcc273de083c4c Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Mon, 10 Aug 2026 07:59:03 +0200
Subject: [PATCH 58/87] Remove custom example processing

---
 .github/dita-ot/theme.css | 11 +-------
 README.md                 |  1 +
 insertParameters.xml      |  5 ++++
 plugin.xml                |  5 ++++
 sample/accordion.dita     | 12 ++++-----
 sample/alerts.dita        | 20 +++++++-------
 sample/badge.dita         |  8 +++---
 sample/borders.dita       | 28 ++++++++++----------
 sample/button-group.dita  | 20 +++++++-------
 sample/buttons.dita       | 16 +++++------
 sample/card.dita          | 20 +++++++-------
 sample/carousel.dita      | 44 +++++++++++++++---------------
 sample/color.dita         | 16 +++++------
 sample/figures.dita       | 12 ++++-----
 sample/grid.dita          |  8 +++---
 sample/icons.dita         | 12 ++++-----
 sample/images.dita        | 16 +++++------
 sample/index.dita         | 10 +++++++
 sample/list-group.dita    | 16 +++++------
 sample/nav.dita           |  4 +--
 sample/rtl.dita           |  4 +--
 sample/shadows.dita       |  8 +++---
 sample/spacing.dita       | 12 ++++-----
 sample/tables.dita        | 44 +++++++++++++++---------------
 sample/tabs.dita          | 12 ++++-----
 sample/tooltips.dita      | 16 +++++------
 sample/typography.dita    | 56 +++++++++++++++++++--------------------
 xsl/utility-classes.xsl   |  2 ++
 28 files changed, 226 insertions(+), 212 deletions(-)

diff --git a/.github/dita-ot/theme.css b/.github/dita-ot/theme.css
index 0b2cfd68..292341b0 100644
--- a/.github/dita-ot/theme.css
+++ b/.github/dita-ot/theme.css
@@ -1,5 +1,5 @@
 /*
-  This sample applies the default Bootstrap 5 theme and any additional CSS overrides
+  This sample applies the default Bootstrap 6 theme and any additional CSS overrides
    ↓ For a custom look-and-feel, a generated Bootstrap theme could be added below ↓
 */
 
@@ -7,15 +7,6 @@
 
 /* ↓  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-border);
diff --git a/README.md b/README.md
index 4eeebb41..4b7b8857 100644
--- a/README.md
+++ b/README.md
@@ -174,6 +174,7 @@ The HTML output for the following DITA elements can be annotated with common Boo
 - `bootstrap.css.dd` – Common utility classes for DITA `<dd>` elements
 - `bootstrap.css.dl` – Common utility classes for DITA `<dl>` elements
 - `bootstrap.css.dt` – Common utility classes for DITA `<dt>` elements
+- `bootstrap.css.example` – Common utility classes for DITA `<example>` elements
 - `bootstrap.css.figure` – Common utility classes for DITA `<fig>` elements
 - `bootstrap.css.figure.caption` – Common utility classes for DITA figure titles
 - `bootstrap.css.figure.image` – Common utility classes for images within DITA`<fig>` elements
diff --git a/insertParameters.xml b/insertParameters.xml
index 59567663..65dc040f 100644
--- a/insertParameters.xml
+++ b/insertParameters.xml
@@ -119,6 +119,11 @@
     expression="${bootstrap.css.accessibility.link}"
     if:set="bootstrap.css.accessibility.link"
   />
+  <param
+    name="BOOTSTRAP_CSS_EXAMPLE"
+    expression="${bootstrap.css.example}"
+    if:set="bootstrap.css.example"
+  />
   <param
     name="BOOTSTRAP_CSS_FIGURE"
     expression="${bootstrap.css.figure}"
diff --git a/plugin.xml b/plugin.xml
index 9cedbf1e..e9449f0c 100755
--- a/plugin.xml
+++ b/plugin.xml
@@ -212,6 +212,11 @@
       type="string"
       desc="Bootstrap classes for accessibility links"
     />
+    <param
+      name="bootstrap.css.example"
+      type="string"
+      desc="Bootstrap classes for examples"
+    />
     <param
       name="bootstrap.css.figure"
       type="string"
diff --git a/sample/accordion.dita b/sample/accordion.dita
index f78c2f94..82a5fe60 100644
--- a/sample/accordion.dita
+++ b/sample/accordion.dita
@@ -40,7 +40,7 @@
       <title>Example</title>
       <p>Click the accordions below to expand/collapse the accordion content.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <bodydiv outputclass="accordion">
         <section id="accordion1" outputclass="show">
           <title>Accordion Item #1</title>
@@ -67,7 +67,7 @@
             Bootstrap’s default variables.</p>
         </section>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -146,7 +146,7 @@
         background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent
         container.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <bodydiv outputclass="accordion-flush">
         <section id="accordion4">
           <title>Accordion Item #1</title>
@@ -167,7 +167,7 @@
             to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</p>
         </section>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -187,7 +187,7 @@
       <title>Always open</title>
       <p>Set <xmlatt>open="yes"</xmlatt> to make accordion items stay open when another item is opened.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <bodydiv outputclass="accordion-open">
         <section id="accordion7" outputclass="show">
           <title>Accordion Item #1</title>
@@ -214,7 +214,7 @@
             Bootstrap’s default variables.</p>
         </section>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/alerts.dita b/sample/alerts.dita
index 55874a71..ea49c71c 100644
--- a/sample/alerts.dita
+++ b/sample/alerts.dita
@@ -32,7 +32,7 @@
         of the eight required contextual classes (e.g., set <xmlatt>outputclass</xmlatt> to
           <codeph>alert theme-success</codeph>).</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <section outputclass="alert theme-primary">A simple primary alert — check it out!</section>
       <section outputclass="alert theme-secondary">A simple secondary alert — check it out!</section>
       <section outputclass="alert theme-success">A simple success alert — check it out!</section>
@@ -41,7 +41,7 @@
       <section outputclass="alert theme-info">A simple info alert — check it out!</section>
       <section outputclass="alert theme-accent">A simple accent alert — check it out!</section>
       <section outputclass="alert theme-inverse">A simple inverse alert — check it out!</section>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -103,7 +103,7 @@
       <title>Additional content</title>
       <p>Alerts can also contain additional HTML elements like headings, paragraphs, icons and links.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <section id="well-done" outputclass="alert theme-success vstack">
         <title><ph 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
@@ -111,7 +111,7 @@
           with this kind of content.</p>
         <p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
       </section>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -149,7 +149,7 @@
         attribute. With the exception <xmlatt>type="othertype"</xmlatt>, an icon is added if <xmlatt
         >type</xmlatt> is present.</p>
     </section>
-    <div outputclass="bd-example">
+    <example>
       <note type="note">This is just a note.</note>
       <note type="notice">Notice this piece of information.</note>
       <note type="fastpath">This note will speed you on your way.</note>
@@ -161,7 +161,7 @@
       <note type="restriction">You can't do what this note says.</note>
       <note type="danger">You may hurt yourself!</note>
       <note type="other" othertype="Another note">This is something other than a normal note.</note>
-    </div>
+    </example>
     <codeblock>&lt;note type="note"&gt;
   This is just a note.
 &lt;/note&gt;
@@ -197,12 +197,12 @@
 &lt;/note&gt;</codeblock>
     <p>The default colors can be overridden by using a <xmlatt>color</xmlatt> attribute or an <xmlatt
       >outputclass</xmlatt>.</p>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <note outputclass="theme-primary">This is a primary note.</note>
       <note outputclass="theme-secondary">This is a secondary note.</note>
       <note outputclass="theme-accent">This is accent note.</note>
       <note outputclass="theme-inverse">This is inverse note.</note>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -235,13 +235,13 @@
     </bodydiv>
 
     <p>Use an additional <xmlatt>icon</xmlatt> attribute or <xmlatt>otherprops</xmlatt> to alter the default icon.</p>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <note type="other" othertype="Search" otherprops="icon(bi-search)">This note has a search icon.</note>
       <note
         type="note"
         otherprops="icon(bi bi-emoji-smile) style(font-size: 2rem; color: cornflowerblue;)"
       >This note uses a styled smile emoji.</note>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/badge.dita b/sample/badge.dita
index 91114dc2..1afefd76 100644
--- a/sample/badge.dita
+++ b/sample/badge.dita
@@ -28,7 +28,7 @@
       <p>Badges scale to match the size of the immediate parent element by using relative font sizing and
           <xmlatt>em</xmlatt> units. As of v5, badges no longer have focus or hover styles for links.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <section>
         <p outputclass="h1">Example heading <ph outputclass="badge theme-primary">New</ph></p>
         <p outputclass="h2">Example heading <ph outputclass="badge theme-primary">New</ph></p>
@@ -37,7 +37,7 @@
         <p outputclass="h5">Example heading <ph outputclass="badge theme-primary">New</ph></p>
         <p outputclass="h6">Example heading <ph outputclass="badge theme-primary">New</ph></p>
       </section>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -58,7 +58,7 @@
         >outputclass</xmlatt> <codeph>text-{color}</codeph> and <codeph
         >bg-{color}</codeph> utilities for styling, which you still may use if you prefer.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <p>
         <ph outputclass="badge theme-primary">Primary</ph>
         <ph outputclass="badge theme-secondary">Secondary</ph>
@@ -69,7 +69,7 @@
         <ph outputclass="badge theme-accent">Accent</ph>
         <ph outputclass="badge theme-inverse">Inverse</ph>
       </p>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/borders.dita b/sample/borders.dita
index f6c8aa79..553b9203 100644
--- a/sample/borders.dita
+++ b/sample/borders.dita
@@ -32,7 +32,7 @@
       <title>Borders</title>
       <p>Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <div outputclass="p-3">
         <ph outputclass="border p-3 border-accent">&#xA0;border&#xA0;</ph>&#xA0;
         <ph outputclass="border-top p-3 border-accent">&#xA0;border-top</ph>&#xA0;
@@ -40,7 +40,7 @@
         <ph outputclass="border-bottom p-3 border-accent">&#xA0;border-bottom</ph>&#xA0;
         <ph outputclass="border-start p-3 border-accent">&#xA0;border-start</ph>
       </div>
-    </bodydiv>
+    </example>
     <codeblock>&lt;ph outputclass="border"&gt;...&lt;/ph&gt;
 &lt;ph outputclass="border-top"&gt;...&lt;/ph&gt;
 &lt;ph outputclass="border-end"&gt;...&lt;/ph&gt;
@@ -53,7 +53,7 @@
         >rounded</xmlatt> attributes provide a semantic way to add borders and rounded corners.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
       <section id="bordered-section" outputclass="p-2 border">
         <title>Bordered Section</title>
         <p>This section has a border.</p>
@@ -71,7 +71,7 @@
           <image scope="external" href="https://picsum.photos/600/400?2"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
@@ -116,7 +116,7 @@
         The <xmlatt>bordercolor</xmlatt> attribute can be used to set the color of the border.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
       <div outputclass="mb-3">
         <ph outputclass="me-2 p-2 border border-1">Width 1</ph>
         <ph outputclass="me-2 p-2 border border-2">Width 2</ph>
@@ -124,7 +124,7 @@
         <ph outputclass="me-2 p-2 border border-4">Width 4</ph>
         <ph outputclass="me-2 p-2 border border-5">Width 5</ph>
       </div>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -144,14 +144,14 @@
       </section>
     </bodydiv>
 
-    <bodydiv outputclass="mt-3 p-3 border">
+    <example outputclass="mt-3">
       <div outputclass="mb-3">
         <ph outputclass="me-2 p-2 border-primary">Primary</ph>
         <ph outputclass="me-2 p-2 border-primary-subtle">Primary subtle</ph>
         <ph outputclass="me-2 p-2 border-success">Success</ph>
         <ph outputclass="me-2 p-2 border-danger">Danger</ph>
       </div>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -169,7 +169,7 @@
       </section>
     </bodydiv>
 
-    <bodydiv outputclass="mt-3 p-3 border">
+    <example outputclass="mt-3">
       <div outputclass="mb-3">
         <ph outputclass="me-2 p-2 border rounded-0">Rounded 0</ph>
         <ph outputclass="me-2 p-2 border rounded-1">Rounded 1</ph>
@@ -178,7 +178,7 @@
         <ph outputclass="me-2 p-2 border rounded-4">Rounded 4</ph>
         <ph outputclass="me-2 p-2 border rounded-5">Rounded 5</ph>
       </div>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -200,12 +200,12 @@
       </section>
     </bodydiv>
 
-    <bodydiv outputclass="mt-3 p-3 border">
+    <example outputclass="mt-3">
       <div outputclass="mb-3 pt-3">
         <ph outputclass="me-5 p-4 border border-info rounded-circle">Circle</ph>
         <ph outputclass="me-2 px-4 py-2 border border-warning rounded-pill">Pill</ph>
       </div>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -224,7 +224,7 @@
       <p>For DITA elements which support the <xmlatt>frame</xmlatt> attribute, such as <xmlelement>lines</xmlelement>
         and <xmlelement>codeblock</xmlelement>, additional frame borders are automatically added as shown:</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <p/>
       <codeblock outputclass="language-cpp" frame="sides">// Simple C++ program to display "Hello World"
 
@@ -282,7 +282,7 @@ and summer’s lease hath all too short a date:
         </tgroup>
       </table>
       <p/>
-    </bodydiv>
+    </example>
     <codeblock>&lt;codeblock frame="sides"&gt;...&lt;/codeblock&gt;
 &lt;lines frame="topbot" outputclass="..."&gt;...&lt;/lines&gt;
 &lt;table frame="all"&gt;...&lt;/table&gt;</codeblock>
diff --git a/sample/button-group.dita b/sample/button-group.dita
index 84c39cd5..2fc01184 100644
--- a/sample/button-group.dita
+++ b/sample/button-group.dita
@@ -29,13 +29,13 @@
           outputclass="btn-group"</xmlelement>
       </p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <bodydiv outputclass="btn-group">
         <xref href="#" outputclass="btn theme-primary">Left</xref>
         <xref href="#" outputclass="btn theme-primary">Middle</xref>
         <xref href="#" outputclass="btn theme-primary">Right</xref>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -57,13 +57,13 @@
     <section id="mixed-styles">
       <title>Mixed styles</title>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <bodydiv outputclass="btn-group">
         <xref href="#" outputclass="btn theme-danger">Left</xref>
         <xref href="#" outputclass="btn theme-warning">Middle</xref>
         <xref href="#" outputclass="btn theme-success">Right</xref>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -85,13 +85,13 @@
     <section id="outlined-styles">
       <title>Outlined styles</title>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <bodydiv outputclass="btn-group">
         <xref href="#" outputclass="btn-outline theme-primary">Left</xref>
         <xref href="#" outputclass="btn-outline theme-primary">Middle</xref>
         <xref href="#" outputclass="btn-outline theme-primary">Right</xref>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -114,7 +114,7 @@
       <title>Button toolbar</title>
       <p>Combine sets of button groups into button toolbars for more complex components.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <bodydiv outputclass="btn-toolbar">
         <bodydiv outputclass="me-2 btn-group">
           <xref href="#" outputclass="btn theme-primary">1</xref>
@@ -131,7 +131,7 @@
           <xref href="#" outputclass="btn theme-info">8</xref>
         </bodydiv>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -176,13 +176,13 @@
       <title>Vertical variation</title>
       <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <bodydiv outputclass="btn-group-vertical">
         <xref href="#" outputclass="btn theme-primary">Top</xref>
         <xref href="#" outputclass="btn theme-primary">Middle</xref>
         <xref href="#" outputclass="btn theme-primary">Bottom</xref>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/buttons.dita b/sample/buttons.dita
index b236baa2..7693fac2 100644
--- a/sample/buttons.dita
+++ b/sample/buttons.dita
@@ -29,7 +29,7 @@
       <p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras
         thrown in for more control.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <xref href="#" outputclass="btn btn-solid btn-styled theme-primary">Primary</xref>
       <xref href="#" outputclass="btn theme-secondary">Secondary</xref>
       <xref href="#" outputclass="btn theme-success">Success</xref>
@@ -38,7 +38,7 @@
       <xref href="#" outputclass="btn theme-info">Info</xref>
       <xref href="#" outputclass="btn theme-accent">Accent</xref>
       <xref href="#" outputclass="btn theme-inverse">Inverse</xref>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
         <section>
@@ -72,7 +72,7 @@
         >btn theme-outline-*</codeph> to remove all background images
         and colors on any button.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <xref href="#" outputclass="btn btn-outline theme-primary">Primary</xref>
       <xref href="#" outputclass="btn btn-outline theme-secondary">Secondary</xref>
       <xref href="#" outputclass="btn btn-outline theme-success">Success</xref>
@@ -81,7 +81,7 @@
       <xref href="#" outputclass="btn btn-outline theme-info">Info</xref>
       <xref href="#" outputclass="btn btn-outline theme-accent">Accent</xref>
       <xref href="#" outputclass="btn btn-outline theme-inverse">Inverse</xref>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -111,10 +111,10 @@
       <p>Fancy larger or smaller buttons? Use <xmlatt>size="large"</xmlatt> or
           <xmlatt>size="small"</xmlatt> for additional sizes.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <xref href="#" outputclass="btn theme-primary btn-lg">Large button</xref>
       <xref href="#" outputclass="btn theme-secondary btn-lg">Large button</xref>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
@@ -129,10 +129,10 @@
         </section>
       </bodydiv>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
       <xref href="#" outputclass="btn theme-primary btn-sm">Small button</xref>
       <xref href="#" outputclass="btn theme-secondary btn-sm">Small button</xref>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
diff --git a/sample/card.dita b/sample/card.dita
index 3b735c0e..f5fef211 100644
--- a/sample/card.dita
+++ b/sample/card.dita
@@ -47,14 +47,14 @@
         >sizing options.</xref>
       </p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <section id="card-title" outputclass="card">
         <title>Card Title</title>
         <image scope="external" href="https://picsum.photos/400/200?a"/>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
         <xref href="#" outputclass="btn-primary">Go Somewhere</xref>
       </section>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -81,7 +81,7 @@
           <codeph>card-link</codeph> to an <xmlelement>xref</xmlelement> tag.</p>
       <p>Subtitles are used by adding a <xmlelement>div</xmlelement> element.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <section id="card-title-1" outputclass="card">
         <title>Card Title</title>
         <div outputclass="h6">Card Subtitle</div>
@@ -89,7 +89,7 @@
         <xref outputclass="card-link" href="#">Card Link</xref>
         <xref outputclass="card-link" href="#">Another Link</xref>
       </section>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -118,7 +118,7 @@
         >card</xmlelement> places an image to the top of the card
       </p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <bodydiv outputclass="row">
         <bodydiv outputclass="col">
           <section outputclass="card">
@@ -127,7 +127,7 @@
           </section>
         </bodydiv>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -150,7 +150,7 @@
         >card-header</xmlelement> and <xmlelement>card-footer</xmlelement> elements.
       </p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <section id="special-title-treatment" outputclass="card">
         <title>Special title treatment</title>
         <div outputclass="card-header">Featured</div>
@@ -158,7 +158,7 @@
         <xref href="#" outputclass="btn-primary">Go somewhere</xref>
         <div outputclass="card-footer">2 days ago</div>
       </section>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -185,14 +185,14 @@
       <p>A card can be colorized by adding a <xmlatt>color</xmlatt> attribute. This
         applies a contextual background color.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <section id="card-title-2" outputclass="card theme-success">
         <title>Card Title</title>
         <div outputclass="card-header">Success Card</div>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
         <xref href="#" outputclass="btn-primary">Go Somewhere</xref>
       </section>
-    </bodydiv>
+    </example>
     <codeblock>&lt;card color="success"&gt;
   &lt;title&gt;Card Title&lt;/title&gt;
   &lt;div outputclass="card-header"&gt;Success Card&lt;/div&gt;
diff --git a/sample/carousel.dita b/sample/carousel.dita
index 8c2dd034..de859baf 100644
--- a/sample/carousel.dita
+++ b/sample/carousel.dita
@@ -39,7 +39,7 @@
         they’re not explicitly required. Add and customize as you see fit.</p>
       <p>Here is an example with slides</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ol outputclass="carousel">
         <li>
           <image scope="external" href="https://picsum.photos/1200/600?a"/>
@@ -51,7 +51,7 @@
           <image scope="external" href="https://picsum.photos/1200/600?c"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -87,7 +87,7 @@
       <p> Set <xmlatt>indicators="yes"</xmlatt> to add indicators to the carousel, alongside the
         previous/next controls. The indicators let users jump directly to a particular slide.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ol outputclass="carousel" otherprops="indicators(true)">
         <li>
           <image scope="external" href="https://picsum.photos/1200/600?d"/>
@@ -99,7 +99,7 @@
           <image scope="external" href="https://picsum.photos/1200/600?f"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -134,7 +134,7 @@
       <title>With captions</title>
       <p>Add captions by using <xmlelement>fig</xmlelement> elements</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ol outputclass="carousel">
         <li>
           <fig>
@@ -155,7 +155,7 @@
           </fig>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -210,7 +210,7 @@
         >grid-row</xmlelement> element to add them within a carousel.
         Additional structure and spacing can be added by using the <xmlelement>grid-col</xmlelement> element.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ol outputclass="carousel">
         <li>
           <div outputclass="row">
@@ -257,7 +257,7 @@ And, kept unused, the user so destroys it.</lines>
           </div>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -323,7 +323,7 @@ And, kept unused, the user so destroys it.</lines>
       <title>Multiple slides side-by-side</title>
       <p>Add multiple <xmlelement>image</xmlelement> elements within each <xmlelement>carousel-item</xmlelement></p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ol outputclass="carousel">
         <li>
           <image scope="external" href="https://picsum.photos/400/200?a"/>
@@ -341,7 +341,7 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/400/200?i"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -391,7 +391,7 @@ And, kept unused, the user so destroys it.</lines>
         >carousel-item</xmlelement> and include a
           <xmlelement>grid-row</xmlelement> element for title texts.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ol outputclass="carousel">
         <li>
           <image scope="external" href="https://picsum.photos/400/200?j"/>
@@ -442,7 +442,7 @@ And, kept unused, the user so destroys it.</lines>
           </div>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <codeblock>&lt;carousel&gt;
   &lt;carousel-item&gt;
     &lt;image href="..." /&gt;
@@ -469,7 +469,7 @@ And, kept unused, the user so destroys it.</lines>
           <xmlelement>div outputclass="bg-body"</xmlelement> or some custom CSS to the carousel items for proper
         crossfading.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <ol outputclass="carousel-fade">
         <li>
           <image scope="external" href="https://picsum.photos/1200/600?a"/>
@@ -481,7 +481,7 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/1200/600?c"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -520,7 +520,7 @@ And, kept unused, the user so destroys it.</lines>
       <p>When <xmlatt>autoplay="no"</xmlatt> is set, the carousel won’t automatically start to cycle on
         page load. Instead, it will only start after the first user interaction.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <ol outputclass="carousel" otherprops="autoplay(false)">
         <li>
           <image scope="external" href="https://picsum.photos/1200/600?d"/>
@@ -532,7 +532,7 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/1200/600?f"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -570,7 +570,7 @@ And, kept unused, the user so destroys it.</lines>
         >carousel</xmlelement> to change the amount of time to delay
         between automatically cycling to the next item.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <ol outputclass="carousel">
         <li>
           <image scope="external" href="https://picsum.photos/1200/600?a"/>
@@ -579,7 +579,7 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/1200/600?b"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <codeblock>&lt;carousel interval="2000"&gt;
   ...
 &lt;/carousel&gt;</codeblock>
@@ -590,7 +590,7 @@ And, kept unused, the user so destroys it.</lines>
         >carousel-item</xmlelement> to change the amount of time to delay
         between automatically cycling to the next item.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <ol outputclass="carousel">
         <li otherprops="interval(2000)">
           <image scope="external" href="https://picsum.photos/1200/600?g"/>
@@ -602,7 +602,7 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/1200/600?i"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -638,7 +638,7 @@ And, kept unused, the user so destroys it.</lines>
       <p>Carousels support swiping left/right on touchscreen devices to move between slides. Add
           <xmlatt>touch="no"</xmlatt> to disable this option.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <ol outputclass="carousel" otherprops="touch(false)">
         <li>
           <image scope="external" href="https://picsum.photos/1200/600?j"/>
@@ -650,7 +650,7 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/1200/600?l"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/color.dita b/sample/color.dita
index 06bd774c..9ba3a470 100644
--- a/sample/color.dita
+++ b/sample/color.dita
@@ -23,7 +23,7 @@
         >color</xmlatt> attribute provides a semantic way to apply standard Bootstrap color themes.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
       <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>
@@ -32,7 +32,7 @@
       <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>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
@@ -65,7 +65,7 @@
       >Decoration attributes can be applied to many base DITA elements to add background color and contrasting text.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
       <section id="section-decoration" outputclass="mt-2 bg-primary fg-contrast-primary">
         <title>Section Decoration</title>
         <p>This section has a primary color background.</p>
@@ -115,7 +115,7 @@
       <note outputclass="mt-2 theme-primary">
         This is a note with a primary color theme.
       </note>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
@@ -224,7 +224,7 @@
       <p>Many specialized components also support the <xmlatt>color</xmlatt> attribute for consistent theming.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
 
       <image scope="external" href="https://picsum.photos/100/100?a" outputclass="img-thumbnail bg-warning"/>
       <section id="card-title" outputclass="card theme-success mt-2 w-50">
@@ -256,7 +256,7 @@
           <image scope="external" href="https://picsum.photos/1200/600?c"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
@@ -319,14 +319,14 @@
       <p>For text-only colorization, the <xmlatt>outputclass</xmlatt> attribute remains the primary method.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
       <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>
-    </bodydiv>
+    </example>
 
     <codeblock>&lt;p outputclass="fg-primary"&gt;fg-primary&lt;/p&gt;
 &lt;p outputclass="fg-secondary"&gt;fg-secondary&lt;/p&gt;
diff --git a/sample/figures.dita b/sample/figures.dita
index ee904a13..d8695155 100644
--- a/sample/figures.dita
+++ b/sample/figures.dita
@@ -36,12 +36,12 @@
       <title>Example</title>
       <p>By default <xmlelement>figure</xmlelement> elements are styled as shown: </p>
     </section>
-    <bodydiv outputclass="bd-example">
+    <example>
       <fig>
         <title>A caption for the image.</title>
         <image scope="external" href="https://picsum.photos/1200/600?a"/>
       </fig>
-    </bodydiv>
+    </example>
     <codeblock>&lt;fig&gt;
   &lt;title&gt;A caption for the image.&lt;/title&gt;
   &lt;image href="..."/&gt;
@@ -51,12 +51,12 @@
       <p>The figure’s caption can be aligned using the Bootstrap
         <xref href="./color.dita" format="dita">text utilities</xref>.</p>
     </section>
-    <bodydiv outputclass="bd-example">
+    <example>
       <fig>
         <title outputclass="text-end">A caption for the image.</title>
         <image scope="external" href="https://picsum.photos/1200/600?b"/>
       </fig>
-    </bodydiv>
+    </example>
     <codeblock>&lt;fig&gt;
   &lt;title outputclass="text-end"&gt;A caption for the image.&lt;/title&gt;
   &lt;image href="..."/&gt;
@@ -67,7 +67,7 @@
       <p>Use the DITA <xmlatt>frame</xmlatt> attribute to add
         <xref href="./borders.dita" format="dita">borders</xref> to a <xmlelement>fig</xmlelement>.</p>
     </section>
-    <bodydiv outputclass="bd-example">
+    <example>
       <fig frame="all">
         <title>All Borders</title>
         <codeblock>frame="all"</codeblock>
@@ -92,7 +92,7 @@
         <title>Bottom Border Only</title>
         <codeblock>frame="bottom"</codeblock>
       </fig>
-    </bodydiv>
+    </example>
     <codeblock>&lt;fig frame="all"&gt;
   ...
 &lt;/fig&gt;
diff --git a/sample/grid.dita b/sample/grid.dita
index 10a078d1..a05b54d5 100644
--- a/sample/grid.dita
+++ b/sample/grid.dita
@@ -32,7 +32,7 @@
         comes together. The <xmlelement>grid-col</xmlelement> element supports <xmlatt>breakpoint</xmlatt> and
           <xmlatt>colspan</xmlatt> attributes to define the column width at different screen sizes.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <bodydiv outputclass="row">
         <bodydiv outputclass="sm:col-3">
           <p>One of three columns</p>
@@ -44,7 +44,7 @@
           <p>One of three columns</p>
         </bodydiv>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -81,7 +81,7 @@
           <codeph>xxl</codeph>. Add any number of unit-less classes for each breakpoint you need and every column will
         be the same width.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <bodydiv outputclass="row">
         <bodydiv outputclass="col">
           <p>One of two columns</p>
@@ -101,7 +101,7 @@
           <p>One of three columns</p>
         </bodydiv>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/icons.dita b/sample/icons.dita
index f69f4c8c..27307771 100644
--- a/sample/icons.dita
+++ b/sample/icons.dita
@@ -36,12 +36,12 @@
       <p>Use a <xmlatt>style</xmlatt> attribute and alter the CSS font-size and color to change the icon
         appearance.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <p>
         <ph outputclass="bi bi-alarm"/>
         <ph outputclass="bi bi-alarm" otherprops="style(font-size: 2rem; color: cornflowerblue;)"/>
       </p>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -55,7 +55,7 @@
         </section>
       </bodydiv>
   <p>Icons placed within an <xmlelement>xref</xmlelement> element are colorized appropriately:</p>
-  <bodydiv outputclass="p-3 border">
+  <example>
     <p>
       <xref href="#" outputclass="link theme-primary">
         <ph outputclass="bi bi-link"/> Primary link
@@ -96,7 +96,7 @@
         <ph outputclass="bi bi-link"/> Inverse link
       </xref>
     </p>
-  </bodydiv>
+  </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -155,14 +155,14 @@
         </section>
       </bodydiv>
     <p>Icons can also be placed within buttons as shown:</p>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <xref outputclass="btn-icon theme-primary" href="#"><ph outputclass="bi bi-arrow-down-square-fill"/></xref>
       <xref outputclass="btn-icon theme-secondary" href="#"><ph outputclass="bi bi-chat-left-quote-fill"/></xref>
       <xref outputclass="btn-icon theme-warning" href="#"><ph outputclass="bi bi-speedometer"/></xref>
       <xref outputclass="btn-icon theme-info" href="#"><ph outputclass="bi bi-camera-fill"/></xref>
       <xref outputclass="btn-icon theme-accent" href="#"><ph outputclass="bi bi-link"/></xref>
       <xref outputclass="btn-icon theme-danger" href="#"><ph outputclass="bi bi-share-fill"/></xref>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/images.dita b/sample/images.dita
index 20f2e350..e2b0dd69 100644
--- a/sample/images.dita
+++ b/sample/images.dita
@@ -31,9 +31,9 @@
           <codeph>max-width: 100%;</codeph> and <codeph>height: auto;</codeph> to the image so that it scales with the
         parent element.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <image scalefit="yes" scope="external" href="https://picsum.photos/1200/600?a"/>
-    </bodydiv>
+    </example>
         <codeblock>&lt;image scalefit="yes" href="..." /&gt;</codeblock>
     <section id="image-thumbnails">
       <title>Image thumbnails</title>
@@ -42,9 +42,9 @@
           utilities</xref>, you can use the specialized <xmlelement>thumbnail</xmlelement> element to give an image
         a rounded 1px border appearance.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <image scope="external" href="https://picsum.photos/100/100?a" outputclass="img-thumbnail"/>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -61,7 +61,7 @@
         and <xmlatt>outputclass="d-dark"</xmlatt> attributes on <xmlelement>image</xmlelement> elements
         to display different images when in <xref href="./dark-mode.dita">dark mode</xref>.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <fig>
         <image outputclass="d-auto img-thumbnail" scope="external" href="https://picsum.photos/id/730/300/200"/>
         <image
@@ -77,7 +77,7 @@
           deliveryTarget="html"
         />
       </fig>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -119,7 +119,7 @@
       different media. The <xmlatt>media</xmlatt> attribute defines the media query and/or
       <xmlatt>type</xmlatt> the image MIME type. The final <xmlelement>image</xmlelement> is the default.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <p>Change the width of the browser to view different images:</p>
       <div outputclass="d-picture">
         <image scope="external" href="https://picsum.photos/id/1/800/400" otherprops="media(min-width: 700px)"/>
@@ -128,7 +128,7 @@
         <image scope="external" href="https://picsum.photos/id/5/200/200.webp" otherprops="type(image/webp)"/>
         <image scope="external" href="https://picsum.photos/id/3/200/200"/>
       </div>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/index.dita b/sample/index.dita
index 89c077a6..ed875f07 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -615,6 +615,7 @@
       <indexterm><parmname>--bootstrap.css.dt</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.dd</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.nav.parent</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.example</parmname></indexterm>
       <p>The HTML output for the following DITA elements can be annotated with common Bootstrap utility classes for
         <xref href="https://getbootstrap.com/docs/6.0/utilities/borders" format="html" scope="external">borders</xref>,
         <xref
@@ -732,6 +733,15 @@
             <xmlelement>dt</xmlelement> definition term elements
           </pd>
         </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.css&#8203;.example</parmname>
+          </pt>
+          <pd>
+            Common Bootstrap utility classes for DITA
+            <xmlelement>example</xmlelement> elements
+          </pd>
+        </plentry>
         <plentry>
           <pt>
             <parmname>--bootstrap.css&#8203;.figure</parmname>
diff --git a/sample/list-group.dita b/sample/list-group.dita
index 81c5e66e..5543959b 100644
--- a/sample/list-group.dita
+++ b/sample/list-group.dita
@@ -31,7 +31,7 @@
       <p>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.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ul outputclass="list-group">
         <li>An item</li>
         <li>A second item</li>
@@ -39,7 +39,7 @@
         <li>A fourth item</li>
         <li>And a fifth one</li>
       </ul>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -66,13 +66,13 @@
       <title>Compacted list group</title>
       <p>Add <xmlatt>compact="yes"</xmlatt> to reduce the padding of list items</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ul outputclass="list-group list-group-compact">
         <li>Item One</li>
         <li>Item Two</li>
         <li>Item Three</li>
       </ul>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -91,13 +91,13 @@
       <title>Expanded list group</title>
       <p>Add <xmlatt>compact="no"</xmlatt> to increase the padding of list items</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ul outputclass="list-group">
         <li>Item One</li>
         <li>Item Two</li>
         <li>Item Three</li>
       </ul>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -117,7 +117,7 @@
       <p>Add a <xmlatt>flush="yes"</xmlatt> to remove some borders and
         rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ul outputclass="list-group list-group-flush">
         <li>An item</li>
         <li>A second item</li>
@@ -125,7 +125,7 @@
         <li>A fourth item</li>
         <li>And a fifth one</li>
       </ul>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/nav.dita b/sample/nav.dita
index 1ccfa497..52db3e1d 100644
--- a/sample/nav.dita
+++ b/sample/nav.dita
@@ -76,7 +76,7 @@
      <parmname>--format</parmname>=<option>html5-bootstrap</option> \
      <parmname>--nav-toc</parmname>=<option>&lt;sidebar-style&gt;</option></codeblock>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ol outputclass="carousel" otherprops="cols(1)">
         <li id="full">
           <fig>
@@ -121,7 +121,7 @@
           </fig>
         </li>
       </ol>
-    </bodydiv>
+    </example>
 
     <section>
       <p>
diff --git a/sample/rtl.dita b/sample/rtl.dita
index 7718dba0..a3d06a61 100644
--- a/sample/rtl.dita
+++ b/sample/rtl.dita
@@ -43,7 +43,7 @@
       <p>Additionally, within any <xmlelement>topic</xmlelement>, setting the <xmlatt>dir</xmlatt> attribute on any DITA
         element thereafter will cause the layout to be recalculated for the enclosed block only.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <bodydiv dir="rtl" outputclass="row">
         <bodydiv outputclass="col">
           <section xml:lang="ar" outputclass="card">
@@ -54,7 +54,7 @@
           </section>
         </bodydiv>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/shadows.dita b/sample/shadows.dita
index d5bde6f6..e57be7b6 100644
--- a/sample/shadows.dita
+++ b/sample/shadows.dita
@@ -26,12 +26,12 @@
         automatically added to prevent the shadow from being clipped by the parent container.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
       <div outputclass="m-3 p-3 shadow-none border">No shadow</div>
       <div outputclass="m-3 p-3 shadow-sm border">Small shadow</div>
       <div outputclass="m-3 p-3 shadow border">Regular shadow</div>
       <div outputclass="m-3 p-3 shadow-lg border">Larger shadow</div>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
@@ -55,13 +55,13 @@
       <p>Shadows can be applied to complex elements as follow:</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
       <section id="shadowed-card" outputclass="card bg-subtle-accent m-3 shadow-lg">
         <title>Shadowed Card</title>
         <p>This card has a large shadow.</p>
       </section>
       <section outputclass="alert theme-accent m-3 shadow-sm">Alert with small shadow</section>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
diff --git a/sample/spacing.dita b/sample/spacing.dita
index e2c03356..bc980f9f 100644
--- a/sample/spacing.dita
+++ b/sample/spacing.dita
@@ -27,7 +27,7 @@
         >auto</codeph>.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
       <div outputclass="m-0 p-2 bg-primary fg-contrast-primary">Margin 0</div>
       <div outputclass="m-1 p-2 bg-secondary fg-contrast-secondary">Margin 1</div>
       <div outputclass="m-2 p-2 bg-success fg-contrast-success">Margin 2</div>
@@ -35,7 +35,7 @@
       <div outputclass="m-4 p-2 bg-warning fg-contrast-warning">Margin 4</div>
       <div outputclass="m-5 p-2 bg-info fg-contrast-info">Margin 5</div>
       <div outputclass="m-auto p-2 w-50 bg-accent fg-contrast-accent">Margin Auto</div>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
@@ -66,7 +66,7 @@
         >padding</xmlatt> attribute controls the internal spacing of an element, supporting values from 0 to 5.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
       <div outputclass="p-0 bg-primary fg-contrast-primary">Padding 0</div>
       <div outputclass="m-1 p-1 bg-secondary"><div
           outputclass="bg-subtle-secondary fg-contrast-subtle-secondary w-100"
@@ -83,7 +83,7 @@
       <div outputclass="m-1 p-5 bg-info"><div
           outputclass="bg-subtle-info fg-contrast-subtle-info w-100"
         >Padding 5</div></div>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
@@ -121,7 +121,7 @@
       <p>Multiple values can be specified as a space-separated list.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
       <div outputclass="mt-5 mb-0 bg-primary fg-contrast-primary">Margin Top 5, Bottom 0</div>
       <div outputclass="mx-3 bg-secondary fg-contrast-secondary">Margin Horizontal 3</div>
       <div outputclass="py-5 bg-success"><div
@@ -130,7 +130,7 @@
       <div outputclass="ps-3 pe-1 bg-danger"><div
           outputclass="bg-subtle-danger fg-contrast-subtle-danger w-100"
         >Padding Start 3, End 1</div></div>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
diff --git a/sample/tables.dita b/sample/tables.dita
index f06be464..c0177808 100644
--- a/sample/tables.dita
+++ b/sample/tables.dita
@@ -34,7 +34,7 @@
       <p>Using the most basic table markup, here’s how the default DITA Bootstrap <codeph>.table</codeph>-based tables
         look in Bootstrap.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table>
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -65,7 +65,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
@@ -110,7 +110,7 @@
       <title>Variants</title>
       <p>Use contextual classes to color tables, table rows or individual cells.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table outputclass="p-1 w-100 theme-primary">
         <tgroup cols="2">
           <thead>
@@ -139,7 +139,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
@@ -210,7 +210,7 @@
       <p>Use <xmlatt>striped="yes"</xmlatt> to add zebra-striping to any table row
         within the <xmlelement>tbody</xmlelement>.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table outputclass="table-striped">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -241,7 +241,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -261,7 +261,7 @@
       <p>Use <xmlatt>striped-columns="yes"</xmlatt> to add zebra-striping to any table column
         within the <xmlelement>tbody</xmlelement>.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table outputclass="table-striped-columns">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -292,7 +292,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -312,7 +312,7 @@
       <p>Add <xmlatt>rowsep="1"</xmlatt> and <xmlatt
         >colsep="1"</xmlatt> for borders on all sides of the table and cells.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table rowsep="1" colsep="1">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -343,7 +343,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -362,7 +362,7 @@
       <title>Tables without borders</title>
       <p>Add <xmlatt>rowsep="0"</xmlatt> and <xmlatt>colsep="0"</xmlatt> for a table without borders.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table rowsep="0" colsep="0">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -393,7 +393,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -413,7 +413,7 @@
       <p>Add <xmlatt>compact="yes"</xmlatt> to make any table more compact by cutting all cell <codeph
         >padding</codeph> in half.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table outputclass="table-sm">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -444,7 +444,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -464,7 +464,7 @@
       <p>Add a thicker border, darker between table groups—<xmlelement>thead</xmlelement> and <xmlelement
         >tbody</xmlelement>, with <xmlatt>divider="yes"</xmlatt> on the table.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table>
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -495,7 +495,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -521,7 +521,7 @@
         >table</xmlelement> and are aligned to the top by default. Use the <xmlatt
         >valign</xmlatt> attribute to re-align where needed.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table outputclass="align-middle">
         <tgroup cols="4">
           <colspec colname="COLSPEC0"/>
@@ -564,7 +564,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -631,7 +631,7 @@
           <xmlatt>color="inverse"</xmlatt> to make <xmlelement>thead</xmlelement> elements appear light or dark
         gray.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table>
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -662,7 +662,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -685,7 +685,7 @@
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table>
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -716,7 +716,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/tabs.dita b/sample/tabs.dita
index e7d8c8a7..695abde0 100644
--- a/sample/tabs.dita
+++ b/sample/tabs.dita
@@ -31,7 +31,7 @@
           style="tabs"</xmlelement> element containing a series of <xmlelement>section</xmlelement> elements
       </p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <bodydiv outputclass="nav-tabs mt-3">
         <section id="home">
           <title>Home</title>
@@ -58,7 +58,7 @@
             Stinging like a bee I earned my stripes.</p>
         </section>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -97,7 +97,7 @@
       </bodydiv>
     <p>The tabs plugin also works with pills using <xmlatt>style="pills"</xmlatt>
     </p>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <bodydiv outputclass="nav-pills mt-3">
         <section id="home-1">
           <title>Home</title>
@@ -124,7 +124,7 @@
             Stinging like a bee I earned my stripes.</p>
         </section>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -163,7 +163,7 @@
       </bodydiv>
     <p>And with vertical pills using <xmlatt>style="vertical-pills"</xmlatt>
     </p>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <bodydiv outputclass="nav-pills-vertical mt-3">
         <section id="home-2">
           <title>Home</title>
@@ -190,7 +190,7 @@
             Stinging like a bee I earned my stripes.</p>
         </section>
       </bodydiv>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/tooltips.dita b/sample/tooltips.dita
index 1d0f141c..97ef8675 100644
--- a/sample/tooltips.dita
+++ b/sample/tooltips.dita
@@ -48,7 +48,7 @@
       <p>Hover over the links below to see tooltips:</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
       <p>Placeholder text to demonstrate some
         <xref href="#" outputclass="tooltip-top"> inline links <desc
           >Default tooltip</desc></xref> with tooltips. This is
@@ -59,7 +59,7 @@
         <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>
-    </bodydiv>
+    </example>
 
     <p>To enable tooltips, add <xmlatt>output-class="tooltip-*"</xmlatt> to the enclosing
       <xmlelement>xref</xmlelement>. For the <xmlelement>tooltip</xmlelement> element use the <xmlatt
@@ -67,7 +67,7 @@
       >output-class</xmlatt> or taken from the attribute.</p>
     <p>Hover over the buttons below to see the four tooltips directions: <codeph>top</codeph>, <codeph>right</codeph>,
         <codeph>bottom</codeph>, and <codeph>left</codeph>. Directions are mirrored when using Bootstrap in RTL.</p>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <xref href="#" outputclass="btn-secondary tooltip-top">
         <desc>Tooltip on top</desc> Tooltip on top </xref>
       <xref href="#" outputclass="btn-secondary tooltip-right">
@@ -76,7 +76,7 @@
         <desc>Tooltip on bottom</desc> Tooltip on bottom </xref>
       <xref href="#" outputclass="btn-secondary tooltip-left">
         <desc>Tooltip on left</desc> Tooltip on left </xref>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
     <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -119,12 +119,12 @@
   </bodydiv>
   <p>Custom HTML can be added to tooltips using additional DITA elements within the <xmlelement>desc</xmlelement>
   </p>
-  <bodydiv outputclass="p-3 border">
+  <example>
     <xref href="#" outputclass="btn-secondary tooltip-top">
       <desc><b>Tooltip</b>
         <u>with</u>
         <b>DITA</b> elements</desc> Tooltip with embedded DITA </xref>
-  </bodydiv>
+  </example>
   <bodydiv outputclass="nav-pills mt-3">
     <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -149,13 +149,13 @@ Tooltip with embedded DITA
     <codeblock outputclass="language-css">.custom-tooltip {
   --bs-tooltip-bg: var(--bs-primary);
 }</codeblock>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <xref href="#" outputclass="btn-secondary tooltip-top">
         <data name="class">custom-tooltip</data>
         <desc>This top tooltip is themed via CSS variables.</desc>
         Custom tooltip
       </xref>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/typography.dita b/sample/typography.dita
index 9f341082..b750170b 100644
--- a/sample/typography.dita
+++ b/sample/typography.dita
@@ -29,14 +29,14 @@
           <xmlatt>outputclass="h1"</xmlatt> through <xmlatt>outputclass="h6"</xmlatt> are also available, for when you
         want to match the font styling of a heading but cannot use the associated HTML element.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <p outputclass="h1">h1. Bootstrap heading</p>
       <p outputclass="h2">h2. Bootstrap heading</p>
       <p outputclass="h3">h3. Bootstrap heading</p>
       <p outputclass="h4">h4. Bootstrap heading</p>
       <p outputclass="h5">h5. Bootstrap heading</p>
       <p outputclass="h6">h6. Bootstrap heading</p>
-    </bodydiv>
+    </example>
     <codeblock>&lt;title outputclass="h1"&gt;h1. Bootstrap heading&lt;/title&gt;
 &lt;title outputclass="h2"&gt;h2. Bootstrap heading&lt;/title&gt;
 &lt;title outputclass="h3"&gt;h3. Bootstrap heading&lt;/title&gt;
@@ -48,9 +48,9 @@
       <p>Annotate a <xmlelement>ph</xmlelement> with an <xmlatt>outputclass</xmlatt> to recreate the small secondary
         heading text from Bootstrap 3.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <p outputclass="h3">Fancy display heading <ph outputclass="fs-md fg-secondary">with faded secondary text</ph></p>
-    </bodydiv>
+    </example>
     <codeblock
     >&lt;title&gt;Fancy display heading &lt;ph outputclass="fs-md fg-secondary"&gt;with faded secondary text&lt;/ph&gt;&lt;/title&gt;</codeblock>
     <section id="display-headings">
@@ -58,14 +58,14 @@
       <p>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.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <p outputclass="fw-light fs-6xl">Display 1</p>
       <p outputclass="fw-light fs-5xl">Display 2</p>
       <p outputclass="fw-light fs-4xl">Display 3</p>
       <p outputclass="fw-light fs-3xl">Display 4</p>
       <p outputclass="fw-light fs-2xl">Display 5</p>
       <p outputclass="fw-light fs-xl">Display 6</p>
-    </bodydiv>
+    </example>
     <codeblock>&lt;title outputclass="fw-light fs-6xl"&gt;Display 1&lt;/title&gt;
 &lt;title outputclass="fw-light fs-5xl"&gt;Display 2&lt;/title&gt;
 &lt;title outputclass="fw-light fs-4xl"&gt;Display 3&lt;/title&gt;
@@ -78,9 +78,9 @@
         >outputclass="fw-light fs-lg"</xmlatt> — this is automatically added to
           <xmlelement>shortdesc</xmlelement> elements.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <p outputclass="fw-light fs-lg">This is a lead paragraph. It stands out from regular paragraphs.</p>
-    </bodydiv>
+    </example>
     <codeblock>&lt;p outputclass="fw-light fs-lg"&gt;
   This is a lead paragraph. It stands out from regular paragraphs.
 &lt;/p&gt;</codeblock>
@@ -88,7 +88,7 @@
       <title>Inline text elements</title>
       <p>Styling for common inline HTML5 elements.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <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 text.</line-through></p>
       <p><u>This line of text will render as underlined.</u></p>
@@ -96,7 +96,7 @@
         print.</p>
       <p><b>This line rendered as bold text.</b></p>
       <p><i>This line rendered as italicized text.</i></p>
-    </bodydiv>
+    </example>
     <codeblock
     >&lt;p&gt;You can use &lt;xmlatt&gt;outputclass="mark"&lt;/xmlatt&gt; to &lt;ph outputclass="mark"&gt;highlight&lt;/ph&gt; text.&lt;/p&gt;
 &lt;p&gt;&lt;line-through&gt;This line of text is meant to be treated as deleted
@@ -119,14 +119,14 @@
         additional context on hover and to users of assistive technologies. </p>
       <p>Add <xmlatt>outputclass="initialism"</xmlatt> to an abbreviation for a slightly smaller font-size.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <p>
         <ph outputclass="abbreviation" otherprops="title(attribute)">attr</ph>
       </p>
       <p>
         <ph outputclass="initialism" otherprops="title(HyperText Markup Language)">HTML</ph>
       </p>
-    </bodydiv>
+    </example>
     <codeblock>&lt;p&gt;
   &lt;ph outputclass="abbreviation" otherprops="title(attribute)"&gt;attr&lt;/ph&gt;
 &lt;/p&gt;
@@ -139,11 +139,11 @@
       <p>For quoting blocks of content from another source within your document, use the DITA
           <xmlelement>lq</xmlelement> element, it is styled automatically.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <lq>
         <p>A well-known quote, contained in a blockquote element.</p>
       </lq>
-    </bodydiv>
+    </example>
     <codeblock>&lt;lq&gt;
   &lt;p&gt;A well-known quote, contained in a blockquote element.&lt;/p&gt;
 &lt;/lq&gt;</codeblock>
@@ -155,14 +155,14 @@
           <xmlelement>fig</xmlelement>. Be sure to wrap the name of the source work in the <xmlelement>cite</xmlelement>
         as well.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <fig>
         <title>Someone famous in <cite>Source Title</cite></title>
         <lq>
           <p>A well-known quote, contained in a blockquote element.</p>
         </lq>
       </fig>
-    </bodydiv>
+    </example>
     <codeblock>&lt;fig&gt;
   &lt;title&gt;Someone famous in &lt;cite&gt;Source Title&lt;/cite&gt;&lt;/title&gt;
   &lt;lq &gt;
@@ -174,28 +174,28 @@
       <p>Use text utilities such as <xmlatt>outputclass="text-center"</xmlatt> as needed to change the alignment of your
         blockquote.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <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>
-    </bodydiv>
+    </example>
     <codeblock>&lt;fig outputclass="text-center"&gt;
   &lt;title&gt;Someone famous in &lt;cite&gt;Source Title&lt;/cite&gt;&lt;/title&gt;
   &lt;lq&gt;
     &lt;p&gt;A well-known quote, contained in a blockquote element.&lt;/p&gt;
   &lt;/lq&gt;
 &lt;/fig&gt;</codeblock>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <fig outputclass="text-end">
         <title>Someone famous in <cite>Source Title</cite></title>
         <lq>
           <p>A well-known quote, contained in a blockquote element.</p>
         </lq>
       </fig>
-    </bodydiv>
+    </example>
     <codeblock>&lt;fig outputclass="text-end"&gt;
   &lt;title&gt;Someone famous in &lt;cite&gt;Source Title&lt;/cite&gt;&lt;/title&gt;
   &lt;lq&gt;
@@ -212,7 +212,7 @@
         immediate children list items, meaning you will need to add the <xmlatt>outputclass="list-unstyled"</xmlatt> for
         any nested lists as well.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ul outputclass="list-unstyled">
         <li>This is a list.</li>
         <li>It appears completely unstyled.</li>
@@ -227,7 +227,7 @@
         </li>
         <li>This may still come in handy in some situations.</li>
       </ul>
-    </bodydiv>
+    </example>
     <codeblock>&lt;ul outputclass="list-unstyled"&gt;
   &lt;li&gt;This is a list.&lt;/li&gt;
   &lt;li&gt;It appears completely unstyled.&lt;/li&gt;
@@ -248,13 +248,13 @@
         <xmlatt>outputclass="list-inline"</xmlatt> attribute.
       </p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ul outputclass="list-inline">
         <li>This is a list item.</li>
         <li>And another one.</li>
         <li>But they're displayed inline.</li>
       </ul>
-    </bodydiv>
+    </example>
     <codeblock>&lt;ul outputclass="list-inline"&gt;
   &lt;li&gt;This is a list item.&lt;/li&gt;
   &lt;li&gt;And another one.&lt;/li&gt;
@@ -265,7 +265,7 @@
       <p>Terms and descriptions align horizontally using Bootstrap’s grid system of predefined classes. For longer
         terms, text is truncated with an ellipsis.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <dl>
         <dlentry>
           <dt>Description lists</dt>
@@ -298,7 +298,7 @@
           </dd>
         </dlentry>
       </dl>
-    </bodydiv>
+    </example>
         <codeblock>&lt;dl&gt;
   &lt;dlentry&gt;
     &lt;dt&gt;Description lists&lt;/dt&gt;
@@ -339,7 +339,7 @@
         >dd</xmlelement> spreads over 9 column widths. Alter default width of terms by adding <xmlatt
         >colspan</xmlatt></p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <dl otherprops="cols(2)">
         <dlentry>
           <dt>Description lists</dt>
@@ -353,7 +353,7 @@
           </dd>
         </dlentry>
       </dl>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index fe9a8582..48f2530c 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -24,6 +24,7 @@
   <xsl:param name="BOOTSTRAP_CSS_ACCORDION" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_NAV" select="'bg-subtle-secondary'"/>
   <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_LINK" select="'btn btn-outline theme-primary btn-sm'"/>
+  <xsl:param name="BOOTSTRAP_CSS_EXAMPLE" select="' p-3 border '"/>
   <xsl:param name="BOOTSTRAP_CSS_FIGURE" select="' w-100 max-w-100 p-3 '"/>
   <xsl:param name="BOOTSTRAP_CSS_FIGURE_CAPTION" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_FIGURE_IMAGE" select="'img-fluid border rounded'"/>
@@ -505,6 +506,7 @@
             else if (contains(@outputclass, 'btn-group')) then ''
             else if (contains(@outputclass, 'btn-toolbar')) then ''
             else if (contains(@outputclass, 'accordion-')) then 'accordion'
+            else if (contains(@class, ' topic/example ')) then $BOOTSTRAP_CSS_EXAMPLE
             else if (contains(@class, ' topic/fig ') and *[contains(@class, ' topic/lq ')]) then ' blockquote '
             else if (contains(@class, ' topic/fig ')) then ' figure ' || $BOOTSTRAP_CSS_FIGURE
             else if (contains(@class, ' topic/lq ') and parent::*[contains(@class, ' topic/fig ')]) then ''

From dba8541101a4bdba6d1977441958add03676c970 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Mon, 10 Aug 2026 10:59:35 +0200
Subject: [PATCH 59/87] put back bodydiv where example can't embed elements

---
 sample/accordion.dita    | 12 ++++++------
 sample/alerts.dita       |  8 ++++----
 sample/badge.dita        |  4 ++--
 sample/borders.dita      |  4 ++--
 sample/button-group.dita | 20 ++++++++++----------
 sample/card.dita         | 20 ++++++++++----------
 sample/color.dita        |  8 ++++----
 sample/grid.dita         |  8 ++++----
 sample/rtl.dita          |  4 ++--
 sample/shadows.dita      |  4 ++--
 sample/tabs.dita         | 12 ++++++------
 11 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/sample/accordion.dita b/sample/accordion.dita
index 82a5fe60..f78c2f94 100644
--- a/sample/accordion.dita
+++ b/sample/accordion.dita
@@ -40,7 +40,7 @@
       <title>Example</title>
       <p>Click the accordions below to expand/collapse the accordion content.</p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="accordion">
         <section id="accordion1" outputclass="show">
           <title>Accordion Item #1</title>
@@ -67,7 +67,7 @@
             Bootstrap’s default variables.</p>
         </section>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -146,7 +146,7 @@
         background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent
         container.</p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="accordion-flush">
         <section id="accordion4">
           <title>Accordion Item #1</title>
@@ -167,7 +167,7 @@
             to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</p>
         </section>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -187,7 +187,7 @@
       <title>Always open</title>
       <p>Set <xmlatt>open="yes"</xmlatt> to make accordion items stay open when another item is opened.</p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="accordion-open">
         <section id="accordion7" outputclass="show">
           <title>Accordion Item #1</title>
@@ -214,7 +214,7 @@
             Bootstrap’s default variables.</p>
         </section>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/alerts.dita b/sample/alerts.dita
index ea49c71c..631d26fa 100644
--- a/sample/alerts.dita
+++ b/sample/alerts.dita
@@ -32,7 +32,7 @@
         of the eight required contextual classes (e.g., set <xmlatt>outputclass</xmlatt> to
           <codeph>alert theme-success</codeph>).</p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <section outputclass="alert theme-primary">A simple primary alert — check it out!</section>
       <section outputclass="alert theme-secondary">A simple secondary alert — check it out!</section>
       <section outputclass="alert theme-success">A simple success alert — check it out!</section>
@@ -41,7 +41,7 @@
       <section outputclass="alert theme-info">A simple info alert — check it out!</section>
       <section outputclass="alert theme-accent">A simple accent alert — check it out!</section>
       <section outputclass="alert theme-inverse">A simple inverse alert — check it out!</section>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -103,7 +103,7 @@
       <title>Additional content</title>
       <p>Alerts can also contain additional HTML elements like headings, paragraphs, icons and links.</p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <section id="well-done" outputclass="alert theme-success vstack">
         <title><ph 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
@@ -111,7 +111,7 @@
           with this kind of content.</p>
         <p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
       </section>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/badge.dita b/sample/badge.dita
index 1afefd76..7ca37ad9 100644
--- a/sample/badge.dita
+++ b/sample/badge.dita
@@ -28,7 +28,7 @@
       <p>Badges scale to match the size of the immediate parent element by using relative font sizing and
           <xmlatt>em</xmlatt> units. As of v5, badges no longer have focus or hover styles for links.</p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <section>
         <p outputclass="h1">Example heading <ph outputclass="badge theme-primary">New</ph></p>
         <p outputclass="h2">Example heading <ph outputclass="badge theme-primary">New</ph></p>
@@ -37,7 +37,7 @@
         <p outputclass="h5">Example heading <ph outputclass="badge theme-primary">New</ph></p>
         <p outputclass="h6">Example heading <ph outputclass="badge theme-primary">New</ph></p>
       </section>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/borders.dita b/sample/borders.dita
index 553b9203..baa1a1d0 100644
--- a/sample/borders.dita
+++ b/sample/borders.dita
@@ -53,7 +53,7 @@
         >rounded</xmlatt> attributes provide a semantic way to add borders and rounded corners.</p>
     </section>
 
-    <example>
+    <bodydiv outputclass="p-3 border">
       <section id="bordered-section" outputclass="p-2 border">
         <title>Bordered Section</title>
         <p>This section has a border.</p>
@@ -71,7 +71,7 @@
           <image scope="external" href="https://picsum.photos/600/400?2"/>
         </li>
       </ol>
-    </example>
+    </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
diff --git a/sample/button-group.dita b/sample/button-group.dita
index 2fc01184..84c39cd5 100644
--- a/sample/button-group.dita
+++ b/sample/button-group.dita
@@ -29,13 +29,13 @@
           outputclass="btn-group"</xmlelement>
       </p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="btn-group">
         <xref href="#" outputclass="btn theme-primary">Left</xref>
         <xref href="#" outputclass="btn theme-primary">Middle</xref>
         <xref href="#" outputclass="btn theme-primary">Right</xref>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -57,13 +57,13 @@
     <section id="mixed-styles">
       <title>Mixed styles</title>
     </section>
-    <example deliveryTarget="html">
+    <bodydiv deliveryTarget="html" outputclass="p-3 border">
       <bodydiv outputclass="btn-group">
         <xref href="#" outputclass="btn theme-danger">Left</xref>
         <xref href="#" outputclass="btn theme-warning">Middle</xref>
         <xref href="#" outputclass="btn theme-success">Right</xref>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -85,13 +85,13 @@
     <section id="outlined-styles">
       <title>Outlined styles</title>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="btn-group">
         <xref href="#" outputclass="btn-outline theme-primary">Left</xref>
         <xref href="#" outputclass="btn-outline theme-primary">Middle</xref>
         <xref href="#" outputclass="btn-outline theme-primary">Right</xref>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -114,7 +114,7 @@
       <title>Button toolbar</title>
       <p>Combine sets of button groups into button toolbars for more complex components.</p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="btn-toolbar">
         <bodydiv outputclass="me-2 btn-group">
           <xref href="#" outputclass="btn theme-primary">1</xref>
@@ -131,7 +131,7 @@
           <xref href="#" outputclass="btn theme-info">8</xref>
         </bodydiv>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -176,13 +176,13 @@
       <title>Vertical variation</title>
       <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="btn-group-vertical">
         <xref href="#" outputclass="btn theme-primary">Top</xref>
         <xref href="#" outputclass="btn theme-primary">Middle</xref>
         <xref href="#" outputclass="btn theme-primary">Bottom</xref>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/card.dita b/sample/card.dita
index f5fef211..3b735c0e 100644
--- a/sample/card.dita
+++ b/sample/card.dita
@@ -47,14 +47,14 @@
         >sizing options.</xref>
       </p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <section id="card-title" outputclass="card">
         <title>Card Title</title>
         <image scope="external" href="https://picsum.photos/400/200?a"/>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
         <xref href="#" outputclass="btn-primary">Go Somewhere</xref>
       </section>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -81,7 +81,7 @@
           <codeph>card-link</codeph> to an <xmlelement>xref</xmlelement> tag.</p>
       <p>Subtitles are used by adding a <xmlelement>div</xmlelement> element.</p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <section id="card-title-1" outputclass="card">
         <title>Card Title</title>
         <div outputclass="h6">Card Subtitle</div>
@@ -89,7 +89,7 @@
         <xref outputclass="card-link" href="#">Card Link</xref>
         <xref outputclass="card-link" href="#">Another Link</xref>
       </section>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -118,7 +118,7 @@
         >card</xmlelement> places an image to the top of the card
       </p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="row">
         <bodydiv outputclass="col">
           <section outputclass="card">
@@ -127,7 +127,7 @@
           </section>
         </bodydiv>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -150,7 +150,7 @@
         >card-header</xmlelement> and <xmlelement>card-footer</xmlelement> elements.
       </p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <section id="special-title-treatment" outputclass="card">
         <title>Special title treatment</title>
         <div outputclass="card-header">Featured</div>
@@ -158,7 +158,7 @@
         <xref href="#" outputclass="btn-primary">Go somewhere</xref>
         <div outputclass="card-footer">2 days ago</div>
       </section>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -185,14 +185,14 @@
       <p>A card can be colorized by adding a <xmlatt>color</xmlatt> attribute. This
         applies a contextual background color.</p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <section id="card-title-2" outputclass="card theme-success">
         <title>Card Title</title>
         <div outputclass="card-header">Success Card</div>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
         <xref href="#" outputclass="btn-primary">Go Somewhere</xref>
       </section>
-    </example>
+    </bodydiv>
     <codeblock>&lt;card color="success"&gt;
   &lt;title&gt;Card Title&lt;/title&gt;
   &lt;div outputclass="card-header"&gt;Success Card&lt;/div&gt;
diff --git a/sample/color.dita b/sample/color.dita
index 9ba3a470..1f02ca87 100644
--- a/sample/color.dita
+++ b/sample/color.dita
@@ -65,7 +65,7 @@
       >Decoration attributes can be applied to many base DITA elements to add background color and contrasting text.</p>
     </section>
 
-    <example>
+    <bodydiv outputclass="p-3 border">
       <section id="section-decoration" outputclass="mt-2 bg-primary fg-contrast-primary">
         <title>Section Decoration</title>
         <p>This section has a primary color background.</p>
@@ -115,7 +115,7 @@
       <note outputclass="mt-2 theme-primary">
         This is a note with a primary color theme.
       </note>
-    </example>
+    </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
@@ -224,7 +224,7 @@
       <p>Many specialized components also support the <xmlatt>color</xmlatt> attribute for consistent theming.</p>
     </section>
 
-    <example>
+    <bodydiv outputclass="p-3 border">
 
       <image scope="external" href="https://picsum.photos/100/100?a" outputclass="img-thumbnail bg-warning"/>
       <section id="card-title" outputclass="card theme-success mt-2 w-50">
@@ -256,7 +256,7 @@
           <image scope="external" href="https://picsum.photos/1200/600?c"/>
         </li>
       </ol>
-    </example>
+    </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
diff --git a/sample/grid.dita b/sample/grid.dita
index a05b54d5..10a078d1 100644
--- a/sample/grid.dita
+++ b/sample/grid.dita
@@ -32,7 +32,7 @@
         comes together. The <xmlelement>grid-col</xmlelement> element supports <xmlatt>breakpoint</xmlatt> and
           <xmlatt>colspan</xmlatt> attributes to define the column width at different screen sizes.</p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="row">
         <bodydiv outputclass="sm:col-3">
           <p>One of three columns</p>
@@ -44,7 +44,7 @@
           <p>One of three columns</p>
         </bodydiv>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -81,7 +81,7 @@
           <codeph>xxl</codeph>. Add any number of unit-less classes for each breakpoint you need and every column will
         be the same width.</p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="row">
         <bodydiv outputclass="col">
           <p>One of two columns</p>
@@ -101,7 +101,7 @@
           <p>One of three columns</p>
         </bodydiv>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/rtl.dita b/sample/rtl.dita
index a3d06a61..7718dba0 100644
--- a/sample/rtl.dita
+++ b/sample/rtl.dita
@@ -43,7 +43,7 @@
       <p>Additionally, within any <xmlelement>topic</xmlelement>, setting the <xmlatt>dir</xmlatt> attribute on any DITA
         element thereafter will cause the layout to be recalculated for the enclosed block only.</p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <bodydiv dir="rtl" outputclass="row">
         <bodydiv outputclass="col">
           <section xml:lang="ar" outputclass="card">
@@ -54,7 +54,7 @@
           </section>
         </bodydiv>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/shadows.dita b/sample/shadows.dita
index e57be7b6..23adf4bf 100644
--- a/sample/shadows.dita
+++ b/sample/shadows.dita
@@ -55,13 +55,13 @@
       <p>Shadows can be applied to complex elements as follow:</p>
     </section>
 
-    <example>
+    <bodydiv outputclass="p-3 border">
       <section id="shadowed-card" outputclass="card bg-subtle-accent m-3 shadow-lg">
         <title>Shadowed Card</title>
         <p>This card has a large shadow.</p>
       </section>
       <section outputclass="alert theme-accent m-3 shadow-sm">Alert with small shadow</section>
-    </example>
+    </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
diff --git a/sample/tabs.dita b/sample/tabs.dita
index 695abde0..e7d8c8a7 100644
--- a/sample/tabs.dita
+++ b/sample/tabs.dita
@@ -31,7 +31,7 @@
           style="tabs"</xmlelement> element containing a series of <xmlelement>section</xmlelement> elements
       </p>
     </section>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="nav-tabs mt-3">
         <section id="home">
           <title>Home</title>
@@ -58,7 +58,7 @@
             Stinging like a bee I earned my stripes.</p>
         </section>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -97,7 +97,7 @@
       </bodydiv>
     <p>The tabs plugin also works with pills using <xmlatt>style="pills"</xmlatt>
     </p>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="nav-pills mt-3">
         <section id="home-1">
           <title>Home</title>
@@ -124,7 +124,7 @@
             Stinging like a bee I earned my stripes.</p>
         </section>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -163,7 +163,7 @@
       </bodydiv>
     <p>And with vertical pills using <xmlatt>style="vertical-pills"</xmlatt>
     </p>
-    <example>
+    <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="nav-pills-vertical mt-3">
         <section id="home-2">
           <title>Home</title>
@@ -190,7 +190,7 @@
             Stinging like a bee I earned my stripes.</p>
         </section>
       </bodydiv>
-    </example>
+    </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>

From 14496455d07ef6b1ec4b83bfbbae7c6a0a2f2ad5 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Mon, 10 Aug 2026 11:09:33 +0200
Subject: [PATCH 60/87] Use <div> for button-group

---
 sample/button-group.dita | 88 ++++++++++++++++++++--------------------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/sample/button-group.dita b/sample/button-group.dita
index 84c39cd5..7620c21a 100644
--- a/sample/button-group.dita
+++ b/sample/button-group.dita
@@ -29,25 +29,25 @@
           outputclass="btn-group"</xmlelement>
       </p>
     </section>
-    <bodydiv outputclass="p-3 border">
-      <bodydiv outputclass="btn-group">
+    <example>
+      <div outputclass="btn-group">
         <xref href="#" outputclass="btn theme-primary">Left</xref>
         <xref href="#" outputclass="btn theme-primary">Middle</xref>
         <xref href="#" outputclass="btn theme-primary">Right</xref>
-      </bodydiv>
-    </bodydiv>
+      </div>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;div outputclass="btn-group"&gt;
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="btn-group"&gt;
   &lt;xref outputclass="btn theme-primary" href="#"&gt;Left&lt;/xref&gt;
   &lt;xref outputclass="btn theme-primary" href="#"&gt;Middle&lt;/xref&gt;
   &lt;xref outputclass="btn theme-primary" href="#"&gt;Right&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
-        </section>
-         <section>
+      </section>
+      <section>
         <title>Specialization</title>
-          <codeblock>&lt;button-group&gt;
+        <codeblock>&lt;button-group&gt;
   &lt;button color="primary" href="#"&gt;Left&lt;/button&gt;
   &lt;button color="primary" href="#"&gt;Middle&lt;/button&gt;
   &lt;button color="primary" href="#"&gt;Right&lt;/button&gt;
@@ -57,25 +57,25 @@
     <section id="mixed-styles">
       <title>Mixed styles</title>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <bodydiv outputclass="btn-group">
+    <example>
+      <div outputclass="btn-group">
         <xref href="#" outputclass="btn theme-danger">Left</xref>
         <xref href="#" outputclass="btn theme-warning">Middle</xref>
         <xref href="#" outputclass="btn theme-success">Right</xref>
-      </bodydiv>
-    </bodydiv>
+      </div>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;div outputclass="btn-group"&gt;
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="btn-group"&gt;
   &lt;xref outputclass="btn theme-danger" href="#"&gt;Left&lt;/xref&gt;
   &lt;xref outputclass="btn theme-warning" href="#"&gt;Middle&lt;/xref&gt;
   &lt;xref outputclass="btn theme-success" href="#"&gt;Right&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
         </section>
-         <section>
+        <section>
         <title>Specialization</title>
-          <codeblock>&lt;button-group&gt;
+        <codeblock>&lt;button-group&gt;
   &lt;button color="danger" href="#"&gt;Left&lt;/button&gt;
   &lt;button color="warning" href="#"&gt;Middle&lt;/button&gt;
   &lt;button color="success" href="#"&gt;Right&lt;/button&gt;
@@ -85,13 +85,13 @@
     <section id="outlined-styles">
       <title>Outlined styles</title>
     </section>
-    <bodydiv outputclass="p-3 border">
-      <bodydiv outputclass="btn-group">
+    <example>
+      <div outputclass="btn-group">
         <xref href="#" outputclass="btn-outline theme-primary">Left</xref>
         <xref href="#" outputclass="btn-outline theme-primary">Middle</xref>
         <xref href="#" outputclass="btn-outline theme-primary">Right</xref>
-      </bodydiv>
-    </bodydiv>
+      </div>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -101,7 +101,7 @@
   &lt;xref outputclass="btn-outline theme-primary" href="#"&gt;Right&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
         </section>
-         <section>
+        <section>
         <title>Specialization</title>
           <codeblock>&lt;button-group&gt;
   &lt;button color="primary" outline="yes" href="#"&gt;Left&lt;/button&gt;
@@ -114,24 +114,24 @@
       <title>Button toolbar</title>
       <p>Combine sets of button groups into button toolbars for more complex components.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
-      <bodydiv outputclass="btn-toolbar">
-        <bodydiv outputclass="me-2 btn-group">
+    <example>
+      <div outputclass="btn-toolbar">
+        <div outputclass="me-2 btn-group">
           <xref href="#" outputclass="btn theme-primary">1</xref>
           <xref href="#" outputclass="btn theme-primary">2</xref>
           <xref href="#" outputclass="btn theme-primary">3</xref>
           <xref href="#" outputclass="btn theme-primary">4</xref>
-        </bodydiv>
-        <bodydiv outputclass="me-2 btn-group">
+        </div>
+        <div outputclass="me-2 btn-group">
           <xref href="#" outputclass="btn theme-secondary">5</xref>
           <xref href="#" outputclass="btn theme-secondary">6</xref>
           <xref href="#" outputclass="btn theme-secondary">7</xref>
-        </bodydiv>
-        <bodydiv outputclass="me-2 btn-group">
+        </div>
+        <div outputclass="me-2 btn-group">
           <xref href="#" outputclass="btn theme-info">8</xref>
-        </bodydiv>
-      </bodydiv>
-    </bodydiv>
+        </div>
+      </div>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -176,30 +176,30 @@
       <title>Vertical variation</title>
       <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
-      <bodydiv outputclass="btn-group-vertical">
+    <example>
+      <div outputclass="btn-group-vertical">
         <xref href="#" outputclass="btn theme-primary">Top</xref>
         <xref href="#" outputclass="btn theme-primary">Middle</xref>
         <xref href="#" outputclass="btn theme-primary">Bottom</xref>
-      </bodydiv>
-    </bodydiv>
+      </div>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;div outputclass="btn-group-vertical"&gt;
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="btn-group-vertical"&gt;
   &lt;xref outputclass="btn theme-primary" href="#"&gt;Top&lt;/xref&gt;
   &lt;xref outputclass="btn theme-primary" href="#"&gt;Middle&lt;/xref&gt;
   &lt;xref outputclass="btn theme-primary" href="#"&gt;Bottom&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
-        </section>
-         <section>
-        <title>Specialization</title>
-          <codeblock>&lt;button-group vertical="yes"&gt;
+      </section>
+      <section>
+      <title>Specialization</title>
+      <codeblock>&lt;button-group vertical="yes"&gt;
   &lt;button color="primary" href="#"&gt;Top&lt;/button&gt;
   &lt;button color="primary" href="#"&gt;Middle&lt;/button&gt;
   &lt;button color="primary" href="#"&gt;Bottom&lt;/button&gt;
 &lt;/button-group&gt;</codeblock>
-        </section>
-      </bodydiv>
+      </section>
+    </bodydiv>
   </body>
 </topic>

From f677d2e264a8dad98413dbf90103789cea963e7d Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Mon, 10 Aug 2026 12:18:10 +0200
Subject: [PATCH 61/87] Fixing card markup

---
 Customization/xsl/card.xsl |   8 +-
 sample/index.dita          | 350 ++++++++++++++++---------------------
 2 files changed, 156 insertions(+), 202 deletions(-)

diff --git a/Customization/xsl/card.xsl b/Customization/xsl/card.xsl
index 9b654edb..cab9e432 100644
--- a/Customization/xsl/card.xsl
+++ b/Customization/xsl/card.xsl
@@ -15,7 +15,9 @@
   <!-- https://getbootstrap.com/docs/5.3/components/card/ -->
 
   <xsl:template
-    match="*[contains(@class, ' bootstrap-d/card ')] | *[contains(@class,' topic/section ') and contains(@outputclass, 'card')]"
+    match="*[contains(@class, ' bootstrap-d/card ')]
+           | *[contains(@class,' topic/section ') and tokenize(@outputclass, '\s+') = 'card']
+           | *[contains(@class,' topic/div ') and tokenize(@outputclass, '\s+') = 'card']"
   >
     <xsl:variable name="images" select="*[contains(@class, ' topic/image ')]"/>
     <xsl:variable
@@ -90,7 +92,9 @@
   <xsl:template match="*[contains(@class, ' topic/image ')]" mode="get-output-class" priority="10">
     <xsl:variable
       name="card"
-      select="parent::*[contains(@class, ' bootstrap-d/card ') or (contains(@class,' topic/section ') and contains(@outputclass, 'card'))]"
+      select="parent::*[contains(@class, ' bootstrap-d/card ')
+                        or (contains(@class,' topic/section ') and tokenize(@outputclass, '\s+') = 'card')
+                        or (contains(@class,' topic/div ') and tokenize(@outputclass, '\s+') = 'card')]"
     />
     <xsl:if test="$card">
       <xsl:variable name="totalImages" select="count($card/*[contains(@class, ' topic/image ')])"/>
diff --git a/sample/index.dita b/sample/index.dita
index ed875f07..cf952af0 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -78,14 +78,12 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/brite/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/brite/"
-                    format="html"
-                    scope="external"
-                  ><option>brite</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/brite/"
+                  format="html"
+                  scope="external"
+                ><option>brite</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
@@ -95,27 +93,23 @@
                   scope="external"
                   href="https://bootswatch.com/cerulean/thumbnail.png"
                 />
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/cerulean/"
-                    format="html"
-                    scope="external"
-                  ><option>cerulean</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/cerulean/"
+                  format="html"
+                  scope="external"
+                ><option>cerulean</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/cosmo/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/cosmo/"
-                    format="html"
-                    scope="external"
-                  ><option>cosmo</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/cosmo/"
+                  format="html"
+                  scope="external"
+                ><option>cosmo</option></xref>
               </div>
             </div>
           </div>
@@ -125,40 +119,34 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/cyborg/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/cyborg/"
-                    format="html"
-                    scope="external"
-                  ><option>cyborg</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/cyborg/"
+                  format="html"
+                  scope="external"
+                ><option>cyborg</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/darkly/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/darkly/"
-                    format="html"
-                    scope="external"
-                  ><option>darkly</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/darkly/"
+                  format="html"
+                  scope="external"
+                ><option>darkly</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/flatly/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/flatly/"
-                    format="html"
-                    scope="external"
-                  ><option>flatly</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/flatly/"
+                  format="html"
+                  scope="external"
+                ><option>flatly</option></xref>
               </div>
             </div>
           </div>
@@ -168,40 +156,34 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/journal/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/journal/"
-                    format="html"
-                    scope="external"
-                  ><option>journal</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/journal/"
+                  format="html"
+                  scope="external"
+                ><option>journal</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/litera/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/litera/"
-                    format="html"
-                    scope="external"
-                  ><option>litera</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/litera/"
+                  format="html"
+                  scope="external"
+                ><option>litera</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/lumen/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/lumen/"
-                    format="html"
-                    scope="external"
-                  ><option>lumen</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/lumen/"
+                  format="html"
+                  scope="external"
+                ><option>lumen</option></xref>
               </div>
             </div>
           </div>
@@ -211,40 +193,34 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/lux/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/lux/"
-                    format="html"
-                    scope="external"
-                  ><option>lux</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/lux/"
+                  format="html"
+                  scope="external"
+                ><option>lux</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/materia/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/materia/"
-                    format="html"
-                    scope="external"
-                  ><option>materia</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/materia/"
+                  format="html"
+                  scope="external"
+                ><option>materia</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/minty/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/minty/"
-                    format="html"
-                    scope="external"
-                  ><option>minty</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/minty/"
+                  format="html"
+                  scope="external"
+                ><option>minty</option></xref>
               </div>
             </div>
           </div>
@@ -254,40 +230,34 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/morph/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/morph/"
-                    format="html"
-                    scope="external"
-                  ><option>morph</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/morph/"
+                  format="html"
+                  scope="external"
+                ><option>morph</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/pulse/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/pulse/"
-                    format="html"
-                    scope="external"
-                  ><option>pulse</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/pulse/"
+                  format="html"
+                  scope="external"
+                ><option>pulse</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/quartz/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/quartz/"
-                    format="html"
-                    scope="external"
-                  ><option>quartz</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/quartz/"
+                  format="html"
+                  scope="external"
+                ><option>quartz</option></xref>
               </div>
             </div>
           </div>
@@ -301,40 +271,34 @@
                   scope="external"
                   href="https://bootswatch.com/sandstone/thumbnail.png"
                 />
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/sandstone/"
-                    format="html"
-                    scope="external"
-                  ><option>sandstone</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/sandstone/"
+                  format="html"
+                  scope="external"
+                ><option>sandstone</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/simplex/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/simplex/"
-                    format="html"
-                    scope="external"
-                  ><option>simplex</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/simplex/"
+                  format="html"
+                  scope="external"
+                ><option>simplex</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/sketchy/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/sketchy/"
-                    format="html"
-                    scope="external"
-                  ><option>sketchy</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/sketchy/"
+                  format="html"
+                  scope="external"
+                ><option>sketchy</option></xref>
               </div>
             </div>
           </div>
@@ -344,27 +308,23 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/slate/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/slate/"
-                    format="html"
-                    scope="external"
-                  ><option>slate</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/slate/"
+                  format="html"
+                  scope="external"
+                ><option>slate</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/solar/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/solar/"
-                    format="html"
-                    scope="external"
-                  ><option>solar</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/solar/"
+                  format="html"
+                  scope="external"
+                ><option>solar</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
@@ -374,14 +334,12 @@
                   scope="external"
                   href="https://bootswatch.com/spacelab/thumbnail.png"
                 />
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/spacelab/"
-                    format="html"
-                    scope="external"
-                  ><option>spacelab</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/spacelab/"
+                  format="html"
+                  scope="external"
+                ><option>spacelab</option></xref>
               </div>
             </div>
           </div>
@@ -395,40 +353,34 @@
                   scope="external"
                   href="https://bootswatch.com/superhero/thumbnail.png"
                 />
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/superhero/"
-                    format="html"
-                    scope="external"
-                  ><option>superhero</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/superhero/"
+                  format="html"
+                  scope="external"
+                ><option>superhero</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/united/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/united/"
-                    format="html"
-                    scope="external"
-                  ><option>united</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/united/"
+                  format="html"
+                  scope="external"
+                ><option>united</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/vapor/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/vapor/"
-                    format="html"
-                    scope="external"
-                  ><option>vapor</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/vapor/"
+                  format="html"
+                  scope="external"
+                ><option>vapor</option></xref>
               </div>
             </div>
           </div>
@@ -438,14 +390,12 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/yeti/thumbnail.png"/>
-                <p outputclass="d-block w-100 text-center">
-                  <xref
-                    outputclass="link stretched-link text-decoration-none"
-                    href="https://bootswatch.com/yeti/"
-                    format="html"
-                    scope="external"
-                  ><option>yeti</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/yeti/"
+                  format="html"
+                  scope="external"
+                ><option>yeti</option></xref>
               </div>
             </div>
           </div>

From afe6007ac429d9a4a47b68e240f07fb8ec49320a Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Mon, 10 Aug 2026 18:02:12 +0200
Subject: [PATCH 62/87] Temporarily add CSS Branch

---
 .github/workflows/ci.yml | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 3ad5b908..37b09055 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -6,6 +6,7 @@ name: CI
       - develop
       - v5
       - v6
+      - css
   workflow_dispatch:
 
 jobs:
@@ -31,6 +32,7 @@ jobs:
       # 1. Resolve Plugin URLs dynamically with fallback
       - name: Resolve Plugin URLs 🔗
         id: plugins
+        if: github.ref_name != 'css'
         run: |
           owner="${{ github.repository_owner }}"
           ref="${{ github.ref_name }}"
@@ -66,6 +68,7 @@ jobs:
 
       # 2. Build Bootstrap using the resolved list
       - name: Build Bootstrap
+        if: github.ref_name != 'css'
         uses: dita-ot/dita-ot-action@4.4
         with:
           install: |
@@ -76,6 +79,15 @@ jobs:
           plugins: ${{ steps.plugins.outputs.list }}
           project: .github/dita-ot/html.xml
 
+      # 2b. The css branch skips the DITA-OT doc build entirely — it just carries
+      # static CSS files (e.g. a Bootswatch theme ported to v6 tokens) to publish
+      # at a stable URL for the theme switcher to reference.
+      - name: Copy CSS output
+        if: github.ref_name == 'css'
+        run: |
+          mkdir -p out/html
+          cp css/*.css out/html/
+
       # 3. Determine target folder dynamically based on current branch
       - name: Determine target folder 📁
         id: set-target
@@ -99,3 +111,4 @@ jobs:
           clean-exclude: |
             v5
             v6
+            css

From 2138e888bf1e4f79b23f27889017ab8557dde54c Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Mon, 10 Aug 2026 18:53:45 +0200
Subject: [PATCH 63/87] Update themes list and temporarily point to CSS Branch

---
 .github/dita-ot/header.xml | 108 ++++++++++++++++++-------------------
 1 file changed, 54 insertions(+), 54 deletions(-)

diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml
index c03495cd..52095998 100644
--- a/.github/dita-ot/header.xml
+++ b/.github/dita-ot/header.xml
@@ -159,191 +159,191 @@
         <div class="menu">
           <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/dist/css/bootstrap.min.css"
             >
               Default
             </button>
             <hr class="dropdown-divider"/>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/brite/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/brite/bootstrap.min.css"
             >
               Brite
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/cerulean/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/cerulean/bootstrap.min.css"
             >
               Cerulean
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/cosmo/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/cosmo/bootstrap.min.css"
             >
               Cosmo
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/cyborg/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/cyborg/bootstrap.min.css"
             >
               Cyborg
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/darkly/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/darkly/bootstrap.min.css"
             >
               Darkly
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/flatly/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/flatly/bootstrap.min.css"
             >
               Flatly
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/journal/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/journal/bootstrap.min.css"
             >
               Journal
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/litera/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/litera/bootstrap.min.css"
             >
               Litera
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/lumen/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/lumen/bootstrap.min.css"
             >
               Lumen
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/lux/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/lux/bootstrap.min.css"
             >
               Lux
             </button>
              <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/materia/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/materia/bootstrap.min.css"
             >
               Materia
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/minty/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/minty/bootstrap.min.css"
             >
               Minty
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/morph/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/morph/bootstrap.min.css"
             >
               Morph
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/pulse/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/pulse/bootstrap.min.css"
             >
               Pulse
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/quartz/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/quartz/bootstrap.min.css"
             >
               Quartz
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/sandstone/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/sandstone/bootstrap.min.css"
             >
               Sandstone
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/simplex/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/simplex/bootstrap.min.css"
             >
               Simplex
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/sketchy/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/sketchy/bootstrap.min.css"
             >
               Sketchy
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/slate/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/slate/bootstrap.min.css"
             >
               Slate
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/solar/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/solar/bootstrap.min.css"
             >
               Solar
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/spacelab/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/spacelab/bootstrap.min.css"
             >
               SpaceLab
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/superhero/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/superhero/bootstrap.min.css"
             >
               Superhero
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/united/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/united/bootstrap.min.css"
             >
               United
             </button>
              <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/vapor/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/vapor/bootstrap.min.css"
             >
               Vapor
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/yeti/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/yeti/bootstrap.min.css"
             >
               Yeti
             </button>
             <button
               type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/zephyr/bootstrap.min.css"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/zephyr/bootstrap.min.css"
             >
               Zephyr
             </button>

From 151c6de57b9d5906b98c5281ed80ae1494477b74 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Mon, 10 Aug 2026 19:21:32 +0200
Subject: [PATCH 64/87] Enable theme switcher

---
 .github/dita-ot/html.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/dita-ot/html.xml b/.github/dita-ot/html.xml
index 3668ad3d..d07ff52f 100644
--- a/.github/dita-ot/html.xml
+++ b/.github/dita-ot/html.xml
@@ -27,7 +27,7 @@
       <param name="icons.include" value="yes"/>
       <param name="popovers.include" value="yes"/>
       <param name="dark.mode.include" value="yes"/>
-      <param name="css.theme.switcher" value="no"/>
+      <param name="css.theme.switcher" value="yes"/>
       <param name="bootstrap.css.search.card" value="theme-primary"/>
       <param name="open-graph.url" value="https://dita-bootstrap.github.io"/>
       <param name="twitter.site" value="@infotexture"/>

From c72233a89507cd1fe8b90f4716613e8a79b84fb5 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 11 Aug 2026 08:36:27 +0200
Subject: [PATCH 65/87] Emphasise notes

---
 sample/alerts.dita      | 34 ++++++++++++++--------------
 xsl/utility-classes.xsl | 49 ++++++++++++++++++++---------------------
 2 files changed, 42 insertions(+), 41 deletions(-)

diff --git a/sample/alerts.dita b/sample/alerts.dita
index 631d26fa..477d0f61 100644
--- a/sample/alerts.dita
+++ b/sample/alerts.dita
@@ -33,40 +33,42 @@
           <codeph>alert theme-success</codeph>).</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section outputclass="alert theme-primary">A simple primary alert — check it out!</section>
-      <section outputclass="alert theme-secondary">A simple secondary alert — check it out!</section>
-      <section outputclass="alert theme-success">A simple success alert — check it out!</section>
-      <section outputclass="alert theme-danger">A simple danger alert — check it out!</section>
-      <section outputclass="alert theme-warning">A simple warning alert — check it out!</section>
-      <section outputclass="alert theme-info">A simple info alert — check it out!</section>
-      <section outputclass="alert theme-accent">A simple accent alert — check it out!</section>
-      <section outputclass="alert theme-inverse">A simple inverse alert — check it out!</section>
+      <section outputclass="alert theme-primary fg-emphasis-primary">A simple primary alert — check it out!</section>
+      <section
+        outputclass="alert theme-secondary fg-emphasis-secondary"
+      >A simple secondary alert — check it out!</section>
+      <section outputclass="alert theme-success fg-emphasis-success">A simple success alert — check it out!</section>
+      <section outputclass="alert theme-danger fg-emphasis-danger">A simple danger alert — check it out!</section>
+      <section outputclass="alert theme-warning fg-emphasis-warning">A simple warning alert — check it out!</section>
+      <section outputclass="alert theme-info fg-emphasis-info">A simple info alert — check it out!</section>
+      <section outputclass="alert theme-accent fg-emphasis-accent">A simple accent alert — check it out!</section>
+      <section outputclass="alert theme-inverse fg-emphasis-inverse">A simple inverse alert — check it out!</section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-            <codeblock>&lt;section outputclass="alert theme-primary"&gt;
+          <codeblock>&lt;section outputclass="alert theme-primary fg-emphasis-primary"&gt;
   A simple primary alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert theme-secondary"&gt;
+&lt;section outputclass="alert theme-secondary fg-emphasis-secondary"&gt;
   A simple secondary alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert theme-success"&gt;
+&lt;section outputclass="alert theme-success fg-emphasis-success"&gt;
   A simple success alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert theme-danger"&gt;
+&lt;section outputclass="alert theme-danger fg-emphasis-danger"&gt;
   A simple danger alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert theme-warning"&gt;
+&lt;section outputclass="alert theme-warning fg-emphasis-warning"&gt;
   A simple warning alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert theme-info"&gt;
+&lt;section outputclass="alert theme-info fg-emphasis-info"&gt;
   A simple info alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert theme-accent"&gt;
+&lt;section outputclass="alert theme-accent fg-emphasis-accent"&gt;
   A simple accent alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert theme-inverse"&gt;
+&lt;section outputclass="alert theme-inverse fg-emphasis-inverse"&gt;
   A simple inverse alert — check it out!
 &lt;/section&gt;</codeblock>
       </section>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 48f2530c..b801c11b 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -265,6 +265,8 @@
   <xsl:template match="*[contains(@class, ' bootstrap-d/alert ')]" mode="bootstrap-class" priority="10">
     <xsl:text>theme-</xsl:text>
     <xsl:value-of select="@color"/>
+    <xsl:text> fg-emphasis-</xsl:text>
+    <xsl:value-of select="@color"/>
     <xsl:text> </xsl:text>
     <xsl:if test="*[contains(@class, ' topic/p ')]">
       <xsl:text>vstack </xsl:text>
@@ -622,31 +624,28 @@
   <!-- Add additional Bootstrap CSS classes and roles to <note> elements -->
   <xsl:template name="bootstrap-note">
     <xsl:text>alert </xsl:text>
-    <xsl:choose>
-       <xsl:when test="@color">
-          <xsl:text>theme-</xsl:text>
-          <xsl:value-of select="@color"/>
-       </xsl:when>
-       <xsl:otherwise>
-          <xsl:value-of
-          select="
-              if (@type='tip') then 'theme-success'
-              else if (@type='fastpath') then 'theme-success'
-              else if (@type='remember') then 'theme-success'
-              else if (@type='restriction') then 'theme-warning'
-              else if (@type='important') then 'theme-warning'
-              else if (@type='attention') then 'theme-warning'
-              else if (@type='caution') then 'theme-warning'
-              else if (@type='warning') then 'theme-warning'
-              else if (@type='trouble') then 'theme-warning'
-              else if (@type='danger') then 'theme-danger'
-              else if (@type='notice') then 'theme-info'
-              else if (@type='note' or (contains(@class, ' topic/note ') and not(contains(@class, ' bootstrap-d/alert ')) and not(contains(@class, ' topic/section ')) and empty(@type))) then 'theme-primary'
-              else if (@type='other') then ''
-              else 'theme-info'"
-        />
-       </xsl:otherwise>
-    </xsl:choose>
+    <xsl:variable
+      name="noteColor"
+      select="
+          if (@color) then @color
+          else if (@type='tip') then 'success'
+          else if (@type='fastpath') then 'success'
+          else if (@type='remember') then 'success'
+          else if (@type='restriction') then 'warning'
+          else if (@type='important') then 'warning'
+          else if (@type='attention') then 'warning'
+          else if (@type='caution') then 'warning'
+          else if (@type='warning') then 'warning'
+          else if (@type='trouble') then 'warning'
+          else if (@type='danger') then 'danger'
+          else if (@type='notice') then 'info'
+          else if (@type='note' or (contains(@class, ' topic/note ') and not(contains(@class, ' bootstrap-d/alert ')) and not(contains(@class, ' topic/section ')) and empty(@type))) then 'primary'
+          else if (@type='other') then ''
+          else 'info'"
+    />
+    <xsl:if test="string-length($noteColor) > 0">
+      <xsl:value-of select="concat('theme-', $noteColor, ' fg-emphasis-', $noteColor)"/>
+    </xsl:if>
   </xsl:template>
 
   <!-- Add style to a bootstrap element based on otherprops -->

From b82fbd103a9b2025d58d4d46e8888bf7e0229067 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 11 Aug 2026 08:59:29 +0200
Subject: [PATCH 66/87] Any note with a deliberate theme-{color} CSS does not
 gain the default

---
 xsl/utility-classes.xsl | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index b801c11b..d29dcd01 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -624,10 +624,16 @@
   <!-- Add additional Bootstrap CSS classes and roles to <note> elements -->
   <xsl:template name="bootstrap-note">
     <xsl:text>alert </xsl:text>
+    <xsl:variable
+      name="themeClasses"
+      select="for $t in ('primary', 'secondary', 'success', 'danger', 'warning', 'info', 'accent', 'inverse') return concat('theme-', $t)"
+    />
+    <xsl:variable name="hasCustomTheme" select="some $c in tokenize(@outputclass, '\s+') satisfies $c = $themeClasses"/>
     <xsl:variable
       name="noteColor"
       select="
-          if (@color) then @color
+          if ($hasCustomTheme) then ''
+          else if (@color) then @color
           else if (@type='tip') then 'success'
           else if (@type='fastpath') then 'success'
           else if (@type='remember') then 'success'

From d61a8238eba49a317e90c5c5bf2aa1be6fa625ed Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 11 Aug 2026 10:35:00 +0200
Subject: [PATCH 67/87] Fix alert link

---
 xsl/utility-classes.xsl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index d29dcd01..0091d93e 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -516,8 +516,8 @@
             else if (contains(@class, ' topic/dl ')) then $BOOTSTRAP_CSS_DL
             else if (contains(@class, ' topic/image ') and ancestor::*[contains(@class, ' topic/fig ')]) then ' ' || $BOOTSTRAP_CSS_FIGURE_IMAGE
             else if (contains(@outputclass, 'carousel-')) then 'carousel'
-            else if (contains(@class, ' topic/title ') and ancestor::*[contains(@outputclass, 'alert-')]) then 'alert-heading'
-            else if (contains(@class, ' topic/xref ') and ancestor::*[contains(@outputclass, 'alert-')]) then 'alert-link'
+            else if (contains(@class, ' topic/title ') and ancestor::*[tokenize(@outputclass, '\s+') = 'alert']) then 'alert-heading'
+            else if (contains(@class, ' topic/xref ') and ancestor::*[tokenize(@outputclass, '\s+') = 'alert']) then 'alert-link'
             else if (contains(@class, ' topic/li ') and (ancestor::*[contains(@class, ' bootstrap-d/list-group ')] or ancestor::ul[contains(@outputclass, 'list-group')] or ancestor::ol[contains(@outputclass, 'list-group')])) then 'list-group-item'
             else if (contains(@class, ' topic/li ') and (ancestor::ul[contains(@outputclass, 'list-inline')] or ancestor::ol[contains(@outputclass, 'list-inline')])) then 'list-inline-item'
             else if (contains(@outputclass, 'pagination-')) then 'pagination'

From 91e1aebbcedc4f5c150267a159783db853c6454b Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 11 Aug 2026 13:28:49 +0200
Subject: [PATCH 68/87] Aligning documentation

---
 README.md                    |   2 +
 insertParameters.xml         |  10 ++
 plugin.xml                   |  10 ++
 sample/accordion.dita        |   2 +-
 sample/alerts.dita           |  59 ++++++++-
 sample/badge.dita            | 123 +++++++++++++++----
 sample/bootstrap-table.dita  |   2 +-
 sample/borders.dita          |   2 +-
 sample/breadcrumb.dita       |   2 +-
 sample/button-group.dita     |  16 +--
 sample/buttons.dita          | 231 +++++++++++++++++++++++++++++++++--
 sample/card.dita             |   2 +-
 sample/carousel.dita         |   2 +-
 sample/containers.dita       |   2 +-
 sample/dark-mode.dita        |   2 +-
 sample/drawer.dita           |   2 +-
 sample/extension-points.dita |   2 +-
 sample/figures.dita          |   2 +-
 sample/grid.dita             |   2 +-
 sample/images.dita           |   2 +-
 sample/index.dita            |  22 +++-
 sample/list-group.dita       |   2 +-
 sample/nav.dita              |   2 +-
 sample/offline.dita          |   2 +-
 sample/pagination.dita       |   2 +-
 sample/popovers.dita         |   2 +-
 sample/rtl.dita              |   2 +-
 sample/sass.dita             |   2 +-
 sample/search-box.dita       |   2 +-
 sample/tables.dita           |   2 +-
 sample/tabs.dita             |   2 +-
 sample/tooltips.dita         |   2 +-
 xsl/utility-classes.xsl      |  39 ++++--
 33 files changed, 476 insertions(+), 84 deletions(-)

diff --git a/README.md b/README.md
index 4b7b8857..2e3bed37 100644
--- a/README.md
+++ b/README.md
@@ -165,6 +165,8 @@ The HTML output for the following DITA elements can be annotated with common Boo
 - `bootstrap.css.accessibility.link` – Common Bootstrap utility classes for accessibility links
 - `bootstrap.css.accessibility.nav` – Common Bootstrap utility classes for accessibility navigation
 - `bootstrap.css.accordion` – Common utility classes for Bootstrap accordion components
+- `bootstrap.css.badge` – Common utility classes for Bootstrap badge components
+- `bootstrap.css.button` – Common utility classes for Bootstrap button components
 - `bootstrap.css.card` – Common utility classes for Bootstrap card components
 - `bootstrap.css.carousel` – Common utility classes for Bootstrap carousel components
 - `bootstrap.css.carousel.caption` – Common utility classes for Bootstrap carousel captions
diff --git a/insertParameters.xml b/insertParameters.xml
index 65dc040f..b904a6eb 100644
--- a/insertParameters.xml
+++ b/insertParameters.xml
@@ -54,6 +54,16 @@
     expression="${bootstrap.css.section.title}"
     if:set="bootstrap.css.section.title"
   />
+  <param
+    name="BOOTSTRAP_CSS_BADGE"
+    expression="${bootstrap.css.badge}"
+    if:set="bootstrap.css.badge"
+  />
+  <param
+    name="BOOTSTRAP_CSS_BUTTON"
+    expression="${bootstrap.css.button}"
+    if:set="bootstrap.css.button"
+  />
   <param
     name="BOOTSTRAP_CSS_CARD"
     expression="${bootstrap.css.card}"
diff --git a/plugin.xml b/plugin.xml
index e9449f0c..473716c6 100755
--- a/plugin.xml
+++ b/plugin.xml
@@ -142,6 +142,16 @@
       type="string"
       desc="Common Bootstrap classes for DITA &lt;title&gt; elements within &lt;section&gt; elements"
     />
+    <param
+      name="bootstrap.css.badge"
+      type="string"
+      desc="Bootstrap classes for badge components"
+    />
+    <param
+      name="bootstrap.css.button"
+      type="string"
+      desc="Bootstrap classes for button components"
+    />
     <param
       name="bootstrap.css.card"
       type="string"
diff --git a/sample/accordion.dita b/sample/accordion.dita
index f78c2f94..e10d26aa 100644
--- a/sample/accordion.dita
+++ b/sample/accordion.dita
@@ -4,7 +4,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
diff --git a/sample/alerts.dita b/sample/alerts.dita
index 477d0f61..b2359e12 100644
--- a/sample/alerts.dita
+++ b/sample/alerts.dita
@@ -5,7 +5,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <topic id="alerts">
@@ -26,11 +26,33 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section id="example">
-      <title>Example</title>
-      <p>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 <xmlatt>outputclass</xmlatt> to
-          <codeph>alert theme-success</codeph>).</p>
+    <section id="default-alert">
+      <title>Default alert</title>
+      <p>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.</p>
+    </section>
+    <bodydiv outputclass="p-3 border">
+      <section outputclass="alert">A simple alert — check it out!</section>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;section outputclass="alert"&gt;
+  A simple alert — check it out!
+&lt;/section&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;alert&gt;
+  A simple alert — check it out!
+&lt;/alert&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="variants">
+      <title>Variants</title>
+      <p>Use any of the eight variant theme classes for color mode adaptive, contextual styling (e.g., set
+          <xmlatt>outputclass</xmlatt> to <codeph>alert theme-success</codeph>).</p>
     </section>
     <bodydiv outputclass="p-3 border">
       <section outputclass="alert theme-primary fg-emphasis-primary">A simple primary alert — check it out!</section>
@@ -145,6 +167,31 @@
       </section>
     </bodydiv>
 
+    <section id="with-icons">
+      <title>With icons</title>
+      <p>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.</p>
+    </section>
+    <bodydiv outputclass="p-3 border">
+      <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>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;section outputclass="alert theme-primary d-flex align-items-center"&gt;
+  &lt;ph outputclass="bi bi-exclamation-triangle-fill flex-shrink-0 pe-2"/&gt;An example alert with an icon
+&lt;/section&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;alert color="primary" outputclass="d-flex align-items-center"&gt;
+  &lt;icon outputclass="bi-exclamation-triangle-fill flex-shrink-0" padding="e2"/&gt;An example alert with an icon
+&lt;/alert&gt;</codeblock>
+      </section>
+    </bodydiv>
+
     <section id="notes">
       <title>Notes</title>
       <p>DITA <xmlelement>note</xmlelement> elements are displayed as alerts according to the <xmlatt>type</xmlatt>
diff --git a/sample/badge.dita b/sample/badge.dita
index 7ca37ad9..167fdf06 100644
--- a/sample/badge.dita
+++ b/sample/badge.dita
@@ -23,27 +23,54 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section id="example">
-      <title>Example</title>
-      <p>Badges scale to match the size of the immediate parent element by using relative font sizing and
-          <xmlatt>em</xmlatt> units. As of v5, badges no longer have focus or hover styles for links.</p>
+    <section id="examples">
+      <title>Examples</title>
+      <p>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 <xmlatt>em</xmlatt> units.</p>
+      <p>Badges come in three variants: solid (default), subtle, and outline.</p>
     </section>
     <bodydiv outputclass="p-3 border">
+      <p>
+        <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>
+      </p>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
       <section>
-        <p outputclass="h1">Example heading <ph outputclass="badge theme-primary">New</ph></p>
-        <p outputclass="h2">Example heading <ph outputclass="badge theme-primary">New</ph></p>
-        <p outputclass="h3">Example heading <ph outputclass="badge theme-primary">New</ph></p>
-        <p outputclass="h4">Example heading <ph outputclass="badge theme-primary">New</ph></p>
-        <p outputclass="h5">Example heading <ph outputclass="badge theme-primary">New</ph></p>
-        <p outputclass="h6">Example heading <ph outputclass="badge theme-primary">New</ph></p>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;ph outputclass="badge theme-primary"&gt;New&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-primary"&gt;New&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-primary"&gt;New&lt;/ph&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;badge color="primary"&gt;New&lt;/badge&gt;
+&lt;badge color="primary" subtle="yes"&gt;New&lt;/badge&gt;
+&lt;badge color="primary" outline="yes"&gt;New&lt;/badge&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="headings">
+      <title>Headings</title>
+      <p>Badges adapt to the font-size of the parent element.</p>
+    </section>
+    <bodydiv outputclass="p-3 border">
+      <section>
+        <p outputclass="h1">Example heading <ph outputclass="badge">New</ph></p>
+        <p outputclass="h2">Example heading <ph outputclass="badge">New</ph></p>
+        <p outputclass="h3">Example heading <ph outputclass="badge">New</ph></p>
+        <p outputclass="h4">Example heading <ph outputclass="badge">New</ph></p>
+        <p outputclass="h5">Example heading <ph outputclass="badge">New</ph></p>
+        <p outputclass="h6">Example heading <ph outputclass="badge">New</ph></p>
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock
-        >&lt;title&gt;Example Heading &lt;ph outputclass="badge theme-primary"&gt;New&lt;/ph&gt;&lt;/title&gt;
-&lt;p&gt;Example Text &lt;ph outputclass="badge theme-primary"&gt;New&lt;/ph&gt;&lt;/p&gt;</codeblock>
+          <codeblock>&lt;title&gt;Example Heading &lt;ph outputclass="badge"&gt;New&lt;/ph&gt;&lt;/title&gt;
+&lt;p&gt;Example Text &lt;ph outputclass="badge"&gt;New&lt;/ph&gt;&lt;/p&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
@@ -51,12 +78,10 @@
 &lt;p&gt;Example Text &lt;badge&gt;New&lt;/badge&gt;&lt;/p&gt;</codeblock>
         </section>
       </bodydiv>
-    <section id="background-colors">
-      <title>Background colors</title>
-      <p>Set a background-color with contrasting foreground color with Bootstrap’s <codeph
-        >theme-{color}</codeph> helpers. Previously it was required to manually pair your choice of <xmlatt
-        >outputclass</xmlatt> <codeph>text-{color}</codeph> and <codeph
-        >bg-{color}</codeph> utilities for styling, which you still may use if you prefer.</p>
+    <section id="variants">
+      <title>Variants</title>
+      <p>Use the contextual <codeph>theme-{color}</codeph> outputclass to apply a semantic theme color to badges, in
+        any of the solid, subtle, or outline styles.</p>
     </section>
     <example>
       <p>
@@ -69,6 +94,26 @@
         <ph outputclass="badge theme-accent">Accent</ph>
         <ph outputclass="badge theme-inverse">Inverse</ph>
       </p>
+      <p>
+        <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>
+      </p>
+      <p>
+        <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>
+      </p>
     </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
@@ -80,7 +125,25 @@
 &lt;ph outputclass="badge theme-warning"&gt;Warning&lt;/ph&gt;
 &lt;ph outputclass="badge theme-info"&gt;Info&lt;/ph&gt;
 &lt;ph outputclass="badge theme-accent"&gt;Accent&lt;/ph&gt;
-&lt;ph outputclass="badge theme-inverse"&gt;Inverse&lt;/ph&gt;</codeblock>
+&lt;ph outputclass="badge theme-inverse"&gt;Inverse&lt;/ph&gt;
+
+&lt;ph outputclass="badge badge-subtle theme-primary"&gt;Primary&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-secondary"&gt;Secondary&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-success"&gt;Success&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-danger"&gt;Danger&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-warning"&gt;Warning&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-info"&gt;Info&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-accent"&gt;Accent&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-inverse"&gt;Inverse&lt;/ph&gt;
+
+&lt;ph outputclass="badge badge-outline theme-primary"&gt;Primary&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-secondary"&gt;Secondary&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-success"&gt;Success&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-danger"&gt;Danger&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-warning"&gt;Warning&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-info"&gt;Info&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-accent"&gt;Accent&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-inverse"&gt;Inverse&lt;/ph&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
@@ -91,7 +154,25 @@
 &lt;badge color="warning"&gt;Warning&lt;/badge&gt;
 &lt;badge color="info"&gt;Info&lt;/badge&gt;
 &lt;badge color="accent"&gt;Accent&lt;/badge&gt;
-&lt;badge color="inverse"&gt;Inverse&lt;/badge&gt;</codeblock>
+&lt;badge color="inverse"&gt;Inverse&lt;/badge&gt;
+
+&lt;badge color="primary" subtle="yes"&gt;Primary&lt;/badge&gt;
+&lt;badge color="secondary" subtle="yes"&gt;Secondary&lt;/badge&gt;
+&lt;badge color="success" subtle="yes"&gt;Success&lt;/badge&gt;
+&lt;badge color="danger" subtle="yes"&gt;Danger&lt;/badge&gt;
+&lt;badge color="warning" subtle="yes"&gt;Warning&lt;/badge&gt;
+&lt;badge color="info" subtle="yes"&gt;Info&lt;/badge&gt;
+&lt;badge color="accent" subtle="yes"&gt;Accent&lt;/badge&gt;
+&lt;badge color="inverse" subtle="yes"&gt;Inverse&lt;/badge&gt;
+
+&lt;badge color="primary" outline="yes"&gt;Primary&lt;/badge&gt;
+&lt;badge color="secondary" outline="yes"&gt;Secondary&lt;/badge&gt;
+&lt;badge color="success" outline="yes"&gt;Success&lt;/badge&gt;
+&lt;badge color="danger" outline="yes"&gt;Danger&lt;/badge&gt;
+&lt;badge color="warning" outline="yes"&gt;Warning&lt;/badge&gt;
+&lt;badge color="info" outline="yes"&gt;Info&lt;/badge&gt;
+&lt;badge color="accent" outline="yes"&gt;Accent&lt;/badge&gt;
+&lt;badge color="inverse" outline="yes"&gt;Inverse&lt;/badge&gt;</codeblock>
         </section>
       </bodydiv>
   </body>
diff --git a/sample/bootstrap-table.dita b/sample/bootstrap-table.dita
index 1d35c746..1f08ced8 100644
--- a/sample/bootstrap-table.dita
+++ b/sample/bootstrap-table.dita
@@ -5,7 +5,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <topic id="dynamic-tables">
diff --git a/sample/borders.dita b/sample/borders.dita
index baa1a1d0..a9c03e53 100644
--- a/sample/borders.dita
+++ b/sample/borders.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.
 
     -->
diff --git a/sample/breadcrumb.dita b/sample/breadcrumb.dita
index 50ea2f07..0c13bd72 100644
--- a/sample/breadcrumb.dita
+++ b/sample/breadcrumb.dita
@@ -5,7 +5,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <topic id="breadcrumb">
diff --git a/sample/button-group.dita b/sample/button-group.dita
index 7620c21a..09384d0b 100644
--- a/sample/button-group.dita
+++ b/sample/button-group.dita
@@ -4,7 +4,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
@@ -54,8 +54,8 @@
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
-    <section id="mixed-styles">
-      <title>Mixed styles</title>
+    <section id="theme-variants">
+      <title>Theme variants</title>
     </section>
     <example>
       <div outputclass="btn-group">
@@ -82,8 +82,8 @@
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
-    <section id="outlined-styles">
-      <title>Outlined styles</title>
+    <section id="style-variants">
+      <title>Style variants</title>
     </section>
     <example>
       <div outputclass="btn-group">
@@ -104,9 +104,9 @@
         <section>
         <title>Specialization</title>
           <codeblock>&lt;button-group&gt;
-  &lt;button color="primary" outline="yes" href="#"&gt;Left&lt;/button&gt;
-  &lt;button color="primary" outline="yes" href="#"&gt;Middle&lt;/button&gt;
-  &lt;button color="primary" outline="yes" href="#"&gt;Right&lt;/button&gt;
+  &lt;button color="primary" style="outline" href="#"&gt;Left&lt;/button&gt;
+  &lt;button color="primary" style="outline" href="#"&gt;Middle&lt;/button&gt;
+  &lt;button color="primary" style="outline" href="#"&gt;Right&lt;/button&gt;
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
diff --git a/sample/buttons.dita b/sample/buttons.dita
index 7693fac2..535eab06 100644
--- a/sample/buttons.dita
+++ b/sample/buttons.dita
@@ -4,7 +4,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
@@ -24,6 +24,26 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
+    <section id="base-class">
+      <title>Base class</title>
+      <p>Buttons have a standard <codeph>btn</codeph> 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.</p>
+    </section>
+    <example>
+      <ph outputclass="btn">Base class</ph>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;ph outputclass="btn"&gt;Base class&lt;/ph&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;button style="none"&gt;Base class&lt;/button&gt;</codeblock>
+      </section>
+    </bodydiv>
+
     <section id="example">
       <title>Example</title>
       <p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras
@@ -54,7 +74,7 @@
         </section>
           <section>
           <title>Specialization</title>
-          <codeblock>&lt;button href="#"&gt;Primary&lt;/button&gt;
+          <codeblock>&lt;button href="#" color="primary"&gt;Primary&lt;/button&gt;
 &lt;button href="#" color="secondary"&gt;Secondary&lt;/button&gt;
 &lt;button href="#" color="success"&gt;Success&lt;/button&gt;
 &lt;button href="#" color="danger"&gt;Danger&lt;/button&gt;
@@ -65,6 +85,175 @@
         </section>
       </bodydiv>
 
+    <section id="variants">
+      <title>Variants</title>
+      <p>Compare the solid (default), outline, subtle, and text button styles at once, combined with theme
+        colors.</p>
+    </section>
+    <bodydiv outputclass="p-3 border">
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-primary">Primary</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-primary">Primary</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-primary">Primary</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-primary">Primary</xref></bodydiv>
+      </bodydiv>
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-secondary">Secondary</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-secondary">Secondary</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-secondary">Secondary</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-secondary">Secondary</xref></bodydiv>
+      </bodydiv>
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-success">Success</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-success">Success</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-success">Success</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-success">Success</xref></bodydiv>
+      </bodydiv>
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-danger">Danger</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-danger">Danger</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-danger">Danger</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-danger">Danger</xref></bodydiv>
+      </bodydiv>
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-warning">Warning</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-warning">Warning</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-warning">Warning</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-warning">Warning</xref></bodydiv>
+      </bodydiv>
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-info">Info</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-info">Info</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-info">Info</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-info">Info</xref></bodydiv>
+      </bodydiv>
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-accent">Accent</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-accent">Accent</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-accent">Accent</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-accent">Accent</xref></bodydiv>
+      </bodydiv>
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-inverse">Inverse</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-inverse">Inverse</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-inverse">Inverse</xref></bodydiv>
+        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-inverse">Inverse</xref></bodydiv>
+      </bodydiv>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;xref href="#" outputclass="btn-solid theme-primary"&gt;Primary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-primary"&gt;Primary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-primary"&gt;Primary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-primary"&gt;Primary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid theme-secondary"&gt;Secondary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-secondary"&gt;Secondary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-secondary"&gt;Secondary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-secondary"&gt;Secondary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid theme-success"&gt;Success&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-success"&gt;Success&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-success"&gt;Success&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-success"&gt;Success&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid theme-danger"&gt;Danger&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-danger"&gt;Danger&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-danger"&gt;Danger&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-danger"&gt;Danger&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid theme-warning"&gt;Warning&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-warning"&gt;Warning&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-warning"&gt;Warning&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-warning"&gt;Warning&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid theme-info"&gt;Info&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-info"&gt;Info&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-info"&gt;Info&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-info"&gt;Info&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid theme-accent"&gt;Accent&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-accent"&gt;Accent&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-accent"&gt;Accent&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-accent"&gt;Accent&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid theme-inverse"&gt;Inverse&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-inverse"&gt;Inverse&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-inverse"&gt;Inverse&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-inverse"&gt;Inverse&lt;/xref&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;button href="#" color="primary"&gt;Primary&lt;/button&gt;
+&lt;button href="#" color="primary" style="outline"&gt;Primary&lt;/button&gt;
+&lt;button href="#" color="primary" style="subtle"&gt;Primary&lt;/button&gt;
+&lt;button href="#" color="primary" style="text"&gt;Primary&lt;/button&gt;
+&lt;button href="#" color="secondary"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" color="secondary" style="outline"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" color="secondary" style="subtle"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" color="secondary" style="text"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" color="success"&gt;Success&lt;/button&gt;
+&lt;button href="#" color="success" style="outline"&gt;Success&lt;/button&gt;
+&lt;button href="#" color="success" style="subtle"&gt;Success&lt;/button&gt;
+&lt;button href="#" color="success" style="text"&gt;Success&lt;/button&gt;
+&lt;button href="#" color="danger"&gt;Danger&lt;/button&gt;
+&lt;button href="#" color="danger" style="outline"&gt;Danger&lt;/button&gt;
+&lt;button href="#" color="danger" style="subtle"&gt;Danger&lt;/button&gt;
+&lt;button href="#" color="danger" style="text"&gt;Danger&lt;/button&gt;
+&lt;button href="#" color="warning"&gt;Warning&lt;/button&gt;
+&lt;button href="#" color="warning" style="outline"&gt;Warning&lt;/button&gt;
+&lt;button href="#" color="warning" style="subtle"&gt;Warning&lt;/button&gt;
+&lt;button href="#" color="warning" style="text"&gt;Warning&lt;/button&gt;
+&lt;button href="#" color="info"&gt;Info&lt;/button&gt;
+&lt;button href="#" color="info" style="outline"&gt;Info&lt;/button&gt;
+&lt;button href="#" color="info" style="subtle"&gt;Info&lt;/button&gt;
+&lt;button href="#" color="info" style="text"&gt;Info&lt;/button&gt;
+&lt;button href="#" color="accent"&gt;Accent&lt;/button&gt;
+&lt;button href="#" color="accent" style="outline"&gt;Accent&lt;/button&gt;
+&lt;button href="#" color="accent" style="subtle"&gt;Accent&lt;/button&gt;
+&lt;button href="#" color="accent" style="text"&gt;Accent&lt;/button&gt;
+&lt;button href="#" color="inverse"&gt;Inverse&lt;/button&gt;
+&lt;button href="#" color="inverse" style="outline"&gt;Inverse&lt;/button&gt;
+&lt;button href="#" color="inverse" style="subtle"&gt;Inverse&lt;/button&gt;
+&lt;button href="#" color="inverse" style="text"&gt;Inverse&lt;/button&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="styled-buttons">
+      <title>Styled buttons</title>
+      <p>Add visual depth to solid buttons with gradients and shadows using the <codeph>btn-styled</codeph> modifier
+        class. This provides a more three-dimensional appearance that can be customized further with CSS
+        variables.</p>
+    </section>
+    <example>
+      <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>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;xref href="#" outputclass="btn-solid btn-styled theme-primary"&gt;Primary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid btn-styled theme-secondary"&gt;Secondary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid btn-styled theme-success"&gt;Success&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid btn-styled theme-danger"&gt;Danger&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid btn-styled theme-warning"&gt;Warning&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid btn-styled theme-info"&gt;Info&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid btn-styled theme-accent"&gt;Accent&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid btn-styled theme-inverse"&gt;Inverse&lt;/xref&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;button href="#" color="primary" gradient="yes"&gt;Primary&lt;/button&gt;
+&lt;button href="#" color="secondary" gradient="yes"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" color="success" gradient="yes"&gt;Success&lt;/button&gt;
+&lt;button href="#" color="danger" gradient="yes"&gt;Danger&lt;/button&gt;
+&lt;button href="#" color="warning" gradient="yes"&gt;Warning&lt;/button&gt;
+&lt;button href="#" color="info" gradient="yes"&gt;Info&lt;/button&gt;
+&lt;button href="#" color="accent" gradient="yes"&gt;Accent&lt;/button&gt;
+&lt;button href="#" color="inverse" gradient="yes"&gt;Inverse&lt;/button&gt;</codeblock>
+      </section>
+    </bodydiv>
+
     <section id="outline-buttons">
       <title>Outline buttons</title>
       <p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with
@@ -96,20 +285,20 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;button href="#" outline="yes"&gt;Primary&lt;/button&gt;
-&lt;button href="#" color="secondary" outline="yes"&gt;Secondary&lt;/button&gt;
-&lt;button href="#" color="success" outline="yes"&gt;Success&lt;/button&gt;
-&lt;button href="#" color="danger" outline="yes"&gt;Danger&lt;/button&gt;
-&lt;button href="#" color="warning" outline="yes"&gt;Warning&lt;/button&gt;
-&lt;button href="#" color="info" outline="yes"&gt;Info&lt;/button&gt;
-&lt;button href="#" color="accent" outline="yes"&gt;Accent&lt;/button&gt;
-&lt;button href="#" color="inverse" outline="yes"&gt;Inverse&lt;/button&gt;</codeblock>
+          <codeblock>&lt;button href="#" style="outline"&gt;Primary&lt;/button&gt;
+&lt;button href="#" color="secondary" style="outline"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" color="success" style="outline"&gt;Success&lt;/button&gt;
+&lt;button href="#" color="danger" style="outline"&gt;Danger&lt;/button&gt;
+&lt;button href="#" color="warning" style="outline"&gt;Warning&lt;/button&gt;
+&lt;button href="#" color="info" style="outline"&gt;Info&lt;/button&gt;
+&lt;button href="#" color="accent" style="outline"&gt;Accent&lt;/button&gt;
+&lt;button href="#" color="inverse" style="outline"&gt;Inverse&lt;/button&gt;</codeblock>
         </section>
       </bodydiv>
     <section id="sizing">
       <title>Sizing</title>
-      <p>Fancy larger or smaller buttons? Use <xmlatt>size="large"</xmlatt> or
-          <xmlatt>size="small"</xmlatt> for additional sizes.</p>
+      <p>Fancy larger or smaller buttons? Use <xmlatt>size="large"</xmlatt>, <xmlatt>size="small"</xmlatt>, or
+          <xmlatt>size="xs"</xmlatt> for additional sizes.</p>
     </section>
     <example>
       <xref href="#" outputclass="btn theme-primary btn-lg">Large button</xref>
@@ -146,6 +335,24 @@
 &lt;button href="#" color="secondary" size="small"&gt;Small button&lt;/button&gt;</codeblock>
         </section>
       </bodydiv>
+
+    <example>
+      <xref href="#" outputclass="btn theme-primary btn-xs">Extra small button</xref>
+      <xref href="#" outputclass="btn theme-secondary btn-xs">Extra small button</xref>
+    </example>
+
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+          <title><xmlatt>outputclass</xmlatt></title>
+          <codeblock>&lt;xref href="#" outputclass="btn theme-primary btn-xs"&gt;Extra small button&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-secondary btn-xs"&gt;Extra small button&lt;/xref&gt;</codeblock>
+        </section>
+         <section>
+        <title>Specialization</title>
+          <codeblock>&lt;button href="#" size="xs"&gt;Extra small button&lt;/button&gt;
+&lt;button href="#" color="secondary" size="xs"&gt;Extra small button&lt;/button&gt;</codeblock>
+        </section>
+      </bodydiv>
   </body>
 
 
diff --git a/sample/card.dita b/sample/card.dita
index 3b735c0e..e2f418c1 100644
--- a/sample/card.dita
+++ b/sample/card.dita
@@ -4,7 +4,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
diff --git a/sample/carousel.dita b/sample/carousel.dita
index de859baf..8ad6160f 100644
--- a/sample/carousel.dita
+++ b/sample/carousel.dita
@@ -4,7 +4,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
diff --git a/sample/containers.dita b/sample/containers.dita
index 4b25d366..3ed0b26f 100644
--- a/sample/containers.dita
+++ b/sample/containers.dita
@@ -5,7 +5,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <topic id="containers">
diff --git a/sample/dark-mode.dita b/sample/dark-mode.dita
index 88b3dacc..bd5a9b72 100644
--- a/sample/dark-mode.dita
+++ b/sample/dark-mode.dita
@@ -5,7 +5,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <topic id="dark-mode">
diff --git a/sample/drawer.dita b/sample/drawer.dita
index 82978d2a..ccd9b587 100644
--- a/sample/drawer.dita
+++ b/sample/drawer.dita
@@ -4,7 +4,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
diff --git a/sample/extension-points.dita b/sample/extension-points.dita
index 3d869e9b..496d1d8d 100644
--- a/sample/extension-points.dita
+++ b/sample/extension-points.dita
@@ -5,7 +5,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <topic id="extension-points">
diff --git a/sample/figures.dita b/sample/figures.dita
index d8695155..75f3d518 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.-->
 <topic id="figures">
diff --git a/sample/grid.dita b/sample/grid.dita
index 10a078d1..0309ef0c 100644
--- a/sample/grid.dita
+++ b/sample/grid.dita
@@ -5,7 +5,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <topic id="grid">
diff --git a/sample/images.dita b/sample/images.dita
index e2b0dd69..83568e3e 100644
--- a/sample/images.dita
+++ b/sample/images.dita
@@ -5,7 +5,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <topic id="images">
diff --git a/sample/index.dita b/sample/index.dita
index cf952af0..7f78ee07 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -5,7 +5,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <topic id="index">
@@ -545,6 +545,8 @@
       <indexterm><parmname>--bootstrap.css.codeblock</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.topic.title</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.section.title</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.badge</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.button</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.card</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.carousel</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.carousel.caption</parmname></indexterm>
@@ -602,6 +604,24 @@
             <xref href="./accordion.dita" format="dita">accordion components</xref>
           </pd>
         </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.css&#8203;.badge</parmname>
+          </pt>
+          <pd>
+            Common utility classes for Bootstrap
+            <xref href="./badge.dita" format="dita">badge components</xref>
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.css&#8203;.button</parmname>
+          </pt>
+          <pd>
+            Common utility classes for Bootstrap
+            <xref href="./buttons.dita" format="dita">button components</xref>
+          </pd>
+        </plentry>
         <plentry>
           <pt>
             <parmname>--bootstrap.css&#8203;.card</parmname>
diff --git a/sample/list-group.dita b/sample/list-group.dita
index 5543959b..a0718a9a 100644
--- a/sample/list-group.dita
+++ b/sample/list-group.dita
@@ -4,7 +4,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
diff --git a/sample/nav.dita b/sample/nav.dita
index 52db3e1d..73f6ee62 100644
--- a/sample/nav.dita
+++ b/sample/nav.dita
@@ -5,7 +5,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <topic id="navigation">
diff --git a/sample/offline.dita b/sample/offline.dita
index 0d63f623..e787bc72 100644
--- a/sample/offline.dita
+++ b/sample/offline.dita
@@ -5,7 +5,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <topic id="offline">
diff --git a/sample/pagination.dita b/sample/pagination.dita
index 14de657d..9a637399 100644
--- a/sample/pagination.dita
+++ b/sample/pagination.dita
@@ -4,7 +4,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
diff --git a/sample/popovers.dita b/sample/popovers.dita
index d064b96f..1713b9d4 100644
--- a/sample/popovers.dita
+++ b/sample/popovers.dita
@@ -4,7 +4,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
diff --git a/sample/rtl.dita b/sample/rtl.dita
index 7718dba0..11622c1b 100644
--- a/sample/rtl.dita
+++ b/sample/rtl.dita
@@ -4,7 +4,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
diff --git a/sample/sass.dita b/sample/sass.dita
index fe7bd94b..d8076dbd 100644
--- a/sample/sass.dita
+++ b/sample/sass.dita
@@ -5,7 +5,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <topic id="offline">
diff --git a/sample/search-box.dita b/sample/search-box.dita
index 48d7eaa6..7be4ac31 100644
--- a/sample/search-box.dita
+++ b/sample/search-box.dita
@@ -5,7 +5,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <topic id="search-box">
diff --git a/sample/tables.dita b/sample/tables.dita
index c0177808..3f4108c0 100644
--- a/sample/tables.dita
+++ b/sample/tables.dita
@@ -5,7 +5,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <topic id="tables">
diff --git a/sample/tabs.dita b/sample/tabs.dita
index e7d8c8a7..b4fdd57c 100644
--- a/sample/tabs.dita
+++ b/sample/tabs.dita
@@ -4,7 +4,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
diff --git a/sample/tooltips.dita b/sample/tooltips.dita
index 97ef8675..64bd0c79 100644
--- a/sample/tooltips.dita
+++ b/sample/tooltips.dita
@@ -4,7 +4,7 @@
   directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   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. and the Bootstrap Authors,
+  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.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 0091d93e..b76b7c7c 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -16,6 +16,8 @@
   <xsl:param name="BOOTSTRAP_CSS_SECTION_TITLE" select="'h4'"/>
   <xsl:param name="BOOTSTRAP_CSS_CARD_TITLE" select="'h5'"/>
   <xsl:param name="BOOTSTRAP_CSS_CARD" select="''"/>
+  <xsl:param name="BOOTSTRAP_CSS_BADGE" select="''"/>
+  <xsl:param name="BOOTSTRAP_CSS_BUTTON" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_CARD_WIDTH" select="'w-50'"/>
   <xsl:param name="BOOTSTRAP_CSS_CAROUSEL" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_CAPTION" select="'theme-secondary border rounded p-1'"/>
@@ -263,11 +265,9 @@
 
   <!-- Change the default Bootstrap CSS classes of alerts -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/alert ')]" mode="bootstrap-class" priority="10">
-    <xsl:text>theme-</xsl:text>
-    <xsl:value-of select="@color"/>
-    <xsl:text> fg-emphasis-</xsl:text>
-    <xsl:value-of select="@color"/>
-    <xsl:text> </xsl:text>
+    <xsl:if test="@color">
+      <xsl:value-of select="concat('theme-', @color, ' fg-emphasis-', @color, ' ')"/>
+    </xsl:if>
     <xsl:if test="*[contains(@class, ' topic/p ')]">
       <xsl:text>vstack </xsl:text>
     </xsl:if>
@@ -319,30 +319,44 @@
   >
     <xsl:value-of
       select="
-        if (@outline = 'yes') then 'btn btn-outline'
+        if (@style = 'none') then 'btn'
+        else if (@style = 'outline') then 'btn btn-outline'
+        else if (@style = 'subtle') then 'btn-subtle'
+        else if (@style = 'text') then 'btn-text'
         else if (contains(@outputclass, 'btn-outline')) then 'btn'
         else 'btn-solid'"
     />
-    <xsl:if test="@color">
+    <xsl:if test="@color and not(@style = 'none')">
       <xsl:text> theme-</xsl:text>
-      <xsl:value-of select="(@color, 'primary')[1]"/>
+      <xsl:value-of select="@color"/>
     </xsl:if>
-    <xsl:if test="@styled">
+    <xsl:if test="@gradient = 'yes' and not(@style = 'none')">
       <xsl:text> btn-styled</xsl:text>
     </xsl:if>
     <xsl:text> </xsl:text>
     <xsl:choose>
+      <xsl:when test="@size = 'xs'">btn-xs </xsl:when>
       <xsl:when test="@size = 'small'">btn-sm </xsl:when>
       <xsl:when test="@size = 'large'">btn-lg </xsl:when>
     </xsl:choose>
+    <xsl:value-of select="concat(' ', $BOOTSTRAP_CSS_BUTTON)"/>
     <xsl:next-match/>
   </xsl:template>
 
   <!-- Change the default Bootstrap CSS classes of badges -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/badge ')]" mode="bootstrap-class" priority="10">
-    <xsl:text>theme-</xsl:text>
-    <xsl:value-of select="(@color, 'primary')[1]"/>
-    <xsl:text> </xsl:text>
+    <xsl:if test="@style = 'outline'">
+      <xsl:text>badge-outline </xsl:text>
+    </xsl:if>
+    <xsl:if test="@style = 'subtle'">
+      <xsl:text>badge-subtle </xsl:text>
+    </xsl:if>
+    <xsl:if test="@color and not(@style = 'none')">
+      <xsl:text>theme-</xsl:text>
+      <xsl:value-of select="@color"/>
+      <xsl:text> </xsl:text>
+    </xsl:if>
+    <xsl:value-of select="concat(' ', $BOOTSTRAP_CSS_BADGE)"/>
     <xsl:next-match/>
   </xsl:template>
 
@@ -500,6 +514,7 @@
           select="
             if (contains(@class, ' bootstrap-d/button ')) then ''
             else if (contains(@class, ' bootstrap-d/badge ')) then ''
+            else if (contains(@class, ' topic/ph ') and tokenize(@outputclass, '\s+') = 'badge') then $BOOTSTRAP_CSS_BADGE
             else if (contains(@class, ' bootstrap-d/carousel ')) then ''
             else if (contains(@class, ' bootstrap-d/button-group ')) then ''
             else if (contains(@class, ' bootstrap-d/list-group ')) then ''

From e342709fed660296cc10125627154c58d180c880 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 11 Aug 2026 14:24:04 +0200
Subject: [PATCH 69/87] Amend alignment

---
 sample/alerts.dita  |   2 +-
 sample/buttons.dita | 128 +++++++++++++++++++++++++++++++++-----------
 2 files changed, 97 insertions(+), 33 deletions(-)

diff --git a/sample/alerts.dita b/sample/alerts.dita
index b2359e12..494f2aab 100644
--- a/sample/alerts.dita
+++ b/sample/alerts.dita
@@ -186,7 +186,7 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;alert color="primary" outputclass="d-flex align-items-center"&gt;
+        <codeblock>&lt;alert color="primary"&gt;
   &lt;icon outputclass="bi-exclamation-triangle-fill flex-shrink-0" padding="e2"/&gt;An example alert with an icon
 &lt;/alert&gt;</codeblock>
       </section>
diff --git a/sample/buttons.dita b/sample/buttons.dita
index 535eab06..f23b02d3 100644
--- a/sample/buttons.dita
+++ b/sample/buttons.dita
@@ -92,52 +92,116 @@
     </section>
     <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="row">
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-primary">Primary</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-primary">Primary</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-primary">Primary</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-primary">Primary</xref></bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-primary">Primary</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-primary">Primary</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-primary">Primary</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-primary">Primary</xref>
+        </bodydiv>
       </bodydiv>
       <bodydiv outputclass="row">
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-secondary">Secondary</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-secondary">Secondary</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-secondary">Secondary</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-secondary">Secondary</xref></bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-secondary">Secondary</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-secondary">Secondary</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-secondary">Secondary</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-secondary">Secondary</xref>
+        </bodydiv>
       </bodydiv>
       <bodydiv outputclass="row">
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-success">Success</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-success">Success</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-success">Success</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-success">Success</xref></bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-success">Success</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-success">Success</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-success">Success</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-success">Success</xref>
+        </bodydiv>
       </bodydiv>
       <bodydiv outputclass="row">
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-danger">Danger</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-danger">Danger</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-danger">Danger</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-danger">Danger</xref></bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-danger">Danger</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-danger">Danger</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-danger">Danger</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-danger">Danger</xref>
+        </bodydiv>
       </bodydiv>
       <bodydiv outputclass="row">
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-warning">Warning</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-warning">Warning</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-warning">Warning</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-warning">Warning</xref></bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-warning">Warning</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-warning">Warning</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-warning">Warning</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-warning">Warning</xref>
+        </bodydiv>
       </bodydiv>
       <bodydiv outputclass="row">
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-info">Info</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-info">Info</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-info">Info</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-info">Info</xref></bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-info">Info</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-info">Info</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-info">Info</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-info">Info</xref>
+        </bodydiv>
       </bodydiv>
       <bodydiv outputclass="row">
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-accent">Accent</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-accent">Accent</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-accent">Accent</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-accent">Accent</xref></bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-accent">Accent</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-accent">Accent</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-accent">Accent</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-accent">Accent</xref>
+        </bodydiv>
       </bodydiv>
       <bodydiv outputclass="row">
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-solid theme-inverse">Inverse</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-outline theme-inverse">Inverse</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-subtle theme-inverse">Inverse</xref></bodydiv>
-        <bodydiv outputclass="col"><xref href="#" outputclass="btn-text theme-inverse">Inverse</xref></bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-inverse">Inverse</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-inverse">Inverse</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-inverse">Inverse</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-inverse">Inverse</xref>
+        </bodydiv>
       </bodydiv>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">

From d04815fb99da775f3d98406043369490dbf2aecc Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 11 Aug 2026 16:03:25 +0200
Subject: [PATCH 70/87] Update pagination

---
 sample/alerts.dita      |   4 +-
 sample/pagination.dita  | 186 ++++++++++++++++++++++++++++++++++++++++
 xsl/utility-classes.xsl |   3 +
 3 files changed, 192 insertions(+), 1 deletion(-)

diff --git a/sample/alerts.dita b/sample/alerts.dita
index 494f2aab..38f0ee8b 100644
--- a/sample/alerts.dita
+++ b/sample/alerts.dita
@@ -187,7 +187,9 @@
       <section>
         <title>Specialization</title>
         <codeblock>&lt;alert color="primary"&gt;
-  &lt;icon outputclass="bi-exclamation-triangle-fill flex-shrink-0" padding="e2"/&gt;An example alert with an icon
+  &lt;div&gt;
+    &lt;icon outputclass="bi-exclamation-triangle-fill flex-shrink-0" padding="e2"/&gt;An example alert with an icon
+  &lt;/div&gt;
 &lt;/alert&gt;</codeblock>
       </section>
     </bodydiv>
diff --git a/sample/pagination.dita b/sample/pagination.dita
index 9a637399..b4ee7e03 100644
--- a/sample/pagination.dita
+++ b/sample/pagination.dita
@@ -85,6 +85,192 @@
 &lt;/pagination&gt;</codeblock>
         </section>
       </bodydiv>
+    <section id="variants">
+      <title>Variants</title>
+      <p>Add a <codeph>theme-{color}</codeph> outputclass to a pagination list to apply a semantic theme color
+        across the component, including hover, focus, and the active page item.</p>
+    </section>
+    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+      <section id="page-navigation-example-primary" outputclass="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>
+      </section>
+      <section id="page-navigation-example-secondary" outputclass="pagination theme-secondary">
+        <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>
+      </section>
+      <section id="page-navigation-example-success" outputclass="pagination theme-success">
+        <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>
+      </section>
+      <section id="page-navigation-example-danger" outputclass="pagination theme-danger">
+        <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>
+      </section>
+      <section id="page-navigation-example-warning" outputclass="pagination theme-warning">
+        <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>
+      </section>
+      <section id="page-navigation-example-info" outputclass="pagination theme-info">
+        <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>
+      </section>
+      <section id="page-navigation-example-accent" outputclass="pagination theme-accent">
+        <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>
+      </section>
+      <section id="page-navigation-example-inverse" outputclass="pagination theme-inverse">
+        <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>
+      </section>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-primary"&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;Previous&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;1&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;2&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;3&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;Next&lt;/xref&gt;&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-secondary"&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-success"&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-danger"&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-warning"&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-info"&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-accent"&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-inverse"&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/section&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;pagination color="primary"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;Previous&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;1&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;2&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;3&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;Next&lt;/xref&gt;&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/pagination&gt;
+&lt;pagination color="secondary"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;...&lt;/ol&gt;
+&lt;/pagination&gt;
+&lt;pagination color="success"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;...&lt;/ol&gt;
+&lt;/pagination&gt;
+&lt;pagination color="danger"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;...&lt;/ol&gt;
+&lt;/pagination&gt;
+&lt;pagination color="warning"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;...&lt;/ol&gt;
+&lt;/pagination&gt;
+&lt;pagination color="info"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;...&lt;/ol&gt;
+&lt;/pagination&gt;
+&lt;pagination color="accent"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;...&lt;/ol&gt;
+&lt;/pagination&gt;
+&lt;pagination color="inverse"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;...&lt;/ol&gt;
+&lt;/pagination&gt;</codeblock>
+      </section>
+    </bodydiv>
+
     <section id="sizing">
       <title>Sizing</title>
       <p>Fancy larger or smaller pagination? Use <xmlatt>size="large"</xmlatt> or
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index b76b7c7c..766a3a67 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -246,6 +246,9 @@
       <xsl:value-of select="ancestor::*[contains(@class,' bootstrap-d/pagination ')][1]/@outputclass"/>
       <xsl:text> </xsl:text>
     </xsl:if>
+    <xsl:if test="ancestor::*[contains(@class,' bootstrap-d/pagination ')][1]/@color">
+      <xsl:value-of select="concat('theme-', ancestor::*[contains(@class,' bootstrap-d/pagination ')][1]/@color, ' ')"/>
+    </xsl:if>
     <xsl:value-of select="$BOOTSTRAP_CSS_PAGINATION"/>
     <xsl:next-match/>
   </xsl:template>

From 8127a5071f4bb722f263481d2cf3ae8f7fda7d96 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 11 Aug 2026 20:10:34 +0200
Subject: [PATCH 71/87] Updating buttons and references

---
 .github/dita-ot/header.xml       |  2 +-
 Customization/xsl/accordion.xsl  |  2 +-
 Customization/xsl/breadcrumb.xsl |  2 +-
 Customization/xsl/card.xsl       |  2 +-
 Customization/xsl/carousel.xsl   |  2 +-
 Customization/xsl/collapse.xsl   |  2 +-
 Customization/xsl/drawer.xsl     |  2 +-
 Customization/xsl/nav.xsl        |  8 ++---
 Customization/xsl/pagination.xsl |  2 +-
 Customization/xsl/popovers.xsl   |  2 +-
 Customization/xsl/scrollspy.xsl  |  2 +-
 Customization/xsl/tabs.xsl       |  4 +--
 Customization/xsl/tooltips.xsl   |  2 +-
 Customization/xsl/topic.xsl      |  8 ++---
 README.md                        | 16 ++++-----
 sample/card.dita                 | 10 +++---
 sample/collapse.dita             | 12 ++++---
 sample/drawer.dita               | 24 +++++++++----
 sample/popovers.dita             | 36 +++++++++----------
 sample/rtl.dita                  |  6 ++--
 sample/tooltips.dita             | 60 ++++++++++++++++++++++----------
 21 files changed, 123 insertions(+), 83 deletions(-)

diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml
index 52095998..e0ae95a3 100644
--- a/.github/dita-ot/header.xml
+++ b/.github/dita-ot/header.xml
@@ -50,7 +50,7 @@
       <li class="nav-item">
         <a
             class="nav-link"
-            href="https://getbootstrap.com/docs/5.3"
+            href="https://getbootstrap.com/docs/6.0"
           >Bootstrap Docs</a>
       </li>
     </ul>
diff --git a/Customization/xsl/accordion.xsl b/Customization/xsl/accordion.xsl
index cccde048..1014ef10 100644
--- a/Customization/xsl/accordion.xsl
+++ b/Customization/xsl/accordion.xsl
@@ -12,7 +12,7 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Accordion Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/accordion/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/accordion/ -->
 
   <xsl:template
     match="*[contains(@class, ' bootstrap-d/accordion ') or (contains(@class,' topic/bodydiv ') and (contains(@outputclass, 'accordion') or contains(@outputclass, 'accordion-flush')))]"
diff --git a/Customization/xsl/breadcrumb.xsl b/Customization/xsl/breadcrumb.xsl
index 6e382e79..8e40956a 100644
--- a/Customization/xsl/breadcrumb.xsl
+++ b/Customization/xsl/breadcrumb.xsl
@@ -12,7 +12,7 @@
   exclude-result-prefixes="xs dita-ot ditamsg"
 >
   <!-- Override to add Bootstrap breadcrumb component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/breadcrumb/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/breadcrumb/ -->
 
   <!-- Whether include a bootstrap breadcrumb component on each page.  values are 'yes' or 'no' -->
   <xsl:param name="BREADCRUMBS" select="'no'"/>
diff --git a/Customization/xsl/card.xsl b/Customization/xsl/card.xsl
index cab9e432..85ce9519 100644
--- a/Customization/xsl/card.xsl
+++ b/Customization/xsl/card.xsl
@@ -12,7 +12,7 @@
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 >
   <!-- Customization to add Bootstrap Card Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/card/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/card/ -->
 
   <xsl:template
     match="*[contains(@class, ' bootstrap-d/card ')]
diff --git a/Customization/xsl/carousel.xsl b/Customization/xsl/carousel.xsl
index c2f79798..f238caa0 100644
--- a/Customization/xsl/carousel.xsl
+++ b/Customization/xsl/carousel.xsl
@@ -12,7 +12,7 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Carousel Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/carousel/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/carousel/ -->
 
   <xsl:param name="BOOTSTRAP_CSS_CAROUSEL_INDICATORS" select="''"/>
 
diff --git a/Customization/xsl/collapse.xsl b/Customization/xsl/collapse.xsl
index 57a49e96..932df48b 100644
--- a/Customization/xsl/collapse.xsl
+++ b/Customization/xsl/collapse.xsl
@@ -12,7 +12,7 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Collapse Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/collapse/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/collapse/ -->
 
   <xsl:template match="*[contains(@class,' topic/bodydiv ') and contains(@outputclass, 'collapse-horizontal')]">
     <xsl:variable name="id" select="if(@id) then dita-ot:generate-html-id(.) else generate-id(.)"/>
diff --git a/Customization/xsl/drawer.xsl b/Customization/xsl/drawer.xsl
index 5785e9dd..aab85a53 100644
--- a/Customization/xsl/drawer.xsl
+++ b/Customization/xsl/drawer.xsl
@@ -12,7 +12,7 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Offcanvas Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/drawer/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/drawer/ -->
 
   <xsl:template
     match="*[contains(@class, ' bootstrap-d/drawer ')] | *[contains(@class,' topic/section ') and contains(@outputclass, 'drawer-')]"
diff --git a/Customization/xsl/nav.xsl b/Customization/xsl/nav.xsl
index 8b2a58aa..7cefb31e 100644
--- a/Customization/xsl/nav.xsl
+++ b/Customization/xsl/nav.xsl
@@ -360,7 +360,7 @@
   </xsl:template>
 
   <!-- list-group sidebar toc processing to add Bootstrap list-group menu -->
-  <!-- https://getbootstrap.com/docs/5.3/components/list-group/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/list-group/ -->
 
   <!-- partial list-group sidebar toc processing -->
   <xsl:template match="*[contains(@class, ' map/map ')]" mode="list-group-toc-pull">
@@ -390,7 +390,7 @@
   </xsl:template>
 
   <!-- nav-pill sidebar toc processing to add Bootstrap nav-pills menu -->
-  <!-- https://getbootstrap.com/docs/5.3/components/navs-tabs/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/navs-tabs/ -->
 
   <!-- partial nav-pill sidebar toc processing -->
   <xsl:template match="*[contains(@class, ' map/map ')]" mode="nav-pill-toc-pull">
@@ -420,7 +420,7 @@
   </xsl:template>
 
   <!-- collapsible sidebar toc processing to add Bootstrap collapsing menu classes -->
-  <!-- https://getbootstrap.com/docs/5.3/components/collapse/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/collapse/ -->
   <xsl:template match="*" mode="collapsible-toc" priority="-10">
     <xsl:param name="pathFromMaplist" as="xs:string"/>
     <xsl:apply-templates select="*[contains(@class, ' map/topicref ')]" mode="collapsible-toc">
@@ -429,7 +429,7 @@
   </xsl:template>
 
   <!-- nav-pill menubar-toc submenu toc processing - a navbar with dropdowns -->
-  <!-- https://getbootstrap.com/docs/5.3/components/dropdowns/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/dropdowns/ -->
   <xsl:template match="*" mode="menubar-toc" priority="-10">
     <xsl:param name="pathFromMaplist" as="xs:string"/>
     <xsl:apply-templates select="*[contains(@class, ' map/topicref ')]" mode="menubar-toc">
diff --git a/Customization/xsl/pagination.xsl b/Customization/xsl/pagination.xsl
index 0a78f74d..18194a5b 100644
--- a/Customization/xsl/pagination.xsl
+++ b/Customization/xsl/pagination.xsl
@@ -12,7 +12,7 @@
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 >
   <!-- Customization to add Bootstrap Pagination Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/pagination/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/pagination/ -->
 
   <xsl:template
     match="*[ (contains(@class, ' topic/ol ') or contains(@class, ' topic/ul ')) and contains(@outputclass, 'pagination')]"
diff --git a/Customization/xsl/popovers.xsl b/Customization/xsl/popovers.xsl
index a4928be6..9e4eabf5 100644
--- a/Customization/xsl/popovers.xsl
+++ b/Customization/xsl/popovers.xsl
@@ -12,7 +12,7 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Popover component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/popovers/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/popovers/ -->
 
   <xsl:template match="*" mode="add-bootstrap-popover">
     <xsl:attribute name="data-bs-toggle">
diff --git a/Customization/xsl/scrollspy.xsl b/Customization/xsl/scrollspy.xsl
index 5ae42e13..5822771f 100644
--- a/Customization/xsl/scrollspy.xsl
+++ b/Customization/xsl/scrollspy.xsl
@@ -12,7 +12,7 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Scrollspy Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/scrollspy/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/scrollspy/ -->
 
   <xsl:template name="scrollspy-content">
     <xsl:choose>
diff --git a/Customization/xsl/tabs.xsl b/Customization/xsl/tabs.xsl
index 38c19171..82db4072 100644
--- a/Customization/xsl/tabs.xsl
+++ b/Customization/xsl/tabs.xsl
@@ -12,14 +12,14 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Tabbed Dialog Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/navs-tabs/#tabs -->
+  <!-- https://getbootstrap.com/docs/6.0/components/navs-tabs/#tabs -->
 
   <xsl:template
     match="*[contains(@class, ' bootstrap-d/tabbed-dialog ')] | *[contains(@class,' topic/bodydiv ') and (contains(@outputclass, 'nav-tabs') or contains(@outputclass, 'nav-pills'))]"
   >
     <xsl:choose>
       <!-- Pills with Vertical alignment -->
-      <!-- https://getbootstrap.com/docs/5.3/components/navs-tabs/#vertical -->
+      <!-- https://getbootstrap.com/docs/6.0/components/navs-tabs/#vertical -->
       <xsl:when test="@style = 'vertical-pills' or contains(@outputclass, 'nav-pills-vertical')">
         <div class="d-flex align-items-start">
           <div role="tablist" aria-orientation="vertical">
diff --git a/Customization/xsl/tooltips.xsl b/Customization/xsl/tooltips.xsl
index e889a21b..40bdfef9 100644
--- a/Customization/xsl/tooltips.xsl
+++ b/Customization/xsl/tooltips.xsl
@@ -12,7 +12,7 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Tooltips component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/tooltips/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/tooltips/ -->
 
   <xsl:template match="*" mode="add-bootstrap-tooltip">
     <xsl:attribute name="data-bs-toggle">
diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl
index 030393ea..f13c83a7 100644
--- a/Customization/xsl/topic.xsl
+++ b/Customization/xsl/topic.xsl
@@ -284,7 +284,7 @@
   <xsl:template match="/ | @* | node()" mode="gen-user-bootstrap-attrs" priority="-10"/>
 
   <!-- Override to add Bootstrap Alert classes and roles to Note elements -->
-  <!-- https://getbootstrap.com/docs/5.3/components/alerts/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/alerts/ -->
   <xsl:template match="*" mode="process.note.common-processing">
     <xsl:param name="type" select="@type"/>
     <xsl:param name="title">
@@ -354,7 +354,7 @@
   </xsl:template>
 
   <!-- Customization to add Bootstrap Figure Content -->
-  <!-- https://getbootstrap.com/docs/5.3/content/figures/ -->
+  <!-- https://getbootstrap.com/docs/6.0/content/figures/ -->
   <xsl:template
     match="*[contains(@class, ' topic/fig ') and not(contains(@class,' pr-d/syntaxdiagram ')) and not(contains(@class,' ut-d/imagemap '))]"
     name="topic.fig"
@@ -469,7 +469,7 @@
   </xsl:template>
 
   <!-- Customization to add Bootstrap Borders to Codeblock elements-->
-  <!-- https://getbootstrap.com/docs/5.3/utilities/borders/ -->
+  <!-- https://getbootstrap.com/docs/6.0/utilities/borders/ -->
   <xsl:template match="*[contains(@class, ' topic/pre ') and @frame]">
     <xsl:variable name="default-fig-class">
       <xsl:apply-templates select="." mode="dita2html:get-default-fig-class"/>
@@ -496,7 +496,7 @@
   </xsl:template>
 
   <!-- Customization to add Bootstrap Borders to Lines elements-->
-  <!-- https://getbootstrap.com/docs/5.3/utilities/borders/ -->
+  <!-- https://getbootstrap.com/docs/6.0/utilities/borders/ -->
   <xsl:template match="*[contains(@class, ' topic/lines ') and @frame]">
     <xsl:variable name="default-fig-class">
       <xsl:apply-templates select="." mode="dita2html:get-default-fig-class"/>
diff --git a/README.md b/README.md
index 2e3bed37..c97dbac8 100644
--- a/README.md
+++ b/README.md
@@ -249,22 +249,22 @@ The generated HTML created by this software includes the following additional so
 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][2], however DITA markup is used throughout the examples describing how to implement these components correctly using `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.
 
 [1]: http://www.dita-ot.org
-[2]: https://getbootstrap.com/docs/5.3
+[2]: https://getbootstrap.com/docs/6.0
 [3]: https://bootswatch.com
 [4]: https://sass-lang.com
 [5]: https://github.com/dita-bootstrap/dita-bootstrap.sass
-[6]: https://getbootstrap.com/docs/5.3/examples/navbars/
-[7]: https://getbootstrap.com/docs/5.3/examples/headers/
+[6]: https://getbootstrap.com/docs/6.0/examples/navbars/
+[7]: https://getbootstrap.com/docs/6.0/examples/headers/
 [8]: ./includes/hdr.navbar.example.xml
 [9]: ./includes/ftr.content.example.xml
-[10]: https://getbootstrap.com/docs/5.3/examples/footers/
+[10]: https://getbootstrap.com/docs/6.0/examples/footers/
 [11]: https://www.dita-ot.org/dev/parameters/parameters-html5.html#html5__nav-toc
-[12]: https://getbootstrap.com/docs/5.3/components/list-group/
-[13]: https://getbootstrap.com/docs/5.3/components/collapse/
-[14]: https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode
+[12]: https://getbootstrap.com/docs/6.0/components/list-group/
+[13]: https://getbootstrap.com/docs/6.0/components/collapse/
+[14]: https://getbootstrap.com/docs/6.0/customize/color-modes/#dark-mode
 [15]: https://dita-bootstrap.github.io
 [16]: ./xsl/html5-bootstrap-template.xsl
-[17]: https://getbootstrap.com/docs/5.3/components/scrollspy/
+[17]: https://getbootstrap.com/docs/6.0/components/scrollspy/
 [18]: https://indieweb.social/@infotexture
 [19]: https://github.com/dita-bootstrap/dita-bootstrap.html/issues/new
 [20]: https://help.github.com/articles/using-pull-requests/
diff --git a/sample/card.dita b/sample/card.dita
index e2f418c1..60c4302a 100644
--- a/sample/card.dita
+++ b/sample/card.dita
@@ -52,7 +52,7 @@
         <title>Card Title</title>
         <image scope="external" href="https://picsum.photos/400/200?a"/>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
-        <xref href="#" outputclass="btn-primary">Go Somewhere</xref>
+        <xref href="#" outputclass="btn-solid theme-primary">Go Somewhere</xref>
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
@@ -62,7 +62,7 @@
   &lt;title outputclass="h5"&gt;Card Title&lt;/title&gt;
   &lt;image outputclass="card-img-top" href="..." /&gt;
   &lt;p&gt;Some quick example text to build on the card title and make up the bulk of the card’s content.&lt;/p&gt;
-  &lt;xref outputclass="btn-primary" href="#"&gt;Go Somewhere&lt;/xref&gt;
+  &lt;xref outputclass="btn-solid theme-primary" href="#"&gt;Go Somewhere&lt;/xref&gt;
 &lt;/section&gt;</codeblock>
         </section>
          <section>
@@ -155,7 +155,7 @@
         <title>Special title treatment</title>
         <div outputclass="card-header">Featured</div>
         <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>
         <div outputclass="card-footer">2 days ago</div>
       </section>
     </bodydiv>
@@ -166,7 +166,7 @@
   &lt;div outputclass="card-header"&gt;Featured&lt;/div&gt;
   &lt;title outputclass="h5"&gt;Special title treatment&lt;/title&gt;
   &lt;p&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
-  &lt;xref href="#" outputclass="btn-primary"&gt;Go somewhere&lt;/xref&gt;
+  &lt;xref href="#" outputclass="btn-solid theme-primary"&gt;Go somewhere&lt;/xref&gt;
 &lt;/section&gt;</codeblock>
         </section>
          <section>
@@ -190,7 +190,7 @@
         <title>Card Title</title>
         <div outputclass="card-header">Success Card</div>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
-        <xref href="#" outputclass="btn-primary">Go Somewhere</xref>
+        <xref href="#" outputclass="btn-solid theme-primary">Go Somewhere</xref>
       </section>
     </bodydiv>
     <codeblock>&lt;card color="success"&gt;
diff --git a/sample/collapse.dita b/sample/collapse.dita
index 529edaf2..c12ea7c1 100644
--- a/sample/collapse.dita
+++ b/sample/collapse.dita
@@ -33,7 +33,7 @@
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
       <p>
-        <xref props="collapse-toggle" href="#collapse1" outputclass="btn-primary">Toggle Collapse</xref>
+        <xref props="collapse-toggle" href="#collapse1" outputclass="btn-solid theme-primary">Toggle Collapse</xref>
       </p>
       <bodydiv id="collapse1" outputclass="collapse">
         <section outputclass="card-body card">
@@ -46,7 +46,7 @@
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;p&gt;
-  &lt;xref outputclass="btn-primary" props="collapse-toggle" href="#collapse1"&gt;
+  &lt;xref outputclass="btn-solid theme-primary" props="collapse-toggle" href="#collapse1"&gt;
     Toggle Collapse
   &lt;/xref&gt;
 &lt;/p&gt;
@@ -78,7 +78,11 @@
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
       <p>
-        <xref props="collapse-toggle" href="#collapse2" outputclass="btn-primary">Toggle Width Collapse</xref>
+        <xref
+          props="collapse-toggle"
+          href="#collapse2"
+          outputclass="btn-solid theme-primary"
+        >Toggle Width Collapse</xref>
       </p>
       <bodydiv outputclass="collapse-horizontal collapse" id="collapse2" otherprops="style(min-height: 120px;)">
       <bodydiv outputclass="card card-body" otherprops="style(width: 300px;)">
@@ -91,7 +95,7 @@
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;p&gt;
-  &lt;xref outputclass="btn-primary" props="collapse-toggle" href="#collapse2"&gt;Toggle Width Collapse&lt;/xref&gt;
+  &lt;xref outputclass="btn-solid theme-primary" props="collapse-toggle" href="#collapse2"&gt;Toggle Width Collapse&lt;/xref&gt;
 &lt;/p&gt;
 &lt;bodydiv outputclass="collapse-horizontal" id="collapse2" otherprops="style(min-height: 120px;)"&gt;
   &lt;div outputclass="card card-body" otherprops="style(width: 300px;)"&gt;
diff --git a/sample/drawer.dita b/sample/drawer.dita
index ccd9b587..e88a3590 100644
--- a/sample/drawer.dita
+++ b/sample/drawer.dita
@@ -49,7 +49,11 @@
         an drawer</p>
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-            <xref props="drawer-toggle" href="#drawer1" outputclass="btn-primary">Click here to display drawer</xref>
+            <xref
+        props="drawer-toggle"
+        href="#drawer1"
+        outputclass="btn-solid theme-primary"
+      >Click here to display drawer</xref>
       <section id="drawer1" outputclass="drawer drawer-start">
         <title>Drawer</title>
         <p>Content for the drawer goes here. You can place just about any section elements here.</p>
@@ -58,7 +62,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref outputclass="btn-primary" props="drawer-toggle" href="#drawer1"&gt;
+          <codeblock>&lt;xref outputclass="btn-solid theme-primary" props="drawer-toggle" href="#drawer1"&gt;
   Click here
 &lt;/xref&gt;
 &lt;section outputclass="drawer-start" id="drawer1"&gt;
@@ -101,7 +105,7 @@
       </ul>
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-            <xref props="drawer-toggle" href="#drawer2" outputclass="btn-primary">Toggle right drawer</xref>
+            <xref props="drawer-toggle" href="#drawer2" outputclass="btn-solid theme-primary">Toggle right drawer</xref>
       <section id="drawer2" outputclass="drawer drawer-end">
         <title>Drawer</title>
         <p>Content for the drawer goes here. You can place just about any section elements here.</p>
@@ -122,7 +126,11 @@
         </section>
       </bodydiv>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-            <xref props="drawer-toggle" href="#drawer3" outputclass="btn-primary">Toggle bottom drawer</xref>
+            <xref
+        props="drawer-toggle"
+        href="#drawer3"
+        outputclass="btn-solid theme-primary"
+      >Toggle bottom drawer</xref>
       <section id="drawer3" outputclass="drawer drawer-bottom">
         <title>Drawer</title>
         <p>Content for the drawer goes here. You can place just about any section elements here.</p>
@@ -151,7 +159,11 @@
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
       <note outputclass="d-none lg:d-block">Resize your browser to show the responsive drawer toggle.</note>
-            <xref outputclass="lg:d-none btn-primary" props="drawer-toggle" href="#drawer4">Toggle drawer</xref>
+            <xref
+        outputclass="lg:d-none btn-solid theme-primary"
+        props="drawer-toggle"
+        href="#drawer4"
+      >Toggle drawer</xref>
       <section outputclass="drawer-lg drawer drawer-start" id="drawer4">
         <title>Drawer</title>
         <p>This is content within an <xmlatt>outputclass="drawer-lg"</xmlatt>.</p>
@@ -172,7 +184,7 @@
           <codeblock>&lt;note outputclass="d-none lg:d-block"&gt;
   Resize your browser to show the responsive drawer toggle.
 &lt;/note&gt;
-&lt;xref outputclass="btn-primary lg:d-none" props="drawer-toggle" href="#drawer4"&gt;
+&lt;xref outputclass="btn-solid theme-primary lg:d-none" props="drawer-toggle" href="#drawer4"&gt;
   Toggle drawer
 &lt;/xref&gt;
 &lt;section outputclass="drawer-lg" id="drawer4"&gt;
diff --git a/sample/popovers.dita b/sample/popovers.dita
index 1713b9d4..46cfd581 100644
--- a/sample/popovers.dita
+++ b/sample/popovers.dita
@@ -52,14 +52,14 @@
     </section>
 
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <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 </xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock> &lt;xref href="#" outputclass="btn-lg btn-danger popover-top"&gt;
+          <codeblock> &lt;xref href="#" outputclass="btn-lg btn-solid theme-danger popover-top"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
   &lt;desc&gt;And here’s some amazing content. It’s very engaging. Right?&lt;/desc&gt;
   Click to toggle popover
@@ -67,7 +67,7 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock> &lt;popover outputclass="btn-lg btn-danger"&gt;
+          <codeblock> &lt;popover outputclass="btn-lg btn-solid theme-danger"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
   &lt;desc&gt;And here’s some amazing content. It’s very engaging. Right?&lt;/desc&gt;
   Click to toggle popover
@@ -84,50 +84,50 @@
         popover is appended to the <xmlatt>output-class</xmlatt> or taken from the attribute.</p>
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <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>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-secondary popover-top"&gt;
+          <codeblock>&lt;xref href="#" outputclass="btn-solid theme-secondary popover-top"&gt;
   &lt;desc&gt;Top popover&lt;/desc&gt;
   Popover on top
 &lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary popover-right"&gt;
+&lt;xref href="#" outputclass="btn-solid theme-secondary popover-right"&gt;
   &lt;desc&gt;Right Popover&lt;/desc&gt;
   Popover on right
 &lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary popover-bottom"&gt;
+&lt;xref href="#" outputclass="btn-solid theme-secondary popover-bottom"&gt;
   &lt;desc&gt;Bottom popover&lt;/desc&gt;
   Popover on bottom
 &lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary popover-left"&gt;
+&lt;xref href="#" outputclass="btn-solid theme-secondary popover-left"&gt;
   &lt;desc&gt;Left popover&lt;/desc&gt;
   Popover on left
 &lt;/xref&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;popover outputclass="btn-secondary" position="top"&gt;
+          <codeblock>&lt;popover outputclass="btn-solid theme-secondary" position="top"&gt;
   &lt;desc&gt;Top popover&lt;/desc&gt;
   Popover on top
 &lt;/popover&gt;
-&lt;popover outputclass="btn-secondary" position="right"&gt;
+&lt;popover outputclass="btn-solid theme-secondary" position="right"&gt;
   &lt;desc&gt;Right Popover&lt;/desc&gt;
   Popover on right
 &lt;/popover&gt;
-&lt;popover outputclass="btn-secondary" position="bottom"&gt;
+&lt;popover outputclass="btn-solid theme-secondary" position="bottom"&gt;
   &lt;desc&gt;Bottom popover&lt;/desc&gt;
   Popover on bottom
 &lt;/popover&gt;
-&lt;popover outputclass="btn-secondary" position="left"&gt;
+&lt;popover outputclass="btn-solid theme-secondary" position="left"&gt;
   &lt;desc&gt;Left popover&lt;/desc&gt;
   Popover on left
 &lt;/popover&gt;</codeblock>
@@ -149,7 +149,7 @@
 }</codeblock>
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-        <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>Custom popover</xref>
@@ -157,7 +157,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-lg btn-danger popover-top"&gt;
+          <codeblock>&lt;xref href="#" outputclass="btn-lg btn-solid theme-danger popover-top"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
   &lt;data name="class"&gt;custom-popover&lt;/data&gt;
   &lt;desc&gt;And here’s some amazing content. It’s very engaging. Right?&lt;/desc&gt;
@@ -166,7 +166,7 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;popover outputclass="btn-lg btn-danger"&gt;
+          <codeblock>&lt;popover outputclass="btn-lg btn-solid theme-danger"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
   &lt;data name="class"&gt;custom-popover&lt;/data&gt;
   &lt;desc&gt;And here’s some amazing content. It’s very engaging. Right?&lt;/desc&gt;
diff --git a/sample/rtl.dita b/sample/rtl.dita
index 11622c1b..c0c9f914 100644
--- a/sample/rtl.dita
+++ b/sample/rtl.dita
@@ -50,7 +50,7 @@
             <title>عنوان البطاقة</title>
             <image scope="external" href="https://picsum.photos/400/200?a"/>
             <p>بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
-            <xref href="#" outputclass="btn-primary">اذهب لمكان ما</xref>
+            <xref href="#" outputclass="btn-solid theme-primary">اذهب لمكان ما</xref>
           </section>
         </bodydiv>
       </bodydiv>
@@ -64,7 +64,7 @@
       &lt;title outputclass="h5"&gt;عنوان البطاقة&lt;/title&gt;
       &lt;image outputclass="card-img-top" href="..." /&gt;
       &lt;p&gt;بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.&lt;/p&gt;
-      &lt;xref href="#" outputclass="btn-primary"&gt;اذهب لمكان ما&lt;/xref&gt;
+      &lt;xref href="#" outputclass="btn theme-primary"&gt;اذهب لمكان ما&lt;/xref&gt;
     &lt;/section&gt;
   &lt;/bodydiv&gt;
 &lt;/bodydiv&gt;</codeblock>
@@ -77,7 +77,7 @@
       &lt;title&gt;عنوان البطاقة&lt;/title&gt;
       &lt;image href="..." /&gt;
       &lt;p&gt;بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.&lt;/p&gt;
-      &lt;button href="#"&gt;اذهب لمكان ما&lt;/button&gt;
+      &lt;button href="#"  color="primary"&gt;اذهب لمكان ما&lt;/button&gt;
     &lt;/card&gt;
   &lt;/grid-col&gt;
 &lt;/grid-row&gt;</codeblock>
diff --git a/sample/tooltips.dita b/sample/tooltips.dita
index 64bd0c79..17614946 100644
--- a/sample/tooltips.dita
+++ b/sample/tooltips.dita
@@ -60,6 +60,30 @@
         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>
     </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;p&gt;Placeholder text to demonstrate some
+  &lt;xref href="#" outputclass="tooltip-top"&gt; inline links &lt;desc&gt;Default tooltip&lt;/desc&gt;&lt;/xref&gt; with tooltips. This is
+  now just filler, no killer. Content placed here just to mimic the presence of
+  &lt;xref href="#" outputclass="tooltip-top"&gt; real text&lt;desc&gt;Another tooltip&lt;/desc&gt;&lt;/xref&gt;. 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
+  &lt;xref href="#" outputclass="tooltip-top"&gt; these tooltips on links&lt;desc&gt;Another one here too&lt;/desc&gt;&lt;/xref&gt; can
+  work in practice, once you use them on
+  &lt;xref href="#" outputclass="tooltip-top"&gt; your own&lt;desc&gt;The last tip!&lt;/desc&gt;&lt;/xref&gt; site or project.&lt;/p&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;p&gt;Placeholder text to demonstrate some
+  &lt;tooltip&gt; inline links &lt;desc&gt;Default tooltip&lt;/desc&gt;&lt;/tooltip&gt; with tooltips. This is
+  now just filler, no killer. Content placed here just to mimic the presence of
+  &lt;tooltip&gt; real text&lt;desc&gt;Another tooltip&lt;/desc&gt;&lt;/tooltip&gt;. 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
+  &lt;tooltip&gt; these tooltips on links&lt;desc&gt;Another one here too&lt;/desc&gt;&lt;/tooltip&gt; can
+  work in practice, once you use them on
+  &lt;tooltip&gt; your own&lt;desc&gt;The last tip!&lt;/desc&gt;&lt;/tooltip&gt; site or project.&lt;/p&gt;</codeblock>
+      </section>
+    </bodydiv>
 
     <p>To enable tooltips, add <xmlatt>output-class="tooltip-*"</xmlatt> to the enclosing
       <xmlelement>xref</xmlelement>. For the <xmlelement>tooltip</xmlelement> element use the <xmlatt
@@ -68,50 +92,50 @@
     <p>Hover over the buttons below to see the four tooltips directions: <codeph>top</codeph>, <codeph>right</codeph>,
         <codeph>bottom</codeph>, and <codeph>left</codeph>. Directions are mirrored when using Bootstrap in RTL.</p>
     <example>
-      <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>
     </example>
     <bodydiv outputclass="nav-pills mt-3">
     <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;xref href="#" outputclass="btn-secondary tooltip-top"&gt;
+        <codeblock>&lt;xref href="#" outputclass="btn-solid theme-secondary tooltip-top"&gt;
   &lt;desc&gt;Tooltip on top&lt;/desc&gt;
   Tooltip on top
 &lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary tooltip-right"&gt;
+&lt;xref href="#" outputclass="btn-solid theme-secondary tooltip-right"&gt;
   &lt;desc&gt;Tooltip on right&lt;/desc&gt;
   Tooltip on right
 &lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary tooltip-bottom"&gt;
+&lt;xref href="#" outputclass="btn-solid theme-secondary tooltip-bottom"&gt;
   &lt;desc&gt;Tooltip on bottom&lt;/desc&gt;
   Tooltip on bottom
 &lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary tooltip-left"&gt;
+&lt;xref href="#" outputclass="btn-solid theme-secondary tooltip-left"&gt;
   &lt;desc&gt;Tooltip on left&lt;/desc&gt;
   Tooltip on left
 &lt;/xref&gt;</codeblock>
     </section>
     <section>
       <title>Specialization</title>
-        <codeblock>&lt;tooltip outputclass="btn-secondary" position="top"&gt;
+        <codeblock>&lt;tooltip outputclass="btn-solid theme-secondary" position="top"&gt;
   &lt;desc&gt;Tooltip on top&lt;/desc&gt;
   Tooltip on top
 &lt;/tooltip&gt;
-&lt;tooltip outputclass="btn-secondary" position="right"&gt;
+&lt;tooltip outputclass="btn-solid theme-secondary" position="right"&gt;
   &lt;desc&gt;Tooltip on right&lt;/desc&gt;
   Tooltip on right
 &lt;/tooltip&gt;
-&lt;tooltip outputclass="btn-secondary" position="bottom"&gt;
+&lt;tooltip outputclass="btn-solid theme-secondary" position="bottom"&gt;
   &lt;desc&gt;Tooltip on bottom&lt;/desc&gt;
   Tooltip on bottom
 &lt;/tooltip&gt;
-&lt;tooltip outputclass="btn-secondary" position="left"&gt;
+&lt;tooltip outputclass="btn-solid theme-secondary" position="left"&gt;
   &lt;desc&gt;Tooltip on left&lt;/desc&gt;
   Tooltip on left
 &lt;/tooltip&gt;</codeblock>
@@ -120,7 +144,7 @@
   <p>Custom HTML can be added to tooltips using additional DITA elements within the <xmlelement>desc</xmlelement>
   </p>
   <example>
-    <xref href="#" outputclass="btn-secondary tooltip-top">
+    <xref href="#" outputclass="btn-solid theme-secondary tooltip-top">
       <desc><b>Tooltip</b>
         <u>with</u>
         <b>DITA</b> elements</desc> Tooltip with embedded DITA </xref>
@@ -128,14 +152,14 @@
   <bodydiv outputclass="nav-pills mt-3">
     <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;xref href="#" outputclass="btn-secondary tooltip-top"&gt;
+        <codeblock>&lt;xref href="#" outputclass="btn-solid theme-secondary tooltip-top"&gt;
 &lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
 Tooltip with embedded DITA
 &lt;/xref&gt;</codeblock>
       </section>
        <section>
       <title>Specialization</title>
-        <codeblock>&lt;tooltip outputclass="btn-secondary"&gt;
+        <codeblock>&lt;tooltip outputclass="btn-solid theme-secondary"&gt;
 &lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
 Tooltip with embedded DITA
 &lt;/tooltip&gt;</codeblock>
@@ -150,7 +174,7 @@ Tooltip with embedded DITA
   --bs-tooltip-bg: var(--bs-primary);
 }</codeblock>
     <example>
-      <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
@@ -159,7 +183,7 @@ Tooltip with embedded DITA
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-secondary tooltip-top"&gt;
+          <codeblock>&lt;xref href="#" outputclass="btn-solid theme-secondary tooltip-top"&gt;
   &lt;data name="class"&gt;custom-tooltip&lt;/data&gt;
   &lt;desc&gt;This top tooltip is themed via CSS variables.&lt;/desc&gt;
   Custom tooltip
@@ -167,7 +191,7 @@ Tooltip with embedded DITA
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;tooltip outputclass="btn-secondary"&gt;
+          <codeblock>&lt;tooltip outputclass="btn-solid theme-secondary"&gt;
   &lt;data name="class"&gt;custom-tooltip&lt;/data&gt;
   &lt;desc&gt;This top tooltip is themed via CSS variables.&lt;/desc&gt;
   Custom tooltip

From 3433cf6df65ac11cee88133924721a23df88fe14 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 11 Aug 2026 20:23:46 +0200
Subject: [PATCH 72/87] Use theme colors

---
 sample/popovers.dita    | 12 ++++++------
 sample/tooltips.dita    | 12 ++++++------
 xsl/utility-classes.xsl | 10 ++++++++++
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/sample/popovers.dita b/sample/popovers.dita
index 46cfd581..ab063956 100644
--- a/sample/popovers.dita
+++ b/sample/popovers.dita
@@ -67,7 +67,7 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock> &lt;popover outputclass="btn-lg btn-solid theme-danger"&gt;
+          <codeblock> &lt;popover outputclass="btn-lg btn-solid" color="danger"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
   &lt;desc&gt;And here’s some amazing content. It’s very engaging. Right?&lt;/desc&gt;
   Click to toggle popover
@@ -115,19 +115,19 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;popover outputclass="btn-solid theme-secondary" position="top"&gt;
+          <codeblock>&lt;popover outputclass="btn-solid" color="secondary" position="top"&gt;
   &lt;desc&gt;Top popover&lt;/desc&gt;
   Popover on top
 &lt;/popover&gt;
-&lt;popover outputclass="btn-solid theme-secondary" position="right"&gt;
+&lt;popover outputclass="btn-solid" color="secondary" position="right"&gt;
   &lt;desc&gt;Right Popover&lt;/desc&gt;
   Popover on right
 &lt;/popover&gt;
-&lt;popover outputclass="btn-solid theme-secondary" position="bottom"&gt;
+&lt;popover outputclass="btn-solid" color="secondary" position="bottom"&gt;
   &lt;desc&gt;Bottom popover&lt;/desc&gt;
   Popover on bottom
 &lt;/popover&gt;
-&lt;popover outputclass="btn-solid theme-secondary" position="left"&gt;
+&lt;popover outputclass="btn-solid" color="secondary" position="left"&gt;
   &lt;desc&gt;Left popover&lt;/desc&gt;
   Popover on left
 &lt;/popover&gt;</codeblock>
@@ -166,7 +166,7 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;popover outputclass="btn-lg btn-solid theme-danger"&gt;
+          <codeblock>&lt;popover outputclass="btn-lg btn-solid" color="danger"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
   &lt;data name="class"&gt;custom-popover&lt;/data&gt;
   &lt;desc&gt;And here’s some amazing content. It’s very engaging. Right?&lt;/desc&gt;
diff --git a/sample/tooltips.dita b/sample/tooltips.dita
index 17614946..ef36c338 100644
--- a/sample/tooltips.dita
+++ b/sample/tooltips.dita
@@ -123,19 +123,19 @@
     </section>
     <section>
       <title>Specialization</title>
-        <codeblock>&lt;tooltip outputclass="btn-solid theme-secondary" position="top"&gt;
+        <codeblock>&lt;tooltip outputclass="btn-solid" color="secondary" position="top"&gt;
   &lt;desc&gt;Tooltip on top&lt;/desc&gt;
   Tooltip on top
 &lt;/tooltip&gt;
-&lt;tooltip outputclass="btn-solid theme-secondary" position="right"&gt;
+&lt;tooltip outputclass="btn-solid" color="secondary" position="right"&gt;
   &lt;desc&gt;Tooltip on right&lt;/desc&gt;
   Tooltip on right
 &lt;/tooltip&gt;
-&lt;tooltip outputclass="btn-solid theme-secondary" position="bottom"&gt;
+&lt;tooltip outputclass="btn-solid" color="secondary" position="bottom"&gt;
   &lt;desc&gt;Tooltip on bottom&lt;/desc&gt;
   Tooltip on bottom
 &lt;/tooltip&gt;
-&lt;tooltip outputclass="btn-solid theme-secondary" position="left"&gt;
+&lt;tooltip outputclass="btn-solid" color="secondary" position="left"&gt;
   &lt;desc&gt;Tooltip on left&lt;/desc&gt;
   Tooltip on left
 &lt;/tooltip&gt;</codeblock>
@@ -159,7 +159,7 @@ Tooltip with embedded DITA
       </section>
        <section>
       <title>Specialization</title>
-        <codeblock>&lt;tooltip outputclass="btn-solid theme-secondary"&gt;
+        <codeblock>&lt;tooltip outputclass="btn-solid" color="secondary"&gt;
 &lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
 Tooltip with embedded DITA
 &lt;/tooltip&gt;</codeblock>
@@ -191,7 +191,7 @@ Tooltip with embedded DITA
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;tooltip outputclass="btn-solid theme-secondary"&gt;
+          <codeblock>&lt;tooltip outputclass="btn-solid" color="secondary"&gt;
   &lt;data name="class"&gt;custom-tooltip&lt;/data&gt;
   &lt;desc&gt;This top tooltip is themed via CSS variables.&lt;/desc&gt;
   Custom tooltip
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 766a3a67..858a79d9 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -394,6 +394,11 @@
 
   <!-- Change the default Bootstrap CSS classes of popovers -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/popover ')]" mode="bootstrap-class" priority="11">
+    <xsl:if test="@color">
+      <xsl:text>theme-</xsl:text>
+      <xsl:value-of select="@color"/>
+      <xsl:text> </xsl:text>
+    </xsl:if>
     <xsl:if test="@position">
       <xsl:text>popover-</xsl:text>
       <xsl:value-of select="@position"/>
@@ -404,6 +409,11 @@
 
   <!-- Change the default Bootstrap CSS classes of tooltips -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/tooltip ')]" mode="bootstrap-class" priority="11">
+    <xsl:if test="@color">
+      <xsl:text>theme-</xsl:text>
+      <xsl:value-of select="@color"/>
+      <xsl:text> </xsl:text>
+    </xsl:if>
     <xsl:if test="@position">
       <xsl:text>tooltip-</xsl:text>
       <xsl:value-of select="@position"/>

From 92eaf47e9ea0a54fa588213aec7c86740a1a2e7c Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 11 Aug 2026 20:45:56 +0200
Subject: [PATCH 73/87] Add popover and tooltip default css parameters

---
 README.md               |  34 +++++--
 insertParameters.xml    |  10 ++
 plugin.xml              |  10 ++
 sample/index.dita       | 217 +++++++++++++++++++++++++---------------
 xsl/utility-classes.xsl |  16 ++-
 5 files changed, 193 insertions(+), 94 deletions(-)

diff --git a/README.md b/README.md
index c97dbac8..d787d32e 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,9 @@ A plug-in for [DITA Open Toolkit][1] that extends the default HTML5 output with
   - [Custom CSS](#custom-css)
   - [Headers and footers](#headers-and-footers)
   - [Navigation menu](#navigation-menu)
-  - [Common Bootstrap utility classes](#common-bootstrap-utility-classes)
+  - [Accessibility utility classes](#accessibility-utility-classes)
+  - [Bootstrap component utility classes](#bootstrap-component-utility-classes)
+  - [DITA element utility classes](#dita-element-utility-classes)
   - [Bootstrap icons for DITA notes](#bootstrap-icons-for-dita-notes)
   - [Optional elements](#optional-elements)
 - [Feedback](#feedback)
@@ -158,12 +160,17 @@ dita --input=path/to/your.ditamap \
      --menubar-toc.include=yes
 ```
 
-### Common Bootstrap utility classes
+### Accessibility utility classes
 
-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:
+The HTML output for accessibility-related elements can be annotated with common Bootstrap utility classes for borders, background, text, spacing, etc. using additional command line parameters:
 
 - `bootstrap.css.accessibility.link` – Common Bootstrap utility classes for accessibility links
 - `bootstrap.css.accessibility.nav` – Common Bootstrap utility classes for accessibility navigation
+
+### Bootstrap component utility classes
+
+The HTML output for the following Bootstrap components can be annotated with common Bootstrap utility classes for borders, background, text, spacing, etc. using additional command line parameters:
+
 - `bootstrap.css.accordion` – Common utility classes for Bootstrap accordion components
 - `bootstrap.css.badge` – Common utility classes for Bootstrap badge components
 - `bootstrap.css.button` – Common utility classes for Bootstrap button components
@@ -171,8 +178,21 @@ The HTML output for the following DITA elements can be annotated with common Boo
 - `bootstrap.css.carousel` – Common utility classes for Bootstrap carousel components
 - `bootstrap.css.carousel.caption` – Common utility classes for Bootstrap carousel captions
 - `bootstrap.css.carousel.indicators` – Common utility classes for Bootstrap carousel indicators
-- `bootstrap.css.codeblock` – Common Bootstrap utility classes for DITA `<codeblock>` elements
 - `bootstrap.css.container.size` – Bootstrap container class for main layout and menubar-TOC. Options: `container`, `container-fluid`, `sm:container`, `md:container`, `lg:container`, `xl:container` (default)
+- `bootstrap.css.footer` – Common utility classes for the HTML `<footer>` element
+- `bootstrap.css.menubar.toc` – CSS class for the menu bar. Defaults to `sticky-top bg-body`
+- `bootstrap.css.nav.parent` – Common utility classes for ancestors of active nav-pill elements
+- `bootstrap.css.pagination` – Common utility classes for Bootstrap pagination components
+- `bootstrap.css.popover` – Common utility classes for Bootstrap popover components
+- `bootstrap.css.tabs` – Common utility classes for Bootstrap horizontal tab components
+- `bootstrap.css.tabs.vertical` – Common utility classes for Bootstrap vertical tabs
+- `bootstrap.css.tooltip` – Common utility classes for Bootstrap tooltip components
+
+### DITA element utility classes
+
+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.codeblock` – Common Bootstrap utility classes for DITA `<codeblock>` elements
 - `bootstrap.css.dd` – Common utility classes for DITA `<dd>` elements
 - `bootstrap.css.dl` – Common utility classes for DITA `<dl>` elements
 - `bootstrap.css.dt` – Common utility classes for DITA `<dt>` elements
@@ -180,15 +200,9 @@ The HTML output for the following DITA elements can be annotated with common Boo
 - `bootstrap.css.figure` – Common utility classes for DITA `<fig>` elements
 - `bootstrap.css.figure.caption` – Common utility classes for DITA figure titles
 - `bootstrap.css.figure.image` – Common utility classes for images within DITA`<fig>` elements
-- `bootstrap.css.footer` – Common utility classes for the HTML `<footer>` element
-- `bootstrap.css.menubar.toc` – CSS class for the menu bar. Defaults to `sticky-top bg-body`
-- `bootstrap.css.nav.parent` – Common utility classes for ancestors of active nav-pill elements
-- `bootstrap.css.pagination` – Common utility classes for Bootstrap pagination components
 - `bootstrap.css.section.title` – Common Bootstrap utility classes for DITA `<section>` titles
 - `bootstrap.css.shortdesc` – Common Bootstrap utility classes for DITA`<shortdesc>` elements
 - `bootstrap.css.table` – Common utility classes for DITA `<table>` elements
-- `bootstrap.css.tabs` – Common utility classes for Bootstrap horizontal tab components
-- `bootstrap.css.tabs.vertical` – Common utility classes for Bootstrap vertical tabs
 - `bootstrap.css.thead` – Common utility classes for DITA `<thead>` elements
 - `bootstrap.css.topic.title` – Common Bootstrap utility classes for DITA `<topic>` titles
 
diff --git a/insertParameters.xml b/insertParameters.xml
index b904a6eb..2c90d86c 100644
--- a/insertParameters.xml
+++ b/insertParameters.xml
@@ -169,6 +169,16 @@
     expression="${bootstrap.css.pagination}"
     if:set="bootstrap.css.pagination"
   />
+  <param
+    name="BOOTSTRAP_CSS_POPOVER"
+    expression="${bootstrap.css.popover}"
+    if:set="bootstrap.css.popover"
+  />
+  <param
+    name="BOOTSTRAP_CSS_TOOLTIP"
+    expression="${bootstrap.css.tooltip}"
+    if:set="bootstrap.css.tooltip"
+  />
   <param
     name="BOOTSTRAP_CSS_ACTIVE_NAV_PARENT"
     expression="${bootstrap.css.nav.parent}"
diff --git a/plugin.xml b/plugin.xml
index 473716c6..f6f3634f 100755
--- a/plugin.xml
+++ b/plugin.xml
@@ -262,6 +262,16 @@
       type="string"
       desc="Bootstrap classes for pagination components"
     />
+    <param
+      name="bootstrap.css.popover"
+      type="string"
+      desc="Bootstrap classes for popover components"
+    />
+    <param
+      name="bootstrap.css.tooltip"
+      type="string"
+      desc="Bootstrap classes for tooltip components"
+    />
     <param
       name="bootstrap.css.nav.parent"
       type="string"
diff --git a/sample/index.dita b/sample/index.dita
index 7f78ee07..f83e45d8 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -539,36 +539,11 @@
           scope="external"
         >dita-bootstrap.github.io</xref>. </note>
     </section>
-    <section id="common-bootstrap-utility-classes">
-      <title>Common Bootstrap utility classes</title>
-      <indexterm><parmname>--bootstrap.css.shortdesc</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.codeblock</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.topic.title</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.section.title</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.badge</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.button</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.card</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.carousel</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.carousel.caption</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.carousel.indicators</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.footer</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.menubar.toc</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.table</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.tabs</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.tabs.vertical</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.thead</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.accordion</parmname></indexterm>
+    <section id="accessibility-utility-classes">
+      <title>Accessibility utility classes</title>
       <indexterm><parmname>--bootstrap.css.accessibility.nav</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.accessibility.link</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.figure</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.figure.caption</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.figure.image</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.dl</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.dt</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.dd</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.nav.parent</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.example</parmname></indexterm>
-      <p>The HTML output for the following DITA elements can be annotated with common Bootstrap utility classes for
+      <p>The HTML output for accessibility-related elements can be annotated with common Bootstrap utility classes for
         <xref href="https://getbootstrap.com/docs/6.0/utilities/borders" format="html" scope="external">borders</xref>,
         <xref
           href="https://getbootstrap.com/docs/6.0/utilities/background"
@@ -595,6 +570,39 @@
             Common Bootstrap utility classes for accessibility navigation
           </pd>
         </plentry>
+      </parml>
+    </section>
+    <section id="bootstrap-component-utility-classes">
+      <title>Bootstrap component utility classes</title>
+      <indexterm><parmname>--bootstrap.css.badge</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.button</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.card</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.carousel</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.carousel.caption</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.carousel.indicators</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.container.size</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.footer</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.menubar.toc</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.nav.parent</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.pagination</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.popover</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.tabs</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.tabs.vertical</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.thead</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.tooltip</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.accordion</parmname></indexterm>
+      <p
+      >The HTML output for the following Bootstrap components can be annotated with common Bootstrap utility classes for
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/borders" format="html" scope="external">borders</xref>,
+        <xref
+          href="https://getbootstrap.com/docs/6.0/utilities/background"
+          format="html"
+          scope="external"
+        >background</xref>,
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/text" format="html" scope="external">text</xref>,
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/spacing" format="html" scope="external">spacing</xref>,
+        etc. using additional command line parameters:</p>
+      <parml otherprops="cols(4)">
         <plentry>
           <pt>
             <parmname>--bootstrap.css&#8203;.accordion</parmname>
@@ -658,15 +666,6 @@
             <xref href="./carousel.dita" format="dita">carousel indicators</xref>
           </pd>
         </plentry>
-        <plentry>
-          <pt>
-            <parmname>--bootstrap.css&#8203;.codeblock</parmname>
-          </pt>
-          <pd>
-            Common Bootstrap utility classes for DITA
-            <xmlelement>codeblock</xmlelement> elements
-          </pd>
-        </plentry>
         <plentry>
           <pt>
             <parmname>--bootstrap.css&#8203;.container&#8203;.size</parmname>
@@ -681,141 +680,195 @@
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.dd</parmname>
+            <parmname>--bootstrap.css&#8203;.footer</parmname>
           </pt>
-          <pd>Common Bootstrap utility classes for DITA
-            <xmlelement>dd</xmlelement> definition description elements
+          <pd>
+            Common utility classes for the HTML
+            <xmlelement>footer</xmlelement> element
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.dl</parmname>
+            <parmname>--bootstrap.css&#8203;.menubar&#8203;.toc</parmname>
           </pt>
-          <pd>Common Bootstrap utility classes for DITA
-            <xmlelement>dl</xmlelement> definition list elements
+          <pd>
+            CSS class for the <xref href="./nav.dita" format="dita">menu bar</xref>. Defaults to
+            <option>sticky-top bg-body</option>
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.dt</parmname>
+            <parmname>--bootstrap.css&#8203;.nav&#8203;.parent</parmname>
           </pt>
-          <pd>Common Bootstrap utility classes for DITA
-            <xmlelement>dt</xmlelement> definition term elements
+          <pd>
+            Common Bootstrap utility classes for ancestors of active nav-pill elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.example</parmname>
+            <parmname>--bootstrap.css&#8203;.pagination</parmname>
           </pt>
           <pd>
-            Common Bootstrap utility classes for DITA
-            <xmlelement>example</xmlelement> elements
+            Common utility classes for Bootstrap
+            <xref href="./pagination.dita" format="dita">pagination components</xref>
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.figure</parmname>
+            <parmname>--bootstrap.css&#8203;.popover</parmname>
           </pt>
-          <pd>Common Bootstrap utility classes for DITA
-            <xmlelement>fig</xmlelement> elements
+          <pd>
+            Common utility classes for Bootstrap
+            <xref href="./popovers.dita" format="dita">popover components</xref>
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.figure&#8203;.caption</parmname>
+            <parmname>--bootstrap.css&#8203;.tabs</parmname>
           </pt>
           <pd>
-            Common Bootstrap utility classes for DITA
-            <xmlelement>title</xmlelement> elements within <xmlelement>fig</xmlelement> elements
+            Common utility classes for Bootstrap
+            <xref href="./tabs.dita" format="dita">tabbed dialog components</xref>
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.figure&#8203;.image</parmname>
+            <parmname>--bootstrap.css&#8203;.tabs&#8203;.vertical</parmname>
           </pt>
           <pd>
-            Common Bootstrap utility classes for DITA
-            <xmlelement>image</xmlelement> elements within <xmlelement>fig</xmlelement> elements
+            Common utility classes for Bootstrap
+            <xref href="./tabs.dita" format="dita">vertical tabbed dialog components</xref>
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.footer</parmname>
+            <parmname>--bootstrap.css&#8203;.tooltip</parmname>
           </pt>
           <pd>
-            Common utility classes for the HTML
-            <xmlelement>footer</xmlelement> element
+            Common utility classes for Bootstrap
+            <xref href="./tooltips.dita" format="dita">tooltip components</xref>
           </pd>
         </plentry>
+      </parml>
+    </section>
+    <section id="dita-element-utility-classes">
+      <title>DITA element utility classes</title>
+      <indexterm><parmname>--bootstrap.css.shortdesc</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.codeblock</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.topic.title</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.section.title</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.table</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.figure</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.figure.caption</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.figure.image</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.dl</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.dt</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.dd</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.example</parmname></indexterm>
+      <p>The HTML output for the following DITA elements can be annotated with common Bootstrap utility classes for
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/borders" format="html" scope="external">borders</xref>,
+        <xref
+          href="https://getbootstrap.com/docs/6.0/utilities/background"
+          format="html"
+          scope="external"
+        >background</xref>,
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/text" format="html" scope="external">text</xref>,
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/spacing" format="html" scope="external">spacing</xref>,
+        etc. using additional command line parameters:</p>
+      <parml otherprops="cols(4)">
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.menubar&#8203;.toc</parmname>
+            <parmname>--bootstrap.css&#8203;.codeblock</parmname>
           </pt>
           <pd>
-            CSS class for the <xref href="./nav.dita" format="dita">menu bar</xref>. Defaults to
-            <option>sticky-top bg-body</option>
+            Common Bootstrap utility classes for DITA
+            <xmlelement>codeblock</xmlelement> elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.nav&#8203;.parent</parmname>
+            <parmname>--bootstrap.css&#8203;.dd</parmname>
           </pt>
-          <pd>
-            Common Bootstrap utility classes for ancestors of active nav-pill elements
+          <pd>Common Bootstrap utility classes for DITA
+            <xmlelement>dd</xmlelement> definition description elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.pagination</parmname>
+            <parmname>--bootstrap.css&#8203;.dl</parmname>
+          </pt>
+          <pd>Common Bootstrap utility classes for DITA
+            <xmlelement>dl</xmlelement> definition list elements
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.css&#8203;.dt</parmname>
+          </pt>
+          <pd>Common Bootstrap utility classes for DITA
+            <xmlelement>dt</xmlelement> definition term elements
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.css&#8203;.example</parmname>
           </pt>
           <pd>
-            Common utility classes for Bootstrap
-            <xref href="./pagination.dita" format="dita">pagination components</xref>
+            Common Bootstrap utility classes for DITA
+            <xmlelement>example</xmlelement> elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.section&#8203;.title</parmname>
+            <parmname>--bootstrap.css&#8203;.figure</parmname>
+          </pt>
+          <pd>Common Bootstrap utility classes for DITA
+            <xmlelement>fig</xmlelement> elements
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.css&#8203;.figure&#8203;.caption</parmname>
           </pt>
           <pd>
             Common Bootstrap utility classes for DITA
-            <xmlelement>title</xmlelement> elements within <xmlelement>section</xmlelement> elements
+            <xmlelement>title</xmlelement> elements within <xmlelement>fig</xmlelement> elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.shortdesc</parmname>
+            <parmname>--bootstrap.css&#8203;.figure&#8203;.image</parmname>
           </pt>
           <pd>
             Common Bootstrap utility classes for DITA
-            <xmlelement>shortdesc</xmlelement> elements
+            <xmlelement>image</xmlelement> elements within <xmlelement>fig</xmlelement> elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.table</parmname>
+            <parmname>--bootstrap.css&#8203;.section&#8203;.title</parmname>
           </pt>
           <pd>
             Common Bootstrap utility classes for DITA
-            <xmlelement>table</xmlelement> elements
+            <xmlelement>title</xmlelement> elements within <xmlelement>section</xmlelement> elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.tabs</parmname>
+            <parmname>--bootstrap.css&#8203;.shortdesc</parmname>
           </pt>
           <pd>
-            Common utility classes for Bootstrap
-            <xref href="./tabs.dita" format="dita">tabbed dialog components</xref>
+            Common Bootstrap utility classes for DITA
+            <xmlelement>shortdesc</xmlelement> elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.tabs&#8203;.vertical</parmname>
+            <parmname>--bootstrap.css&#8203;.table</parmname>
           </pt>
           <pd>
-            Common utility classes for Bootstrap
-            <xref href="./tabs.dita" format="dita">vertical tabbed dialog components</xref>
+            Common Bootstrap utility classes for DITA
+            <xmlelement>table</xmlelement> elements
           </pd>
         </plentry>
         <plentry>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 858a79d9..33ef3118 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -34,6 +34,8 @@
   <xsl:param name="BOOTSTRAP_CSS_DT" select="'text-truncate '"/>
   <xsl:param name="BOOTSTRAP_CSS_DD" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_PAGINATION" select="''"/>
+  <xsl:param name="BOOTSTRAP_CSS_POPOVER" select="''"/>
+  <xsl:param name="BOOTSTRAP_CSS_TOOLTIP" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_TABLE" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_TABLE_HEAD" select="''"/>
 
@@ -393,7 +395,11 @@
   </xsl:template>
 
   <!-- Change the default Bootstrap CSS classes of popovers -->
-  <xsl:template match="*[contains(@class, ' bootstrap-d/popover ')]" mode="bootstrap-class" priority="11">
+  <xsl:template
+    match="*[contains(@class, ' bootstrap-d/popover ')] | *[contains(@class, ' topic/xref ') and contains(@outputclass, 'popover-')]"
+    mode="bootstrap-class"
+    priority="11"
+  >
     <xsl:if test="@color">
       <xsl:text>theme-</xsl:text>
       <xsl:value-of select="@color"/>
@@ -404,11 +410,16 @@
       <xsl:value-of select="@position"/>
       <xsl:text> </xsl:text>
     </xsl:if>
+    <xsl:value-of select="concat(' ', $BOOTSTRAP_CSS_POPOVER, ' ')"/>
     <xsl:next-match/>
   </xsl:template>
 
   <!-- Change the default Bootstrap CSS classes of tooltips -->
-  <xsl:template match="*[contains(@class, ' bootstrap-d/tooltip ')]" mode="bootstrap-class" priority="11">
+  <xsl:template
+    match="*[contains(@class, ' bootstrap-d/tooltip ')] | *[contains(@class, ' topic/xref ') and contains(@outputclass, 'tooltip-')]"
+    mode="bootstrap-class"
+    priority="11"
+  >
     <xsl:if test="@color">
       <xsl:text>theme-</xsl:text>
       <xsl:value-of select="@color"/>
@@ -419,6 +430,7 @@
       <xsl:value-of select="@position"/>
       <xsl:text> </xsl:text>
     </xsl:if>
+    <xsl:value-of select="concat(' ', $BOOTSTRAP_CSS_TOOLTIP, ' ')"/>
     <xsl:next-match/>
   </xsl:template>
 

From c9c6188def745dde2c481518decb8c740aef96ca Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 11 Aug 2026 21:19:49 +0200
Subject: [PATCH 74/87] Update theme

---
 .github/dita-ot/theme.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/dita-ot/theme.css b/.github/dita-ot/theme.css
index 292341b0..458e891f 100644
--- a/.github/dita-ot/theme.css
+++ b/.github/dita-ot/theme.css
@@ -26,7 +26,7 @@
 }
 
 .navbar {
-  --bs-navbar-brand-hover-color: var(--bs-primary-contrast);
+  --bs-navbar-brand-hover-color: color-mix(in srgb, currentcolor 85%, var(--bs-white));
   --bs-navbar-bg: var(--bs-primary-bg);
   --bs-navbar-color: var(--bs-primary-contrast);
   --bs-navbar-brand-color: var(--bs-primary-contrast);
@@ -35,7 +35,7 @@
 }
 
 .nav-link {
-  --bs-nav-link-hover-color: var(--bs-primary-contrast);
+  --bs-nav-link-hover-color: color-mix(in srgb, currentcolor 85%, var(--bs-white));
 }
 
 .navbar-toggler {

From df38dc7cde0c65efa606124906ddfaa6a369428b Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Tue, 11 Aug 2026 22:22:20 +0200
Subject: [PATCH 75/87] Add cols

---
 sample/index.dita | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sample/index.dita b/sample/index.dita
index f83e45d8..9e776404 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -72,7 +72,7 @@
      <parmname>--args.hdr</parmname>=<filepath>path/to/your-header.xml</filepath> \
      <parmname>--bootstrap.theme</parmname>=<option>&lt;theme-name&gt;</option></codeblock>
 
-      <ol outputclass="carousel pt-2" deliveryTarget="html" otherprops="indicators(true)">
+      <ol outputclass="carousel pt-2" deliveryTarget="html" otherprops="indicators(true) cols(1)">
         <li>
           <div outputclass="row">
             <div outputclass="col-4">

From 03bbb2e6968781ff710c5e25f2551201ebfc09ff Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Wed, 12 Aug 2026 06:55:44 +0200
Subject: [PATCH 76/87] Update favicon

---
 .github/dita-ot/favicon.svg | 50 ++++++++++++++++++++++++++-----------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/.github/dita-ot/favicon.svg b/.github/dita-ot/favicon.svg
index 1b58a0ef..6272e371 100644
--- a/.github/dita-ot/favicon.svg
+++ b/.github/dita-ot/favicon.svg
@@ -1,16 +1,36 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="16"
-  height="16"
-  fill="#0d6efd"
-  class="bi bi-bootstrap"
-  viewBox="0 0 16 16"
-  style="background-color:#ffffff;"
->
-  <path
-    d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
-  />
-  <path
-    d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
-  />
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+    <style>
+    path.icon {
+      fill: #1d365d;
+    }
+    rect.badge-bg {
+      fill: oklch(56% 0.26 288); /* --bs-indigo-500 */
+    }
+    @media (prefers-color-scheme: dark) {
+      path.icon {
+        fill: #6a91cf;
+      }
+    }
+    </style>
+    <path class="icon" d="M4.458.007A4.462 4.462 0 0 0-.014 4.48v23.057a4.462 4.462 0 0 0 4.472 4.471h23.057a4.462 4.462 0 0 0 4.471-4.471V18.45H29.505l-6.217 5.063v.001l-.008.011c-.02.017-.041.031-.063.049-.413.337-1.119.645-2.063-.26-.05-.049-.156-.14-.156-.14l-2.477-2.025a7.586 7.586 0 0 0 2.568.217 5.555 5.555 0 0 0 1.71-.443l.72-.36c1.719-.98 3.14-2.667 4.016-4.1 1.263-2.068 1.437-4.712 1.393-5.48-.043-.77-.392-3.702-.392-4.327s.13-1.01.13-1.01l2.222-.865-1.699-1.635s-.086-.865-.391-1.49C28.493 1.031 27.49.358 25.836.214a3.584 3.584 0 0 0-.31-.014c-1.913-.04-3.24.644-3.726 1.38-.701 1.058-1.581 4.403-1.973 5.7-.021.07-.048.142-.079.216.177.149.358.315.504.45 1.733 1.376.92 4.736-.168 6.73-.954 1.75-2.197 3.414-3.388 4.981l-.01-.008c-.18.252-.38.52-.59.797l-.068.09a64.19 64.19 0 0 1-.71.912l5.237 4.29c.194.14.386.252.573.341v3.595H7.388V14.953l4.553 3.73c.218-.988.36-1.564.597-2.424l-5.164-4.22 11.898-9.69V.007H4.458zm21.76 2.113c.226-.009.44.071.487.387.091.612-.092.874-.595.977-.504.103-1.1-.051-1.1-.411s.432-.743.825-.875c.11-.036.249-.073.384-.078zm-21.461.22h10.962l-.07.048-9.495 7.636c-.66.524-1.03 1.193-1.03 1.973 0 .033.002.065.003.097h-.002v17.58h-.368a2.432 2.432 0 0 1-2.437-2.437V4.778a2.432 2.432 0 0 1 2.437-2.437zm23.638.644 1.59 1.553-2.58.992s-.036-.475-.106-.863c-.071-.388-.248-.56-.248-.56s.212-.475.46-.734c.247-.259.884-.388.884-.388zM18.807 8.3c-.49-.015-1.062.458-1.36.817-.77.932-.922 1.202-1.332 1.838-.428.664-.839 1.344-1.172 2.06-.6 1.289-1.073 2.638-1.479 4.001-.239.805-.473 1.686-.693 2.713-.456 2.118-.65 3.074-.687 3.585-.015.205.06.112.13.045.966-.95 1.78-2.023 2.248-2.612.501-.63.925-1.189 1.368-1.798 1.832-2.52 2.22-2.846 3.28-4.8 1.18-2.174 1.426-4.87.02-5.753a.633.633 0 0 0-.323-.096zm10.846 12.968v5.969a2.432 2.432 0 0 1-2.437 2.437h-3.568V26.13c.13-.066.272-.156.406-.28l.026-.016 5.573-4.565z">
+
+    </path>
+    <!-- Bootstrap "B" badge, top-left -->
+    <rect class="badge-bg" x="0" y="0" width="14" height="14" rx="4"/>
+    <g transform="translate(1,1) scale(0.75)">
+      <path fill="#fff" d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377z"/>
+    </g>
+    <!-- "6" badge, bottom-left -->
+    <circle cx="6" cy="26" r="6" fill="#0d6efd" stroke="#fff" stroke-width="1"/>
+    <text
+      x="6"
+      y="26"
+      text-anchor="middle"
+      dominant-baseline="central"
+      font-family="Helvetica, Arial, sans-serif"
+      font-size="8"
+      font-weight="bold"
+      fill="#fff"
+    >6</text>
 </svg>

From a44286100a0a7f5011ea5cd6b4063de4aff756d1 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Wed, 12 Aug 2026 15:40:53 +0200
Subject: [PATCH 77/87] Add theme parameters

---
 .github/dita-ot/html.xml    |   3 +-
 .github/dita-ot/theme.css   |  24 ---
 Customization/xsl/topic.xsl |  92 ++++++++++-
 README.md                   |  16 +-
 insertParameters.xml        |  42 ++++-
 plugin.xml                  | 320 +++++++++++++++++++++++++++++++++++-
 sample/carousel.dita        |  14 +-
 sample/index.dita           |  93 ++++++++---
 sample/search-box.dita      |   5 +-
 xsl/utility-classes.xsl     |   2 +-
 10 files changed, 528 insertions(+), 83 deletions(-)

diff --git a/.github/dita-ot/html.xml b/.github/dita-ot/html.xml
index d07ff52f..c66dfa52 100644
--- a/.github/dita-ot/html.xml
+++ b/.github/dita-ot/html.xml
@@ -28,7 +28,8 @@
       <param name="popovers.include" value="yes"/>
       <param name="dark.mode.include" value="yes"/>
       <param name="css.theme.switcher" value="yes"/>
-      <param name="bootstrap.css.search.card" value="theme-primary"/>
+      <param name="bootstrap.theme.search.card" value="primary-contrast"/>
+      <param name="bootstrap.theme.footer" value="primary-subtle-border"/>
       <param name="open-graph.url" value="https://dita-bootstrap.github.io"/>
       <param name="twitter.site" value="@infotexture"/>
     </publication>
diff --git a/.github/dita-ot/theme.css b/.github/dita-ot/theme.css
index 458e891f..861d65fa 100644
--- a/.github/dita-ot/theme.css
+++ b/.github/dita-ot/theme.css
@@ -25,30 +25,6 @@
   --bs-code-color: var(--bs-secondary-contrast);
 }
 
-.navbar {
-  --bs-navbar-brand-hover-color: color-mix(in srgb, currentcolor 85%, var(--bs-white));
-  --bs-navbar-bg: var(--bs-primary-bg);
-  --bs-navbar-color: var(--bs-primary-contrast);
-  --bs-navbar-brand-color: var(--bs-primary-contrast);
-  --bs-navbar-brand-font-size: 1.25rem;
-  --bs-navbar-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-}
-
-.nav-link {
-  --bs-nav-link-hover-color: color-mix(in srgb, currentcolor 85%, var(--bs-white));
-}
-
-.navbar-toggler {
-  color: var(--bs-navbar-color);
-  background-color: transparent;
-  border-color: rgba(255, 255, 255, 0.15);
-  transition: background-color 0.15s ease-in-out;
-}
-
-.navbar-toggler:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
 /* Make all CSS themes scrollable */
 .css-themes-list {
   height: calc(100vh - 6rem);
diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl
index f13c83a7..639e716d 100644
--- a/Customization/xsl/topic.xsl
+++ b/Customization/xsl/topic.xsl
@@ -13,9 +13,30 @@
 >
   <xsl:param name="defaultLanguage" select="'en'" as="xs:string"/>
   <xsl:param name="BIDIRECTIONAL_DOCUMENT" select="'no'" as="xs:string"/>
-  <xsl:param name="BOOTSTRAP_CSS_FOOTER" select="'border-top bg-subtle-primary'"/>
+  <xsl:param name="BOOTSTRAP_THEME_FOOTER" select="'none'"/>
+  <xsl:param name="BOOTSTRAP_THEME_HEADER" select="'primary-contrast'"/>
+  <xsl:param name="BOOTSTRAP_THEME_SIDEBAR" select="'none'"/>
+  <xsl:param name="BOOTSTRAP_THEME_TOPBAR" select="'none'"/>
+  <xsl:param name="BOOTSTRAP_THEME_CONTENT" select="'none'"/>
+  <xsl:param name="BOOTSTRAP_THEME_BODY" select="'none'"/>
+  <xsl:param name="BOOTSTRAP_THEME_SCROLLSPY" select="'none'"/>
   <xsl:param name="BOOTSTRAP_TOPBAR_HDR"/>
 
+  <!-- Splits a hyphenated theme value (e.g. 'warning-subtle-border') into
+       theme- prefixed classes ('theme-warning theme-subtle theme-border').
+       'none' returns ''. -->
+  <xsl:template name="theme-classes">
+    <xsl:param name="value" as="xs:string"/>
+    <xsl:choose>
+      <xsl:when test="$value = 'none'">
+        <xsl:sequence select="''"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:sequence select="string-join(for $part in tokenize($value, '-') return concat('theme-', $part), ' ')"/>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:template>
+
   <!--Check the file Url Definition of the TOP HDR FTR-->
   <xsl:variable name="TOPHDFFILE">
     <xsl:choose>
@@ -96,7 +117,13 @@
 
     <!-- ↓ Add collapsible top header ↓ -->
     <xsl:if test="string-length($TOPHDFFILE) > 0">
-      <div class="d-none lg:d-block">
+      <div>
+        <xsl:variable name="topbar-theme-classes">
+          <xsl:call-template name="theme-classes">
+            <xsl:with-param name="value" select="$BOOTSTRAP_THEME_TOPBAR"/>
+          </xsl:call-template>
+        </xsl:variable>
+        <xsl:attribute name="class" select="concat('d-none lg:d-block ', $topbar-theme-classes)"/>
         <xsl:copy-of select="document($TOPHDFFILE, /)"/>
       </div>
     </xsl:if>
@@ -105,9 +132,14 @@
     <xsl:if test="exists($header-content)">
       <header xsl:use-attribute-sets="banner">
         <!-- ↓ Add Bootstrap class attributes template ↓ -->
+        <xsl:variable name="header-theme-classes">
+          <xsl:call-template name="theme-classes">
+            <xsl:with-param name="value" select="$BOOTSTRAP_THEME_HEADER"/>
+          </xsl:call-template>
+        </xsl:variable>
         <xsl:attribute
           name="class"
-          select="'navbar lg:navbar-expand bd-navbar border-bottom border-inverse border-20 sticky-top'"
+          select="concat('navbar lg:navbar-expand bd-navbar border-bottom border-inverse border-20 sticky-top ', $header-theme-classes)"
         />
         <!-- ↑ End customization · Continue with DITA-OT defaults ↓ -->
         <xsl:sequence select="$header-content"/>
@@ -171,16 +203,21 @@
         <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
       </article>
       <xsl:if test="$BOOTSTRAP_SCROLLSPY_TOC != 'none'">
+        <xsl:variable name="scrollspy-theme-classes">
+          <xsl:call-template name="theme-classes">
+            <xsl:with-param name="value" select="$BOOTSTRAP_THEME_SCROLLSPY"/>
+          </xsl:call-template>
+        </xsl:variable>
         <xsl:choose>
           <xsl:when test="count(*[contains(@class, ' topic/topic ')])&gt;0">
-            <div class="bs-scrollspy mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1 fg-2">
+            <div class="{concat('bs-scrollspy mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1 fg-2 ', $scrollspy-theme-classes)}">
               <xsl:call-template name="scrollspy-content"/>
             </div>
           </xsl:when>
           <xsl:when
             test="count(*/*[@id and (contains(@class, ' topic/section ') or contains(@class, ' topic/example '))])&gt;0"
           >
-            <div class="bs-scrollspy mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1 fg-2">
+            <div class="{concat('bs-scrollspy mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1 fg-2 ', $scrollspy-theme-classes)}">
               <xsl:call-template name="scrollspy-content"/>
             </div>
           </xsl:when>
@@ -565,8 +602,13 @@
     <xsl:if test="exists($footer-content)">
       <footer xsl:use-attribute-sets="footer">
         <!-- ↓ Add Bootstrap CSS ↓ -->
+        <xsl:variable name="footer-theme-classes">
+          <xsl:call-template name="theme-classes">
+            <xsl:with-param name="value" select="$BOOTSTRAP_THEME_FOOTER"/>
+          </xsl:call-template>
+        </xsl:variable>
         <xsl:attribute name="class">
-          <xsl:value-of select="concat('mt-auto ', $BOOTSTRAP_CSS_FOOTER)"/>
+          <xsl:value-of select="concat('mt-auto ', $footer-theme-classes)"/>
           <xsl:if test="not($TOC_SPACER_PADDING = '0')">
             <xsl:value-of select="concat(' py-', $TOC_SPACER_PADDING)"/>
           </xsl:if>
@@ -774,12 +816,29 @@
     </body>
   </xsl:template>
 
+  <!-- Override to add Bootstrap theme classes to <body> -->
+  <xsl:template match="*" mode="addAttributesToBody">
+    <xsl:variable name="body-theme-classes">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$BOOTSTRAP_THEME_BODY"/>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:if test="$body-theme-classes != ''">
+      <xsl:attribute name="class" select="$body-theme-classes"/>
+    </xsl:if>
+  </xsl:template>
+
   <!-- Hidden accessibility buttons for screen readers and keyboard navigation-->
   <xsl:template name="gen-skip-to-main">
+    <xsl:variable name="skip-to-main-theme-classes">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$BOOTSTRAP_THEME_ACCESSIBILITY"/>
+      </xsl:call-template>
+    </xsl:variable>
     <div>
       <xsl:attribute
         name="class"
-        select="concat('visually-hidden-focusable overflow-hidden p-2 ', $BOOTSTRAP_CSS_ACCESSIBILITY_NAV)"
+        select="concat('visually-hidden-focusable overflow-hidden p-2 ', $skip-to-main-theme-classes)"
       />
 
       <div>
@@ -828,14 +887,29 @@
     Overrides to add CSS classes to use a CSS Grid for the navigation layout
   -->
   <xsl:attribute-set name="main">
-    <xsl:attribute name="class">bs-main me-3</xsl:attribute>
+    <xsl:attribute name="class">
+      <xsl:variable name="content-theme-classes">
+        <xsl:call-template name="theme-classes">
+          <xsl:with-param name="value" select="$BOOTSTRAP_THEME_CONTENT"/>
+        </xsl:call-template>
+      </xsl:variable>
+      <xsl:value-of select="'bs-main me-3'"/>
+      <xsl:if test="$content-theme-classes != ''">
+        <xsl:value-of select="concat(' p2 ', $content-theme-classes)"/>
+      </xsl:if>
+    </xsl:attribute>
     <xsl:attribute name="role">main</xsl:attribute>
   </xsl:attribute-set>
 
   <xsl:attribute-set name="toc">
     <xsl:attribute name="role">navigation</xsl:attribute>
     <xsl:attribute name="id">bs-sidebar-nav</xsl:attribute>
-    <xsl:attribute name="class">d-flex align-items-start flex-column h-100</xsl:attribute>
+    <xsl:attribute name="class">
+      <xsl:text>d-flex align-items-start flex-column h-100 </xsl:text>
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$BOOTSTRAP_THEME_SIDEBAR"/>
+      </xsl:call-template>
+    </xsl:attribute>
   </xsl:attribute-set>
 
   <xsl:attribute-set name="menubar-toc">
diff --git a/README.md b/README.md
index d787d32e..a9c07f41 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ A plug-in for [DITA Open Toolkit][1] that extends the default HTML5 output with
   - [Custom CSS](#custom-css)
   - [Headers and footers](#headers-and-footers)
   - [Navigation menu](#navigation-menu)
-  - [Accessibility utility classes](#accessibility-utility-classes)
+  - [Bootstrap Themes](#bootstrap-themes)
   - [Bootstrap component utility classes](#bootstrap-component-utility-classes)
   - [DITA element utility classes](#dita-element-utility-classes)
   - [Bootstrap icons for DITA notes](#bootstrap-icons-for-dita-notes)
@@ -160,12 +160,19 @@ dita --input=path/to/your.ditamap \
      --menubar-toc.include=yes
 ```
 
-### Accessibility utility classes
+### Bootstrap Themes
 
-The HTML output for accessibility-related elements can be annotated with common Bootstrap utility classes for borders, background, text, spacing, etc. using additional command line parameters:
+Several layout regions can be styled with a Bootstrap theme color using additional command line parameters. Each parameter accepts a color (`accent`, `danger`, `info`, `inverse`, `primary`, `secondary`, `success`, `warning`) combined with a suffix (`-border`, `-contrast`, `-muted`, `-subtle`, `-subtle-border`), or `none` to disable theming:
 
 - `bootstrap.css.accessibility.link` – Common Bootstrap utility classes for accessibility links
-- `bootstrap.css.accessibility.nav` – Common Bootstrap utility classes for accessibility navigation
+- `bootstrap.theme.accessibility` – Common Bootstrap utility classes for accessibility navigation
+- `bootstrap.theme.body` – Theme utility class for the page `<body>`. Same options, excluding the `-border` and `-subtle-border` suffixes. Default: `none`
+- `bootstrap.theme.content` – Theme utility class for the main content area. Default: `none`
+- `bootstrap.theme.footer` – Theme utility class for the page footer. Default: `none`
+- `bootstrap.theme.header` – Theme utility class for the page header. Default: `primary-contrast`
+- `bootstrap.theme.scrollspy` – Theme utility class for the scrollspy menu. Default: `none`
+- `bootstrap.theme.sidebar` – Theme utility class for the sidebar navigation. Default: `none`
+- `bootstrap.theme.topbar` – Theme utility class for the collapsible top header. Default: `none`
 
 ### Bootstrap component utility classes
 
@@ -179,7 +186,6 @@ The HTML output for the following Bootstrap components can be annotated with com
 - `bootstrap.css.carousel.caption` – Common utility classes for Bootstrap carousel captions
 - `bootstrap.css.carousel.indicators` – Common utility classes for Bootstrap carousel indicators
 - `bootstrap.css.container.size` – Bootstrap container class for main layout and menubar-TOC. Options: `container`, `container-fluid`, `sm:container`, `md:container`, `lg:container`, `xl:container` (default)
-- `bootstrap.css.footer` – Common utility classes for the HTML `<footer>` element
 - `bootstrap.css.menubar.toc` – CSS class for the menu bar. Defaults to `sticky-top bg-body`
 - `bootstrap.css.nav.parent` – Common utility classes for ancestors of active nav-pill elements
 - `bootstrap.css.pagination` – Common utility classes for Bootstrap pagination components
diff --git a/insertParameters.xml b/insertParameters.xml
index 2c90d86c..d64d9832 100644
--- a/insertParameters.xml
+++ b/insertParameters.xml
@@ -95,9 +95,39 @@
     if:set="bootstrap.css.carousel.caption"
   />
   <param
-    name="BOOTSTRAP_CSS_FOOTER"
-    expression="${bootstrap.css.footer}"
-    if:set="bootstrap.css.footer"
+    name="BOOTSTRAP_THEME_FOOTER"
+    expression="${bootstrap.theme.footer}"
+    if:set="bootstrap.theme.footer"
+  />
+  <param
+    name="BOOTSTRAP_THEME_HEADER"
+    expression="${bootstrap.theme.header}"
+    if:set="bootstrap.theme.header"
+  />
+  <param
+    name="BOOTSTRAP_THEME_SIDEBAR"
+    expression="${bootstrap.theme.sidebar}"
+    if:set="bootstrap.theme.sidebar"
+  />
+  <param
+    name="BOOTSTRAP_THEME_TOPBAR"
+    expression="${bootstrap.theme.topbar}"
+    if:set="bootstrap.theme.topbar"
+  />
+  <param
+    name="BOOTSTRAP_THEME_CONTENT"
+    expression="${bootstrap.theme.content}"
+    if:set="bootstrap.theme.content"
+  />
+  <param
+    name="BOOTSTRAP_THEME_BODY"
+    expression="${bootstrap.theme.body}"
+    if:set="bootstrap.theme.body"
+  />
+  <param
+    name="BOOTSTRAP_THEME_SCROLLSPY"
+    expression="${bootstrap.theme.scrollspy}"
+    if:set="bootstrap.theme.scrollspy"
   />
   <param
     name="BOOTSTRAP_CSS_TABS"
@@ -120,9 +150,9 @@
     if:set="menubar-toc.include"
   />
   <param
-    name="BOOTSTRAP_CSS_ACCESSIBILITY_NAV"
-    expression="${bootstrap.css.accessibility.nav}"
-    if:set="bootstrap.css.accessibility.nav"
+    name="BOOTSTRAP_THEME_ACCESSIBILITY"
+    expression="${bootstrap.theme.accessibility}"
+    if:set="bootstrap.theme.accessibility"
   />
   <param
     name="BOOTSTRAP_CSS_ACCESSIBILITY_LINK"
diff --git a/plugin.xml b/plugin.xml
index f6f3634f..4fe97a3a 100755
--- a/plugin.xml
+++ b/plugin.xml
@@ -182,11 +182,6 @@
       type="string"
       desc="Bootstrap classes for carousel indicators"
     />
-    <param
-      name="bootstrap.css.footer"
-      type="string"
-      desc="Bootstrap classes for footers"
-    />
     <param
       name="bootstrap.css.menubar.toc"
       type="string"
@@ -213,7 +208,320 @@
       desc="Bootstrap classes for flush accordion components"
     />
     <param
-      name="bootstrap.css.accessibility.nav"
+      name="bootstrap.theme.header"
+      type="enum"
+      desc="Bootstrap theme utility class for the page header"
+    >
+      <val>accent-border</val>
+      <val>accent-contrast</val>
+      <val>accent-muted</val>
+      <val>accent-subtle</val>
+      <val>accent-subtle-border</val>
+      <val>danger-border</val>
+      <val>danger-contrast</val>
+      <val>danger-muted</val>
+      <val>danger-subtle</val>
+      <val>danger-subtle-border</val>
+      <val>info-border</val>
+      <val>info-contrast</val>
+      <val>info-muted</val>
+      <val>info-subtle</val>
+      <val>info-subtle-border</val>
+      <val>inverse-border</val>
+      <val>inverse-contrast</val>
+      <val>inverse-muted</val>
+      <val>inverse-subtle</val>
+      <val>inverse-subtle-border</val>
+      <val>none</val>
+      <val>primary-border</val>
+      <val default="true">primary-contrast</val>
+      <val>primary-muted</val>
+      <val>primary-subtle</val>
+      <val>primary-subtle-border</val>
+      <val>secondary-border</val>
+      <val>secondary-contrast</val>
+      <val>secondary-muted</val>
+      <val>secondary-subtle</val>
+      <val>secondary-subtle-border</val>
+      <val>success-border</val>
+      <val>success-contrast</val>
+      <val>success-muted</val>
+      <val>success-subtle</val>
+      <val>success-subtle-border</val>
+      <val>warning-border</val>
+      <val>warning-contrast</val>
+      <val>warning-muted</val>
+      <val>warning-subtle</val>
+      <val>warning-subtle-border</val>
+    </param>
+    <param
+      name="bootstrap.theme.footer"
+      type="enum"
+      desc="Bootstrap theme utility class for the page footer"
+    >
+      <val>accent-border</val>
+      <val>accent-contrast</val>
+      <val>accent-muted</val>
+      <val>accent-subtle</val>
+      <val>accent-subtle-border</val>
+      <val>danger-border</val>
+      <val>danger-contrast</val>
+      <val>danger-muted</val>
+      <val>danger-subtle</val>
+      <val>danger-subtle-border</val>
+      <val>info-border</val>
+      <val>info-contrast</val>
+      <val>info-muted</val>
+      <val>info-subtle</val>
+      <val>info-subtle-border</val>
+      <val>inverse-border</val>
+      <val>inverse-contrast</val>
+      <val>inverse-muted</val>
+      <val>inverse-subtle</val>
+      <val>inverse-subtle-border</val>
+      <val default="true">none</val>
+      <val>primary-border</val>
+      <val>primary-contrast</val>
+      <val>primary-muted</val>
+      <val>primary-subtle</val>
+      <val>primary-subtle-border</val>
+      <val>secondary-border</val>
+      <val>secondary-contrast</val>
+      <val>secondary-muted</val>
+      <val>secondary-subtle</val>
+      <val>secondary-subtle-border</val>
+      <val>success-border</val>
+      <val>success-contrast</val>
+      <val>success-muted</val>
+      <val>success-subtle</val>
+      <val>success-subtle-border</val>
+      <val>warning-border</val>
+      <val>warning-contrast</val>
+      <val>warning-muted</val>
+      <val>warning-subtle</val>
+      <val>warning-subtle-border</val>
+    </param>
+    <param
+      name="bootstrap.theme.sidebar"
+      type="enum"
+      desc="Bootstrap theme utility class for the sidebar navigation"
+    >
+      <val>accent-border</val>
+      <val>accent-contrast</val>
+      <val>accent-muted</val>
+      <val>accent-subtle</val>
+      <val>accent-subtle-border</val>
+      <val>danger-border</val>
+      <val>danger-contrast</val>
+      <val>danger-muted</val>
+      <val>danger-subtle</val>
+      <val>danger-subtle-border</val>
+      <val>info-border</val>
+      <val>info-contrast</val>
+      <val>info-muted</val>
+      <val>info-subtle</val>
+      <val>info-subtle-border</val>
+      <val>inverse-border</val>
+      <val>inverse-contrast</val>
+      <val>inverse-muted</val>
+      <val>inverse-subtle</val>
+      <val>inverse-subtle-border</val>
+      <val default="true">none</val>
+      <val>primary-border</val>
+      <val>primary-contrast</val>
+      <val>primary-muted</val>
+      <val>primary-subtle</val>
+      <val>primary-subtle-border</val>
+      <val>secondary-border</val>
+      <val>secondary-contrast</val>
+      <val>secondary-muted</val>
+      <val>secondary-subtle</val>
+      <val>secondary-subtle-border</val>
+      <val>success-border</val>
+      <val>success-contrast</val>
+      <val>success-muted</val>
+      <val>success-subtle</val>
+      <val>success-subtle-border</val>
+      <val>warning-border</val>
+      <val>warning-contrast</val>
+      <val>warning-muted</val>
+      <val>warning-subtle</val>
+      <val>warning-subtle-border</val>
+    </param>
+    <param
+      name="bootstrap.theme.topbar"
+      type="enum"
+      desc="Bootstrap theme utility class for the collapsible top header"
+    >
+      <val>accent-border</val>
+      <val>accent-contrast</val>
+      <val>accent-muted</val>
+      <val>accent-subtle</val>
+      <val>accent-subtle-border</val>
+      <val>danger-border</val>
+      <val>danger-contrast</val>
+      <val>danger-muted</val>
+      <val>danger-subtle</val>
+      <val>danger-subtle-border</val>
+      <val>info-border</val>
+      <val>info-contrast</val>
+      <val>info-muted</val>
+      <val>info-subtle</val>
+      <val>info-subtle-border</val>
+      <val>inverse-border</val>
+      <val>inverse-contrast</val>
+      <val>inverse-muted</val>
+      <val>inverse-subtle</val>
+      <val>inverse-subtle-border</val>
+      <val default="true">none</val>
+      <val>primary-border</val>
+      <val>primary-contrast</val>
+      <val>primary-muted</val>
+      <val>primary-subtle</val>
+      <val>primary-subtle-border</val>
+      <val>secondary-border</val>
+      <val>secondary-contrast</val>
+      <val>secondary-muted</val>
+      <val>secondary-subtle</val>
+      <val>secondary-subtle-border</val>
+      <val>success-border</val>
+      <val>success-contrast</val>
+      <val>success-muted</val>
+      <val>success-subtle</val>
+      <val>success-subtle-border</val>
+      <val>warning-border</val>
+      <val>warning-contrast</val>
+      <val>warning-muted</val>
+      <val>warning-subtle</val>
+      <val>warning-subtle-border</val>
+    </param>
+    <param
+      name="bootstrap.theme.content"
+      type="enum"
+      desc="Bootstrap theme utility class for the main content area"
+    >
+      <val>accent-border</val>
+      <val>accent-contrast</val>
+      <val>accent-muted</val>
+      <val>accent-subtle</val>
+      <val>accent-subtle-border</val>
+      <val>danger-border</val>
+      <val>danger-contrast</val>
+      <val>danger-muted</val>
+      <val>danger-subtle</val>
+      <val>danger-subtle-border</val>
+      <val>info-border</val>
+      <val>info-contrast</val>
+      <val>info-muted</val>
+      <val>info-subtle</val>
+      <val>info-subtle-border</val>
+      <val>inverse-border</val>
+      <val>inverse-contrast</val>
+      <val>inverse-muted</val>
+      <val>inverse-subtle</val>
+      <val>inverse-subtle-border</val>
+      <val default="true">none</val>
+      <val>primary-border</val>
+      <val>primary-contrast</val>
+      <val>primary-muted</val>
+      <val>primary-subtle</val>
+      <val>primary-subtle-border</val>
+      <val>secondary-border</val>
+      <val>secondary-contrast</val>
+      <val>secondary-muted</val>
+      <val>secondary-subtle</val>
+      <val>secondary-subtle-border</val>
+      <val>success-border</val>
+      <val>success-contrast</val>
+      <val>success-muted</val>
+      <val>success-subtle</val>
+      <val>success-subtle-border</val>
+      <val>warning-border</val>
+      <val>warning-contrast</val>
+      <val>warning-muted</val>
+      <val>warning-subtle</val>
+      <val>warning-subtle-border</val>
+    </param>
+    <param
+      name="bootstrap.theme.body"
+      type="enum"
+      desc="Bootstrap theme utility class for the page body"
+    >
+      <val>accent-contrast</val>
+      <val>accent-muted</val>
+      <val>accent-subtle</val>
+      <val>danger-contrast</val>
+      <val>danger-muted</val>
+      <val>danger-subtle</val>
+      <val>info-contrast</val>
+      <val>info-muted</val>
+      <val>info-subtle</val>
+      <val>inverse-contrast</val>
+      <val>inverse-muted</val>
+      <val>inverse-subtle</val>
+      <val default="true">none</val>
+      <val>primary-contrast</val>
+      <val>primary-muted</val>
+      <val>primary-subtle</val>
+      <val>secondary-contrast</val>
+      <val>secondary-muted</val>
+      <val>secondary-subtle</val>
+      <val>success-contrast</val>
+      <val>success-muted</val>
+      <val>success-subtle</val>
+      <val>warning-contrast</val>
+      <val>warning-muted</val>
+      <val>warning-subtle</val>
+    </param>
+    <param
+      name="bootstrap.theme.scrollspy"
+      type="enum"
+      desc="Bootstrap theme utility class for the scrollspy menu"
+    >
+      <val>accent-border</val>
+      <val>accent-contrast</val>
+      <val>accent-muted</val>
+      <val>accent-subtle</val>
+      <val>accent-subtle-border</val>
+      <val>danger-border</val>
+      <val>danger-contrast</val>
+      <val>danger-muted</val>
+      <val>danger-subtle</val>
+      <val>danger-subtle-border</val>
+      <val>info-border</val>
+      <val>info-contrast</val>
+      <val>info-muted</val>
+      <val>info-subtle</val>
+      <val>info-subtle-border</val>
+      <val>inverse-border</val>
+      <val>inverse-contrast</val>
+      <val>inverse-muted</val>
+      <val>inverse-subtle</val>
+      <val>inverse-subtle-border</val>
+      <val default="true">none</val>
+      <val>primary-border</val>
+      <val>primary-contrast</val>
+      <val>primary-muted</val>
+      <val>primary-subtle</val>
+      <val>primary-subtle-border</val>
+      <val>secondary-border</val>
+      <val>secondary-contrast</val>
+      <val>secondary-muted</val>
+      <val>secondary-subtle</val>
+      <val>secondary-subtle-border</val>
+      <val>success-border</val>
+      <val>success-contrast</val>
+      <val>success-muted</val>
+      <val>success-subtle</val>
+      <val>success-subtle-border</val>
+      <val>warning-border</val>
+      <val>warning-contrast</val>
+      <val>warning-muted</val>
+      <val>warning-subtle</val>
+      <val>warning-subtle-border</val>
+    </param>
+    <param
+      name="bootstrap.theme.accessibility"
       type="string"
       desc="Bootstrap classes for accessibility navigation"
     />
diff --git a/sample/carousel.dita b/sample/carousel.dita
index 8ad6160f..0287122a 100644
--- a/sample/carousel.dita
+++ b/sample/carousel.dita
@@ -216,7 +216,7 @@
           <div outputclass="row">
             <div outputclass="col-1"/>
             <div outputclass="col-10">
-              <lines outputclass="text-bg-secondary">Is it for fear to wet a widow’s eye
+              <lines outputclass="p-1 theme-secondary theme-muted theme-border">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;</lines>
@@ -227,7 +227,9 @@ The world will wail thee like a makeless wife;</lines>
           <div outputclass="row">
             <div outputclass="col-1"/>
             <div outputclass="col-10">
-              <lines outputclass="text-bg-secondary">The world will be thy widow and still weep
+              <lines
+                outputclass="p-1 theme-secondary theme-muted theme-border"
+              >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.</lines>
@@ -238,7 +240,9 @@ By children’s eyes, her husband’s shape in mind.</lines>
           <div outputclass="row">
             <div outputclass="col-1"/>
             <div outputclass="col-10">
-              <lines outputclass="text-bg-secondary">Look what an unthrift in the world doth spend
+              <lines
+                outputclass="p-1 theme-secondary theme-muted theme-border"
+              >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.</lines>
@@ -249,7 +253,9 @@ And, kept unused, the user so destroys it.</lines>
           <div outputclass="row">
             <div outputclass="col-1"/>
             <div outputclass="col-10">
-              <lines outputclass="text-bg-secondary"> No love toward others in that bosom sits
+              <lines
+                outputclass="p-1 theme-secondary theme-muted theme-border"
+              > No love toward others in that bosom sits
  That on himself such murd’rous shame commits.
 
             <b>Sonnet 9 - William Shakespeare</b></lines>
diff --git a/sample/index.dita b/sample/index.dita
index 9e776404..8285d0e9 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -539,20 +539,18 @@
           scope="external"
         >dita-bootstrap.github.io</xref>. </note>
     </section>
-    <section id="accessibility-utility-classes">
-      <title>Accessibility utility classes</title>
-      <indexterm><parmname>--bootstrap.css.accessibility.nav</parmname></indexterm>
+    <section id="bootstrap-themes">
+      <title>Bootstrap Themes</title>
       <indexterm><parmname>--bootstrap.css.accessibility.link</parmname></indexterm>
-      <p>The HTML output for accessibility-related elements can be annotated with common Bootstrap utility classes for
-        <xref href="https://getbootstrap.com/docs/6.0/utilities/borders" format="html" scope="external">borders</xref>,
-        <xref
-          href="https://getbootstrap.com/docs/6.0/utilities/background"
-          format="html"
-          scope="external"
-        >background</xref>,
-        <xref href="https://getbootstrap.com/docs/6.0/utilities/text" format="html" scope="external">text</xref>,
-        <xref href="https://getbootstrap.com/docs/6.0/utilities/spacing" format="html" scope="external">spacing</xref>,
-        etc. using additional command line parameters:</p>
+      <indexterm><parmname>--bootstrap.theme.accessibility</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.body</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.content</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.footer</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.header</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.scrollspy</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.sidebar</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.topbar</parmname></indexterm>
+      <p>Layout regions can be styled with a Bootstrap theme color using additional command line parameters.</p>
       <parml otherprops="cols(4)">
         <plentry>
           <pt>
@@ -564,12 +562,69 @@
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.accessibility&#8203;.nav</parmname>
+            <parmname>--bootstrap.theme&#8203;.accessibility</parmname>
           </pt>
           <pd>
             Common Bootstrap utility classes for accessibility navigation
           </pd>
         </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.body</parmname>
+          </pt>
+          <pd>
+            Theme utility class for the page <xmlelement>body</xmlelement>.
+            Defaults to <option>none</option>
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.content</parmname>
+          </pt>
+          <pd>
+            Theme utility class for the main content area. Defaults to <option>none</option>
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.footer</parmname>
+          </pt>
+          <pd>
+            Theme utility class for the page footer. Defaults to <option>none</option>
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.header</parmname>
+          </pt>
+          <pd>
+            Theme utility class for the page header. Defaults to <option>primary-contrast</option>
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.scrollspy</parmname>
+          </pt>
+          <pd>
+            Theme utility class for the scrollspy menu. Defaults to <option>none</option>
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.sidebar</parmname>
+          </pt>
+          <pd>
+            Theme utility class for the sidebar navigation. Defaults to <option>none</option>
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.topbar</parmname>
+          </pt>
+          <pd>
+            Theme utility class for the collapsible top header. Defaults to <option>none</option>
+          </pd>
+        </plentry>
       </parml>
     </section>
     <section id="bootstrap-component-utility-classes">
@@ -581,7 +636,6 @@
       <indexterm><parmname>--bootstrap.css.carousel.caption</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.carousel.indicators</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.container.size</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.footer</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.menubar.toc</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.nav.parent</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.pagination</parmname></indexterm>
@@ -678,15 +732,6 @@
             Defaults to <option>2xl:container</option>
           </pd>
         </plentry>
-        <plentry>
-          <pt>
-            <parmname>--bootstrap.css&#8203;.footer</parmname>
-          </pt>
-          <pd>
-            Common utility classes for the HTML
-            <xmlelement>footer</xmlelement> element
-          </pd>
-        </plentry>
         <plentry>
           <pt>
             <parmname>--bootstrap.css&#8203;.menubar&#8203;.toc</parmname>
diff --git a/sample/search-box.dita b/sample/search-box.dita
index 7be4ac31..f57d42af 100644
--- a/sample/search-box.dita
+++ b/sample/search-box.dita
@@ -86,10 +86,9 @@
       <p>The plug-in supports the following parameter:</p>
       <parml>
         <plentry>
-          <pt><parmname>--bootstrap.css.search.card</parmname></pt>
+          <pt><parmname>--bootstrap.theme.search.card</parmname></pt>
           <pd>
-            <p>Specifies the Bootstrap CSS classes to append to the search results card component (e.g. <codeph
-              >theme-primary</codeph> to color the card).</p>
+            <p>Bootstrap theme utility class for the search results card component.</p>
           </pd>
         </plentry>
       </parml>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 33ef3118..93228357 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -24,7 +24,7 @@
   <xsl:param name="BOOTSTRAP_CSS_TABS" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_TABS_VERTICAL" select="'me-3'"/>
   <xsl:param name="BOOTSTRAP_CSS_ACCORDION" select="''"/>
-  <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_NAV" select="'bg-subtle-secondary'"/>
+  <xsl:param name="BOOTSTRAP_THEME_ACCESSIBILITY" select="'secondary-subtle'"/>
   <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_LINK" select="'btn btn-outline theme-primary btn-sm'"/>
   <xsl:param name="BOOTSTRAP_CSS_EXAMPLE" select="' p-3 border '"/>
   <xsl:param name="BOOTSTRAP_CSS_FIGURE" select="' w-100 max-w-100 p-3 '"/>

From 8a76875bb083e111190420c8626fd2ad983b33b3 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Wed, 12 Aug 2026 15:59:31 +0200
Subject: [PATCH 78/87] Fixing menu colors

---
 .github/dita-ot/html.xml |  2 +-
 css/common-bootstrap.css | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/.github/dita-ot/html.xml b/.github/dita-ot/html.xml
index c66dfa52..d07fc7d9 100644
--- a/.github/dita-ot/html.xml
+++ b/.github/dita-ot/html.xml
@@ -28,7 +28,7 @@
       <param name="popovers.include" value="yes"/>
       <param name="dark.mode.include" value="yes"/>
       <param name="css.theme.switcher" value="yes"/>
-      <param name="bootstrap.theme.search.card" value="primary-contrast"/>
+      <param name="bootstrap.theme.search.card" value="secondary-border"/>
       <param name="bootstrap.theme.footer" value="primary-subtle-border"/>
       <param name="open-graph.url" value="https://dita-bootstrap.github.io"/>
       <param name="twitter.site" value="@infotexture"/>
diff --git a/css/common-bootstrap.css b/css/common-bootstrap.css
index a02476b8..2c301368 100644
--- a/css/common-bootstrap.css
+++ b/css/common-bootstrap.css
@@ -130,3 +130,13 @@
   border-right-color: var(--bs-alert-border-color, transparent);
   border-left: 0;
 }
+
+.navbar .menu {
+  --bs-theme-fg: initial;
+  --bs-theme-base: initial;
+  --bs-theme-bg: initial;
+  --bs-theme-bg-subtle: initial;
+  --bs-theme-bg-muted: initial;
+  --bs-theme-border: initial;
+  --bs-theme-contrast: initial;
+}

From ff8673e9e4792a504cb45c9fbac3d1029433345d Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Wed, 12 Aug 2026 19:12:02 +0200
Subject: [PATCH 79/87] Add theme

---
 Customization/xsl/tables.xsl |  40 ++--
 Customization/xsl/topic.xsl  |  18 +-
 sample/document.ditamap      |   1 +
 sample/theme.dita            | 367 +++++++++++++++++++++++++++++++++++
 xsl/utility-classes.xsl      | 185 +++++++++---------
 5 files changed, 508 insertions(+), 103 deletions(-)
 create mode 100644 sample/theme.dita

diff --git a/Customization/xsl/tables.xsl b/Customization/xsl/tables.xsl
index 4add2edb..3f8a4c27 100644
--- a/Customization/xsl/tables.xsl
+++ b/Customization/xsl/tables.xsl
@@ -116,11 +116,14 @@
     <xsl:variable
       name="theme"
       select="
-      (@color,
+      (@theme,
        substring-after(tokenize(@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'))[1]"
     />
     <xsl:if test="exists($theme) and $theme != ''">
-      <xsl:value-of select="concat('theme-', $theme, ' ')"/>
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:if test="@striped = 'yes'">
       <xsl:text> table-striped</xsl:text>
@@ -157,13 +160,16 @@
     <xsl:variable
       name="theme"
       select="
-      (@color,
+      (@theme,
        substring-after(tokenize(@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'),
-       $table/@color,
+       $table/@theme,
        substring-after(tokenize($table/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'))[1]"
     />
     <xsl:if test="exists($theme) and $theme != ''">
-      <xsl:value-of select="concat('theme-', $theme, ' ')"/>
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:next-match/>
   </xsl:template>
@@ -174,15 +180,18 @@
     <xsl:variable
       name="theme"
       select="
-      (@color,
+      (@theme,
        substring-after(tokenize(@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'),
-       $group/@color,
+       $group/@theme,
        substring-after(tokenize($group/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'),
-       $table/@color,
+       $table/@theme,
        substring-after(tokenize($table/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'))[1]"
     />
     <xsl:if test="exists($theme) and $theme != ''">
-      <xsl:value-of select="concat('theme-', $theme, ' ')"/>
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:next-match/>
   </xsl:template>
@@ -194,17 +203,20 @@
     <xsl:variable
       name="theme"
       select="
-      (@color,
+      (@theme,
        substring-after(tokenize(@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'),
-       $row/@color,
+       $row/@theme,
        substring-after(tokenize($row/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'),
-       $group/@color,
+       $group/@theme,
        substring-after(tokenize($group/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'),
-       $table/@color,
+       $table/@theme,
        substring-after(tokenize($table/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'))[1]"
     />
     <xsl:if test="exists($theme) and $theme != ''">
-      <xsl:value-of select="concat('theme-', $theme, ' ')"/>
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:next-match/>
   </xsl:template>
diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl
index 639e716d..a487175c 100644
--- a/Customization/xsl/topic.xsl
+++ b/Customization/xsl/topic.xsl
@@ -23,16 +23,30 @@
   <xsl:param name="BOOTSTRAP_TOPBAR_HDR"/>
 
   <!-- Splits a hyphenated theme value (e.g. 'warning-subtle-border') into
-       theme- prefixed classes ('theme-warning theme-subtle theme-border').
+       prefixed classes. $prefix (default 'theme') applies to the first
+       token (the color, e.g. 'theme-warning'); $suffix-prefix (default
+       'theme') applies to every token after it (e.g. 'theme-subtle
+       theme-border'). Pass a component-specific $suffix-prefix (e.g.
+       'badge', 'btn', 'table') when that component has its own scoped
+       modifier classes instead of the generic 'theme-{suffix}' ones.
        'none' returns ''. -->
   <xsl:template name="theme-classes">
     <xsl:param name="value" as="xs:string"/>
+    <xsl:param name="prefix" select="'theme'" as="xs:string"/>
+    <xsl:param name="suffix-prefix" select="'theme'" as="xs:string"/>
     <xsl:choose>
       <xsl:when test="$value = 'none'">
         <xsl:sequence select="''"/>
       </xsl:when>
       <xsl:otherwise>
-        <xsl:sequence select="string-join(for $part in tokenize($value, '-') return concat('theme-', $part), ' ')"/>
+        <xsl:variable name="parts" select="tokenize($value, '-')" as="xs:string*"/>
+        <xsl:sequence
+          select="
+            string-join(
+              (concat($prefix, '-', $parts[1]),
+               for $part in $parts[position() > 1] return concat($suffix-prefix, '-', $part)),
+              ' ')"
+        />
       </xsl:otherwise>
     </xsl:choose>
   </xsl:template>
diff --git a/sample/document.ditamap b/sample/document.ditamap
index d39936f0..9c6a20af 100644
--- a/sample/document.ditamap
+++ b/sample/document.ditamap
@@ -70,6 +70,7 @@
     <topicref href="color.dita"/>
     <topicref href="shadows.dita"/>
     <topicref href="spacing.dita"/>
+    <topicref href="theme.dita"/>
   </chapter>
   <chapter>
     <topicmeta>
diff --git a/sample/theme.dita b/sample/theme.dita
new file mode 100644
index 00000000..ae411ad1
--- /dev/null
+++ b/sample/theme.dita
@@ -0,0 +1,367 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
+<!-- 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 (found at https://getbootstrap.com/docs/6.0), however DITA
+   markup is used throughout the examples describing how to implement these
+   components correctly using outputclass.
+
+   This work, is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc.
+   and the Bootstrap Authors, and used under CC BY 3.0.
+
+    -->
+<topic id="theme">
+  <title>Theme</title>
+  <shortdesc>Combine one of three theme utilities with our theme color classes to set
+    color and background-color pairings on any element, just like component variants.</shortdesc>
+  <prolog>
+    <metadata>
+      <keywords>
+        <indexterm>Theme</indexterm>
+        <indexterm>Color</indexterm>
+        <indexterm>Background</indexterm>
+        <indexterm>CSS
+          <indexterm><xmlatt>outputclass</xmlatt></indexterm>
+        </indexterm>
+      </keywords>
+    </metadata>
+  </prolog>
+  <body outputclass="language-markup">
+
+    <section id="overview">
+      <title>Overview</title>
+      <p>Take any of our theme color classes and add <codeph>theme-contrast</codeph>,
+        <codeph>theme-subtle</codeph>, or <codeph>theme-muted</codeph> to set a predefined
+        color and background-color pairing. Then optionally add <codeph>theme-border</codeph>
+        to set a predefined border color.</p>
+    </section>
+
+    <section id="contrast">
+      <title>Contrast</title>
+      <p>Contrast pairs the bg theme token with the contrast text color for maximum
+        readability with <codeph>theme-contrast</codeph>. This is ideal for high-emphasis
+        elements with solid backgrounds.</p>
+    </section>
+    <example>
+      <div outputclass="d-flex flex-wrap gap-2">
+        <div outputclass="p-2 theme-primary theme-contrast">.theme-primary .theme-contrast</div>
+        <div outputclass="p-2 theme-accent theme-contrast">.theme-accent .theme-contrast</div>
+        <div outputclass="p-2 theme-success theme-contrast">.theme-success .theme-contrast</div>
+        <div outputclass="p-2 theme-danger theme-contrast">.theme-danger .theme-contrast</div>
+        <div outputclass="p-2 theme-warning theme-contrast">.theme-warning .theme-contrast</div>
+        <div outputclass="p-2 theme-info theme-contrast">.theme-info .theme-contrast</div>
+        <div outputclass="p-2 theme-inverse theme-contrast">.theme-inverse .theme-contrast</div>
+        <div outputclass="p-2 theme-secondary theme-contrast">.theme-secondary .theme-contrast</div>
+      </div>
+    </example>
+    <codeblock>&lt;div outputclass="p-2 theme-primary theme-contrast"&gt;.theme-primary .theme-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-accent theme-contrast"&gt;.theme-accent .theme-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-success theme-contrast"&gt;.theme-success .theme-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-danger theme-contrast"&gt;.theme-danger .theme-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-warning theme-contrast"&gt;.theme-warning .theme-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-info theme-contrast"&gt;.theme-info .theme-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-inverse theme-contrast"&gt;.theme-inverse .theme-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-secondary theme-contrast"&gt;.theme-secondary .theme-contrast&lt;/div&gt;</codeblock>
+
+    <p>Nested links inherit the contrast foreground so they stay legible on the solid background:</p>
+    <example>
+      <div outputclass="d-flex flex-column gap-2">
+        <div outputclass="p-3 theme-primary theme-contrast">Theme Primary with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-accent theme-contrast">Theme Accent with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-success theme-contrast">Theme Success with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-danger theme-contrast">Theme Danger with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-warning theme-contrast">Theme Warning with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-info theme-contrast">Theme Info with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-inverse theme-contrast">Theme Inverse with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-secondary theme-contrast">Theme Secondary with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+      </div>
+    </example>
+    <codeblock>&lt;div outputclass="p-3 theme-primary theme-contrast"&gt;Theme Primary with a
+  &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+
+    <section id="subtle">
+      <title>Subtle</title>
+      <p>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.</p>
+    </section>
+    <example>
+      <div outputclass="d-flex flex-wrap gap-2">
+        <div outputclass="p-2 theme-primary theme-subtle">.theme-primary .theme-subtle</div>
+        <div outputclass="p-2 theme-accent theme-subtle">.theme-accent .theme-subtle</div>
+        <div outputclass="p-2 theme-success theme-subtle">.theme-success .theme-subtle</div>
+        <div outputclass="p-2 theme-danger theme-subtle">.theme-danger .theme-subtle</div>
+        <div outputclass="p-2 theme-warning theme-subtle">.theme-warning .theme-subtle</div>
+        <div outputclass="p-2 theme-info theme-subtle">.theme-info .theme-subtle</div>
+        <div outputclass="p-2 theme-inverse theme-subtle">.theme-inverse .theme-subtle</div>
+        <div outputclass="p-2 theme-secondary theme-subtle">.theme-secondary .theme-subtle</div>
+      </div>
+    </example>
+    <codeblock>&lt;div outputclass="p-2 theme-primary theme-subtle"&gt;.theme-primary .theme-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-accent theme-subtle"&gt;.theme-accent .theme-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-success theme-subtle"&gt;.theme-success .theme-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-danger theme-subtle"&gt;.theme-danger .theme-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-warning theme-subtle"&gt;.theme-warning .theme-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-info theme-subtle"&gt;.theme-info .theme-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-inverse theme-subtle"&gt;.theme-inverse .theme-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-secondary theme-subtle"&gt;.theme-secondary .theme-subtle&lt;/div&gt;</codeblock>
+
+    <p>And with borders:</p>
+    <example>
+      <div outputclass="d-flex flex-wrap gap-2">
+        <div outputclass="p-2 theme-primary theme-subtle theme-border">.theme-primary .theme-subtle .theme-border</div>
+        <div outputclass="p-2 theme-accent theme-subtle theme-border">.theme-accent .theme-subtle .theme-border</div>
+        <div outputclass="p-2 theme-success theme-subtle theme-border">.theme-success .theme-subtle .theme-border</div>
+        <div outputclass="p-2 theme-danger theme-subtle theme-border">.theme-danger .theme-subtle .theme-border</div>
+        <div outputclass="p-2 theme-warning theme-subtle theme-border">.theme-warning .theme-subtle .theme-border</div>
+        <div outputclass="p-2 theme-info theme-subtle theme-border">.theme-info .theme-subtle .theme-border</div>
+        <div outputclass="p-2 theme-inverse theme-subtle theme-border">.theme-inverse .theme-subtle .theme-border</div>
+        <div
+          outputclass="p-2 theme-secondary theme-subtle theme-border"
+        >.theme-secondary .theme-subtle .theme-border</div>
+      </div>
+    </example>
+    <codeblock
+    >&lt;div outputclass="p-2 theme-primary theme-subtle theme-border"&gt;.theme-primary .theme-subtle .theme-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-accent theme-subtle theme-border"&gt;.theme-accent .theme-subtle .theme-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-success theme-subtle theme-border"&gt;.theme-success .theme-subtle .theme-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-danger theme-subtle theme-border"&gt;.theme-danger .theme-subtle .theme-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-warning theme-subtle theme-border"&gt;.theme-warning .theme-subtle .theme-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-info theme-subtle theme-border"&gt;.theme-info .theme-subtle .theme-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-inverse theme-subtle theme-border"&gt;.theme-inverse .theme-subtle .theme-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-secondary theme-subtle theme-border"&gt;.theme-secondary .theme-subtle .theme-border&lt;/div&gt;</codeblock>
+
+    <p>Nested links inherit the subtle foreground so they stay legible on the subtle background:</p>
+    <example>
+      <div outputclass="d-flex flex-column gap-2">
+        <div outputclass="p-3 theme-primary theme-subtle">Theme Primary with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-accent theme-subtle">Theme Accent with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-success theme-subtle">Theme Success with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-danger theme-subtle">Theme Danger with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-warning theme-subtle">Theme Warning with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-info theme-subtle">Theme Info with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-inverse theme-subtle">Theme Inverse with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-secondary theme-subtle">Theme Secondary with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+      </div>
+    </example>
+    <codeblock>&lt;div outputclass="p-3 theme-primary theme-subtle"&gt;Theme Primary with a
+  &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+
+    <section id="muted">
+      <title>Muted</title>
+      <p>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.</p>
+    </section>
+    <example>
+      <div outputclass="d-flex flex-wrap gap-2">
+        <div outputclass="p-2 theme-primary theme-muted">.theme-primary .theme-muted</div>
+        <div outputclass="p-2 theme-accent theme-muted">.theme-accent .theme-muted</div>
+        <div outputclass="p-2 theme-success theme-muted">.theme-success .theme-muted</div>
+        <div outputclass="p-2 theme-danger theme-muted">.theme-danger .theme-muted</div>
+        <div outputclass="p-2 theme-warning theme-muted">.theme-warning .theme-muted</div>
+        <div outputclass="p-2 theme-info theme-muted">.theme-info .theme-muted</div>
+        <div outputclass="p-2 theme-inverse theme-muted">.theme-inverse .theme-muted</div>
+        <div outputclass="p-2 theme-secondary theme-muted">.theme-secondary .theme-muted</div>
+      </div>
+    </example>
+    <codeblock>&lt;div outputclass="p-2 theme-primary theme-muted"&gt;.theme-primary .theme-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-accent theme-muted"&gt;.theme-accent .theme-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-success theme-muted"&gt;.theme-success .theme-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-danger theme-muted"&gt;.theme-danger .theme-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-warning theme-muted"&gt;.theme-warning .theme-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-info theme-muted"&gt;.theme-info .theme-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-inverse theme-muted"&gt;.theme-inverse .theme-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-secondary theme-muted"&gt;.theme-secondary .theme-muted&lt;/div&gt;</codeblock>
+
+    <p>And with borders:</p>
+    <example>
+      <div outputclass="d-flex flex-wrap gap-2">
+        <div outputclass="p-2 theme-primary theme-muted theme-border">.theme-primary .theme-muted .theme-border</div>
+        <div outputclass="p-2 theme-accent theme-muted theme-border">.theme-accent .theme-muted .theme-border</div>
+        <div outputclass="p-2 theme-success theme-muted theme-border">.theme-success .theme-muted .theme-border</div>
+        <div outputclass="p-2 theme-danger theme-muted theme-border">.theme-danger .theme-muted .theme-border</div>
+        <div outputclass="p-2 theme-warning theme-muted theme-border">.theme-warning .theme-muted .theme-border</div>
+        <div outputclass="p-2 theme-info theme-muted theme-border">.theme-info .theme-muted .theme-border</div>
+        <div outputclass="p-2 theme-inverse theme-muted theme-border">.theme-inverse .theme-muted .theme-border</div>
+        <div
+          outputclass="p-2 theme-secondary theme-muted theme-border"
+        >.theme-secondary .theme-muted .theme-border</div>
+      </div>
+    </example>
+    <codeblock
+    >&lt;div outputclass="p-2 theme-primary theme-muted theme-border"&gt;.theme-primary .theme-muted .theme-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-accent theme-muted theme-border"&gt;.theme-accent .theme-muted .theme-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-success theme-muted theme-border"&gt;.theme-success .theme-muted .theme-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-danger theme-muted theme-border"&gt;.theme-danger .theme-muted .theme-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-warning theme-muted theme-border"&gt;.theme-warning .theme-muted .theme-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-info theme-muted theme-border"&gt;.theme-info .theme-muted .theme-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-inverse theme-muted theme-border"&gt;.theme-inverse .theme-muted .theme-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-secondary theme-muted theme-border"&gt;.theme-secondary .theme-muted .theme-border&lt;/div&gt;</codeblock>
+
+    <p>Nested links inherit the muted foreground so they stay legible on the muted background:</p>
+    <example>
+      <div outputclass="d-flex flex-column gap-2">
+        <div outputclass="p-3 theme-primary theme-muted">Theme Primary with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-accent theme-muted">Theme Accent with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-success theme-muted">Theme Success with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-danger theme-muted">Theme Danger with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-warning theme-muted">Theme Warning with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-info theme-muted">Theme Info with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-inverse theme-muted">Theme Inverse with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-secondary theme-muted">Theme Secondary with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+      </div>
+    </example>
+    <codeblock>&lt;div outputclass="p-3 theme-primary theme-muted"&gt;Theme Primary with a
+  &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+
+    <section id="comparison">
+      <title>Comparison</title>
+      <p>Here's a side-by-side comparison of all three styles for each theme color,
+        including nested links:</p>
+    </section>
+    <example>
+      <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 outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-primary theme-subtle p-3 flex-fill text-center rounded">Primary with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-primary theme-muted p-3 flex-fill text-center rounded">Primary with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+      </div>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-accent theme-contrast p-3 flex-fill text-center rounded">Accent with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-accent theme-subtle p-3 flex-fill text-center rounded">Accent with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-accent theme-muted p-3 flex-fill text-center rounded">Accent with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+      </div>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-success theme-contrast p-3 flex-fill text-center rounded">Success with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-success theme-subtle p-3 flex-fill text-center rounded">Success with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-success theme-muted p-3 flex-fill text-center rounded">Success with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+      </div>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-danger theme-contrast p-3 flex-fill text-center rounded">Danger with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-danger theme-subtle p-3 flex-fill text-center rounded">Danger with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-danger theme-muted p-3 flex-fill text-center rounded">Danger with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+      </div>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-warning theme-contrast p-3 flex-fill text-center rounded">Warning with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-warning theme-subtle p-3 flex-fill text-center rounded">Warning with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-warning theme-muted p-3 flex-fill text-center rounded">Warning with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+      </div>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-info theme-contrast p-3 flex-fill text-center rounded">Info with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-info theme-subtle p-3 flex-fill text-center rounded">Info with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-info theme-muted p-3 flex-fill text-center rounded">Info with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+      </div>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-inverse theme-contrast p-3 flex-fill text-center rounded">Inverse with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-inverse theme-subtle p-3 flex-fill text-center rounded">Inverse with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-inverse theme-muted p-3 flex-fill text-center rounded">Inverse with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+      </div>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-secondary theme-contrast p-3 flex-fill text-center rounded">Secondary with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-secondary theme-subtle p-3 flex-fill text-center rounded">Secondary with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+        <div outputclass="theme-secondary theme-muted p-3 flex-fill text-center rounded">Secondary with a
+          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+      </div>
+    </example>
+    <codeblock>&lt;div outputclass="d-flex gap-2 mb-2"&gt;
+  &lt;div outputclass="theme-primary theme-contrast p-3 flex-fill text-center rounded"&gt;Primary with a
+    &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+  &lt;div outputclass="theme-primary theme-subtle p-3 flex-fill text-center rounded"&gt;Primary with a
+    &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+  &lt;div outputclass="theme-primary theme-muted p-3 flex-fill text-center rounded"&gt;Primary with a
+    &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+&lt;/div&gt;</codeblock>
+
+    <section id="with-components">
+      <title>With components</title>
+      <p>Theme utilities work great with components that support theming. Apply the
+        theme color to a container and use theme style classes on individual elements.</p>
+    </section>
+    <example>
+      <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>
+      <div outputclass="theme-danger">
+        <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>
+    </example>
+    <codeblock>&lt;div outputclass="theme-primary"&gt;
+  &lt;div outputclass="d-flex gap-2 mb-3"&gt;
+    &lt;ph outputclass="badge theme-contrast"&gt;Contrast badge&lt;/ph&gt;
+    &lt;ph outputclass="badge theme-subtle"&gt;Subtle badge&lt;/ph&gt;
+    &lt;ph outputclass="badge theme-muted"&gt;Muted badge&lt;/ph&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</codeblock>
+
+    <p>You can also mix theme colors within the same container by applying different
+      <codeph>theme-{color}</codeph> classes to child elements:</p>
+    <example>
+      <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>
+    </example>
+    <codeblock>&lt;div outputclass="d-flex gap-2"&gt;
+  &lt;div outputclass="theme-success theme-contrast p-3 rounded"&gt;Success&lt;/div&gt;
+  &lt;div outputclass="theme-warning theme-contrast p-3 rounded"&gt;Warning&lt;/div&gt;
+  &lt;div outputclass="theme-danger theme-contrast p-3 rounded"&gt;Danger&lt;/div&gt;
+&lt;/div&gt;</codeblock>
+
+  </body>
+</topic>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 93228357..79cacaf2 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -55,9 +55,11 @@
   <!-- Add a Bootstrap CSS border to codeblocks -->
   <xsl:template match="*[contains(@class, ' topic/pre ')]" mode="get-output-class">
     <xsl:choose>
-       <xsl:when test="@color">
-          <xsl:text>alert theme-</xsl:text>
-          <xsl:value-of select="@color"/>
+       <xsl:when test="@theme">
+          <xsl:text>alert </xsl:text>
+          <xsl:call-template name="theme-classes">
+            <xsl:with-param name="value" select="@theme"/>
+          </xsl:call-template>
           <xsl:text> </xsl:text>
        </xsl:when>
        <xsl:otherwise>
@@ -128,9 +130,11 @@
        <xsl:text> </xsl:text>
        <xsl:value-of select="$BOOTSTRAP_CSS_CARD_WIDTH"/>
     </xsl:if>
-    <xsl:if test="@color">
-       <xsl:text> theme-</xsl:text>
-       <xsl:value-of select="@color"/>
+    <xsl:if test="@theme">
+       <xsl:text> </xsl:text>
+       <xsl:call-template name="theme-classes">
+         <xsl:with-param name="value" select="@theme"/>
+       </xsl:call-template>
        <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:next-match/>
@@ -248,8 +252,11 @@
       <xsl:value-of select="ancestor::*[contains(@class,' bootstrap-d/pagination ')][1]/@outputclass"/>
       <xsl:text> </xsl:text>
     </xsl:if>
-    <xsl:if test="ancestor::*[contains(@class,' bootstrap-d/pagination ')][1]/@color">
-      <xsl:value-of select="concat('theme-', ancestor::*[contains(@class,' bootstrap-d/pagination ')][1]/@color, ' ')"/>
+    <xsl:if test="ancestor::*[contains(@class,' bootstrap-d/pagination ')][1]/@theme">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="ancestor::*[contains(@class,' bootstrap-d/pagination ')][1]/@theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:value-of select="$BOOTSTRAP_CSS_PAGINATION"/>
     <xsl:next-match/>
@@ -270,8 +277,11 @@
 
   <!-- Change the default Bootstrap CSS classes of alerts -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/alert ')]" mode="bootstrap-class" priority="10">
-    <xsl:if test="@color">
-      <xsl:value-of select="concat('theme-', @color, ' fg-emphasis-', @color, ' ')"/>
+    <xsl:if test="@theme">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="@theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:if test="*[contains(@class, ' topic/p ')]">
       <xsl:text>vstack </xsl:text>
@@ -322,22 +332,32 @@
     mode="bootstrap-class"
     priority="10"
   >
-    <xsl:value-of
-      select="
-        if (@style = 'none') then 'btn'
-        else if (@style = 'outline') then 'btn btn-outline'
-        else if (@style = 'subtle') then 'btn-subtle'
-        else if (@style = 'text') then 'btn-text'
-        else if (contains(@outputclass, 'btn-outline')) then 'btn'
-        else 'btn-solid'"
-    />
-    <xsl:if test="@color and not(@style = 'none')">
-      <xsl:text> theme-</xsl:text>
-      <xsl:value-of select="@color"/>
-    </xsl:if>
-    <xsl:if test="@gradient = 'yes' and not(@style = 'none')">
-      <xsl:text> btn-styled</xsl:text>
-    </xsl:if>
+    <xsl:choose>
+      <xsl:when test="@theme">
+        <!-- 'solid' is the default variant, so bare '{color}' and
+             '{color}-styled' imply '{color}-solid' / '{color}-solid-styled'. -->
+        <xsl:variable name="theme-parts" select="tokenize(@theme, '-')" as="xs:string*"/>
+        <xsl:variable
+          name="theme"
+          select="
+            if (count($theme-parts) = 1) then concat(@theme, '-solid')
+            else if (count($theme-parts) = 2 and $theme-parts[2] = 'styled')
+              then concat($theme-parts[1], '-solid-styled')
+            else @theme"
+        />
+        <xsl:call-template name="theme-classes">
+          <xsl:with-param name="value" select="$theme"/>
+          <xsl:with-param name="suffix-prefix" select="'btn'"/>
+        </xsl:call-template>
+      </xsl:when>
+      <xsl:when test="contains(@class, ' bootstrap-d/button ')"/>
+      <xsl:when test="contains(@outputclass, 'btn-outline')">
+        <xsl:text>btn</xsl:text>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:text>btn-solid</xsl:text>
+      </xsl:otherwise>
+    </xsl:choose>
     <xsl:text> </xsl:text>
     <xsl:choose>
       <xsl:when test="@size = 'xs'">btn-xs </xsl:when>
@@ -350,15 +370,11 @@
 
   <!-- Change the default Bootstrap CSS classes of badges -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/badge ')]" mode="bootstrap-class" priority="10">
-    <xsl:if test="@style = 'outline'">
-      <xsl:text>badge-outline </xsl:text>
-    </xsl:if>
-    <xsl:if test="@style = 'subtle'">
-      <xsl:text>badge-subtle </xsl:text>
-    </xsl:if>
-    <xsl:if test="@color and not(@style = 'none')">
-      <xsl:text>theme-</xsl:text>
-      <xsl:value-of select="@color"/>
+    <xsl:if test="@theme">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="@theme"/>
+        <xsl:with-param name="suffix-prefix" select="'badge'"/>
+      </xsl:call-template>
       <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:value-of select="concat(' ', $BOOTSTRAP_CSS_BADGE)"/>
@@ -367,9 +383,10 @@
 
   <!-- Change the default Bootstrap CSS classes of accordions -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/accordion ')]" mode="bootstrap-class" priority="10">
-    <xsl:if test="@color">
-      <xsl:text>theme-</xsl:text>
-      <xsl:value-of select="@color"/>
+    <xsl:if test="@theme">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="@theme"/>
+      </xsl:call-template>
       <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:next-match/>
@@ -377,9 +394,11 @@
 
   <!-- Change the default Bootstrap CSS classes of cards -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/card ')]" mode="bootstrap-class" priority="10">
-    <xsl:if test="@color">
-      <xsl:text>card theme-</xsl:text>
-      <xsl:value-of select="@color"/>
+    <xsl:if test="@theme">
+      <xsl:text>card </xsl:text>
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="@theme"/>
+      </xsl:call-template>
       <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:next-match/>
@@ -400,9 +419,10 @@
     mode="bootstrap-class"
     priority="11"
   >
-    <xsl:if test="@color">
-      <xsl:text>theme-</xsl:text>
-      <xsl:value-of select="@color"/>
+    <xsl:if test="@theme">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="@theme"/>
+      </xsl:call-template>
       <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:if test="@position">
@@ -420,9 +440,10 @@
     mode="bootstrap-class"
     priority="11"
   >
-    <xsl:if test="@color">
-      <xsl:text>theme-</xsl:text>
-      <xsl:value-of select="@color"/>
+    <xsl:if test="@theme">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="@theme"/>
+      </xsl:call-template>
       <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:if test="@position">
@@ -467,13 +488,14 @@
     mode="get-output-class"
   >
     <xsl:variable
-      name="parent-color"
-      select="ancestor::*[contains(@class, ' bootstrap-d/list-group ') or contains(@outputclass, 'list-group')][1]/@color"
+      name="parent-theme"
+      select="ancestor::*[contains(@class, ' bootstrap-d/list-group ') or contains(@outputclass, 'list-group')][1]/@theme"
     />
     <xsl:text>list-group-item </xsl:text>
-    <xsl:if test="$parent-color">
-       <xsl:text>text-</xsl:text>
-       <xsl:value-of select="$parent-color"/>
+    <xsl:if test="$parent-theme">
+       <xsl:call-template name="theme-classes">
+         <xsl:with-param name="value" select="$parent-theme"/>
+       </xsl:call-template>
        <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:next-match/>
@@ -670,10 +692,10 @@
     />
     <xsl:variable name="hasCustomTheme" select="some $c in tokenize(@outputclass, '\s+') satisfies $c = $themeClasses"/>
     <xsl:variable
-      name="noteColor"
+      name="noteTheme"
       select="
           if ($hasCustomTheme) then ''
-          else if (@color) then @color
+          else if (@theme) then @theme
           else if (@type='tip') then 'success'
           else if (@type='fastpath') then 'success'
           else if (@type='remember') then 'success'
@@ -689,8 +711,10 @@
           else if (@type='other') then ''
           else 'info'"
     />
-    <xsl:if test="string-length($noteColor) > 0">
-      <xsl:value-of select="concat('theme-', $noteColor, ' fg-emphasis-', $noteColor)"/>
+    <xsl:if test="string-length($noteTheme) > 0">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$noteTheme"/>
+      </xsl:call-template>
     </xsl:if>
   </xsl:template>
 
@@ -771,27 +795,25 @@
 
   <!-- Add a Bootstrap Link CSS color to xrefs and links -->
   <xsl:template
-    match="*[contains(@class, ' topic/xref ') or contains(@class, ' topic/link ')][@color][not(contains(@class, ' bootstrap-d/button '))][not(contains(@outputclass, 'btn-'))]"
+    match="*[contains(@class, ' topic/xref ') or contains(@class, ' topic/link ')][@theme][not(contains(@class, ' bootstrap-d/button '))][not(contains(@outputclass, 'btn-'))]"
     mode="get-output-class"
   >
-    <xsl:text>link theme-</xsl:text>
-    <xsl:value-of select="@color"/>
+    <xsl:text>link </xsl:text>
+    <xsl:call-template name="theme-classes">
+      <xsl:with-param name="value" select="@theme"/>
+    </xsl:call-template>
     <xsl:text> </xsl:text>
     <xsl:next-match/>
   </xsl:template>
 
   <!-- Process decorations (color, border, rounded, width) on any element -->
-  <xsl:template
-    match="*[@color or @border or @bordercolor or @rounded or @width]"
-    mode="get-output-class"
-    priority="-2"
-  >
+  <xsl:template match="*[@theme or @border or @rounded or @width]" mode="get-output-class" priority="-2">
     <xsl:if
-      test="@color and not(contains(@class, ' topic/note ') or 
-                                 contains(@class, ' topic/pre ') or 
-                                 contains(@class, ' topic/xref ') or 
-                                 contains(@class, ' topic/link ') or 
-                                 contains(@class, ' bootstrap-d/card ') or 
+      test="@theme and not(contains(@class, ' topic/note ') or
+                                 contains(@class, ' topic/pre ') or
+                                 contains(@class, ' topic/xref ') or
+                                 contains(@class, ' topic/link ') or
+                                 contains(@class, ' bootstrap-d/card ') or
                                  contains(@class, ' bootstrap-d/alert ') or
                                  contains(@class, ' bootstrap-d/badge ') or
                                  contains(@class, ' bootstrap-d/list-group ') or
@@ -805,31 +827,20 @@
                                  contains(@class, ' topic/row ') or
                                  contains(@class, ' topic/entry '))"
     >
-       <xsl:text>bg-</xsl:text>
-       <xsl:value-of select="@color"/>
-       <xsl:text> fg-contrast-</xsl:text>
-       <xsl:value-of select="@color"/>
+       <xsl:call-template name="theme-classes">
+         <xsl:with-param name="value" select="@theme"/>
+       </xsl:call-template>
        <xsl:text> </xsl:text>
     </xsl:if>
-    <xsl:if test="@border or @bordercolor">
+    <xsl:if test="@border">
        <xsl:choose>
           <xsl:when test="@border='no'">
              <xsl:text>border-0 </xsl:text>
           </xsl:when>
           <xsl:otherwise>
-             <xsl:if test="empty(@border) or @border='yes' or matches(@border, '^\d+$') or @bordercolor">
-                <xsl:text>border </xsl:text>
-             </xsl:if>
-             <xsl:if test="@border and @border != 'yes'">
-                <xsl:text>border-</xsl:text>
-                <xsl:value-of select="@border"/>
-                <xsl:text> </xsl:text>
-             </xsl:if>
-             <xsl:if test="@bordercolor">
-                <xsl:text>border-</xsl:text>
-                <xsl:value-of select="@bordercolor"/>
-                <xsl:text> </xsl:text>
-             </xsl:if>
+             <xsl:text>border border-</xsl:text>
+             <xsl:value-of select="@border"/>
+             <xsl:text> </xsl:text>
           </xsl:otherwise>
        </xsl:choose>
     </xsl:if>

From 4155dfc236bccd505ecb4d41ffc6f6edd3e4a311 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Wed, 12 Aug 2026 19:53:05 +0200
Subject: [PATCH 80/87] Updating docs

---
 sample/alerts.dita       |  38 ++++++-------
 sample/badge.dita        |  54 +++++++++---------
 sample/borders.dita      |  33 +++++------
 sample/button-group.dita |  40 ++++++-------
 sample/buttons.dita      | 120 +++++++++++++++++++--------------------
 sample/card.dita         |   4 +-
 sample/color.dita        |  54 +++++++++---------
 sample/drawer.dita       |   2 +-
 sample/icons.dita        |  28 ++++-----
 sample/pagination.dita   |  16 +++---
 sample/popovers.dita     |  12 ++--
 sample/rtl.dita          |   2 +-
 sample/shadows.dita      |   4 +-
 sample/spacing.dita      |  96 +++++++++++++++----------------
 sample/tables.dita       |  16 +++---
 sample/tooltips.dita     |  12 ++--
 16 files changed, 266 insertions(+), 265 deletions(-)

diff --git a/sample/alerts.dita b/sample/alerts.dita
index 38f0ee8b..3a4036c4 100644
--- a/sample/alerts.dita
+++ b/sample/alerts.dita
@@ -96,28 +96,28 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;alert color="primary"&gt;
+        <codeblock>&lt;alert theme="primary-subtle-border"&gt;
   A simple primary alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="secondary"&gt;
+&lt;alert theme="secondary-subtle-border"&gt;
   A simple secondary alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="success"&gt;
+&lt;alert theme="success-subtle-border"&gt;
   A simple success alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="danger"&gt;
+&lt;alert theme="danger-subtle-border"&gt;
   A simple danger alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="warning"&gt;
+&lt;alert theme="warning-subtle-border"&gt;
   A simple warning alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="info"&gt;
+&lt;alert theme="info-subtle-border"&gt;
   A simple info alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="accent"&gt;
+&lt;alert theme="accent-subtle-border"&gt;
   A simple accent alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="inverse"&gt;
+&lt;alert theme="inverse-subtle-border"&gt;
   A simple inverse alert — check it out!
 &lt;/alert&gt;</codeblock>
       </section>
@@ -153,7 +153,7 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;alert color="success" outputclass="vstack"&gt;
+        <codeblock>&lt;alert theme="success-contrast" outputclass="vstack"&gt;
   &lt;title&gt;&lt;icon outputclass="bi-emoji-smile" padding="e2"/&gt;Well done!&lt;/title&gt;
   &lt;p&gt;
     Aww yeah, you successfully read this important alert message. This example text with a
@@ -186,7 +186,7 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;alert color="primary"&gt;
+        <codeblock>&lt;alert theme="primary-subtle-border"&gt;
   &lt;div&gt;
     &lt;icon outputclass="bi-exclamation-triangle-fill flex-shrink-0" padding="e2"/&gt;An example alert with an icon
   &lt;/div&gt;
@@ -246,7 +246,7 @@
 &lt;note type="other" othertype="Another note"&gt;
   This is something other than a normal note.
 &lt;/note&gt;</codeblock>
-    <p>The default colors can be overridden by using a <xmlatt>color</xmlatt> attribute or an <xmlatt
+    <p>The default colors can be overridden by using a <xmlatt>theme</xmlatt> attribute or an <xmlatt
       >outputclass</xmlatt>.</p>
     <example>
       <note outputclass="theme-primary">This is a primary note.</note>
@@ -270,17 +270,17 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;note color="primary"&gt;
-  This is a primary note.
+        <codeblock>&lt;note theme="primary-contrast"&gt;
+  This is a high contrast primary note.
 &lt;/note&gt;
-&lt;note color="secondary"&gt;
-  This is a secondary note.
+&lt;note theme="secondary-contrast"&gt;
+  This is a high contrast secondary note.
 &lt;/note&gt;
-&lt;note color="accent"&gt;
-  This is accent note.
+&lt;note theme="accent-contrast"&gt;
+  This is a high contrast accent note.
 &lt;/note&gt;
-&lt;note color="inverse"&gt;
-  This is inverse note.
+&lt;note theme="inverse-contrast"&gt;
+  This is a high contrast inverse note.
 &lt;/note&gt;</codeblock>
       </section>
     </bodydiv>
diff --git a/sample/badge.dita b/sample/badge.dita
index 167fdf06..31408755 100644
--- a/sample/badge.dita
+++ b/sample/badge.dita
@@ -46,9 +46,9 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;badge color="primary"&gt;New&lt;/badge&gt;
-&lt;badge color="primary" subtle="yes"&gt;New&lt;/badge&gt;
-&lt;badge color="primary" outline="yes"&gt;New&lt;/badge&gt;</codeblock>
+        <codeblock>&lt;badge theme="primary"&gt;New&lt;/badge&gt;
+&lt;badge theme="primary-subtle"&gt;New&lt;/badge&gt;
+&lt;badge theme="primary-outline"&gt;New&lt;/badge&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -147,32 +147,32 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;badge color="primary"&gt;Primary&lt;/badge&gt;
-&lt;badge color="secondary"&gt;Secondary&lt;/badge&gt;
-&lt;badge color="success"&gt;Success&lt;/badge&gt;
-&lt;badge color="danger"&gt;Danger&lt;/badge&gt;
-&lt;badge color="warning"&gt;Warning&lt;/badge&gt;
-&lt;badge color="info"&gt;Info&lt;/badge&gt;
-&lt;badge color="accent"&gt;Accent&lt;/badge&gt;
-&lt;badge color="inverse"&gt;Inverse&lt;/badge&gt;
+          <codeblock>&lt;badge theme="primary"&gt;Primary&lt;/badge&gt;
+&lt;badge theme="secondary"&gt;Secondary&lt;/badge&gt;
+&lt;badge theme="success"&gt;Success&lt;/badge&gt;
+&lt;badge theme="danger"&gt;Danger&lt;/badge&gt;
+&lt;badge theme="warning"&gt;Warning&lt;/badge&gt;
+&lt;badge theme="info"&gt;Info&lt;/badge&gt;
+&lt;badge theme="accent"&gt;Accent&lt;/badge&gt;
+&lt;badge theme="inverse"&gt;Inverse&lt;/badge&gt;
 
-&lt;badge color="primary" subtle="yes"&gt;Primary&lt;/badge&gt;
-&lt;badge color="secondary" subtle="yes"&gt;Secondary&lt;/badge&gt;
-&lt;badge color="success" subtle="yes"&gt;Success&lt;/badge&gt;
-&lt;badge color="danger" subtle="yes"&gt;Danger&lt;/badge&gt;
-&lt;badge color="warning" subtle="yes"&gt;Warning&lt;/badge&gt;
-&lt;badge color="info" subtle="yes"&gt;Info&lt;/badge&gt;
-&lt;badge color="accent" subtle="yes"&gt;Accent&lt;/badge&gt;
-&lt;badge color="inverse" subtle="yes"&gt;Inverse&lt;/badge&gt;
+&lt;badge theme="primary-subtle"&gt;Primary&lt;/badge&gt;
+&lt;badge theme="secondary-subtle"&gt;Secondary&lt;/badge&gt;
+&lt;badge theme="success-subtle"&gt;Success&lt;/badge&gt;
+&lt;badge theme="danger-subtle"&gt;Danger&lt;/badge&gt;
+&lt;badge theme="warning-subtle"&gt;Warning&lt;/badge&gt;
+&lt;badge theme="info-subtle"&gt;Info&lt;/badge&gt;
+&lt;badge theme="accent-subtle"&gt;Accent&lt;/badge&gt;
+&lt;badge theme="inverse-subtle"&gt;Inverse&lt;/badge&gt;
 
-&lt;badge color="primary" outline="yes"&gt;Primary&lt;/badge&gt;
-&lt;badge color="secondary" outline="yes"&gt;Secondary&lt;/badge&gt;
-&lt;badge color="success" outline="yes"&gt;Success&lt;/badge&gt;
-&lt;badge color="danger" outline="yes"&gt;Danger&lt;/badge&gt;
-&lt;badge color="warning" outline="yes"&gt;Warning&lt;/badge&gt;
-&lt;badge color="info" outline="yes"&gt;Info&lt;/badge&gt;
-&lt;badge color="accent" outline="yes"&gt;Accent&lt;/badge&gt;
-&lt;badge color="inverse" outline="yes"&gt;Inverse&lt;/badge&gt;</codeblock>
+&lt;badge theme="primary-outline"&gt;Primary&lt;/badge&gt;
+&lt;badge theme="secondary-outline"&gt;Secondary&lt;/badge&gt;
+&lt;badge theme="success-outline"&gt;Success&lt;/badge&gt;
+&lt;badge theme="danger-outline"&gt;Danger&lt;/badge&gt;
+&lt;badge theme="warning-outline"&gt;Warning&lt;/badge&gt;
+&lt;badge theme="info-outline"&gt;Info&lt;/badge&gt;
+&lt;badge theme="accent-outline"&gt;Accent&lt;/badge&gt;
+&lt;badge theme="inverse-outline"&gt;Inverse&lt;/badge&gt;</codeblock>
         </section>
       </bodydiv>
   </body>
diff --git a/sample/borders.dita b/sample/borders.dita
index a9c03e53..c85443e5 100644
--- a/sample/borders.dita
+++ b/sample/borders.dita
@@ -90,15 +90,15 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;section border="yes" padding="2"&gt;
+        <codeblock>&lt;section border="1" padding="2"&gt;
   ...
 &lt;/section&gt;
 
-&lt;div border="yes" rounded="yes" padding="2" margin="2"&gt;
+&lt;div border="1" rounded="yes" padding="2" margin="2"&gt;
   ...
 &lt;/div&gt;
 
-&lt;carousel border="yes" rounded="yes" margin="2" width="50"&gt;
+&lt;carousel border="1" rounded="yes" margin="2" width="50"&gt;
   &lt;carousel-item&gt;
     &lt;image href="..."/&gt;
   &lt;/carousel-item&gt;
@@ -113,7 +113,8 @@
       <p>The <xmlatt>border</xmlatt> attribute also accepts numeric values 1-5 for width. The <xmlatt
         >rounded</xmlatt> attribute 
         supports values 0-5, <codeph>circle</codeph> and <codeph>pill</codeph>.
-        The <xmlatt>bordercolor</xmlatt> attribute can be used to set the color of the border.</p>
+        The <codeph>-border</codeph> theme suffix (e.g. <codeph>theme="primary-border"</codeph>) can be used to set
+        the color of the border.</p>
     </section>
 
     <example>
@@ -162,10 +163,10 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;ph bordercolor="primary"&gt;Primary&lt;/ph&gt;
-&lt;ph bordercolor="primary-subtle"&gt;Primary subtle&lt;/ph&gt;
-&lt;ph bordercolor="success"&gt;Success&lt;/ph&gt;
-&lt;ph bordercolor="danger"&gt;Danger&lt;/ph&gt;</codeblock>
+        <codeblock>&lt;ph theme="primary-border"&gt;Primary&lt;/ph&gt;
+&lt;ph theme="primary-subtle-border"&gt;Primary subtle&lt;/ph&gt;
+&lt;ph theme="success-border"&gt;Success&lt;/ph&gt;
+&lt;ph theme="danger-border"&gt;Danger&lt;/ph&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -191,12 +192,12 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;ph border="yes" rounded="0"&gt;Rounded 0&lt;/ph&gt;
-&lt;ph border="yes" rounded="1"&gt;Rounded 1&lt;/ph&gt;
-&lt;ph border="yes" rounded="2"&gt;Rounded 2&lt;/ph&gt;
-&lt;ph border="yes" rounded="3"&gt;Rounded 3&lt;/ph&gt;
-&lt;ph border="yes" rounded="4"&gt;Rounded 4&lt;/ph&gt;
-&lt;ph border="yes" rounded="5"&gt;Rounded 5&lt;/ph&gt;</codeblock>
+        <codeblock>&lt;ph border="1" rounded="0"&gt;Rounded 0&lt;/ph&gt;
+&lt;ph border="1" rounded="1"&gt;Rounded 1&lt;/ph&gt;
+&lt;ph border="1" rounded="2"&gt;Rounded 2&lt;/ph&gt;
+&lt;ph border="1" rounded="3"&gt;Rounded 3&lt;/ph&gt;
+&lt;ph border="1" rounded="4"&gt;Rounded 4&lt;/ph&gt;
+&lt;ph border="1" rounded="5"&gt;Rounded 5&lt;/ph&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -214,8 +215,8 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;ph border="yes" rounded="circle" bordercolor="info"&gt;Circle&lt;/ph&gt;
-&lt;ph border="yes" rounded="pill" bordercolor="warning"&gt;Pill&lt;/ph&gt;</codeblock>
+        <codeblock>&lt;ph border="1" rounded="circle" theme="info-border"&gt;Circle&lt;/ph&gt;
+&lt;ph border="1" rounded="pill" theme="warning-border"&gt;Pill&lt;/ph&gt;</codeblock>
       </section>
     </bodydiv>
 
diff --git a/sample/button-group.dita b/sample/button-group.dita
index 09384d0b..e6f5eb12 100644
--- a/sample/button-group.dita
+++ b/sample/button-group.dita
@@ -48,9 +48,9 @@
       <section>
         <title>Specialization</title>
         <codeblock>&lt;button-group&gt;
-  &lt;button color="primary" href="#"&gt;Left&lt;/button&gt;
-  &lt;button color="primary" href="#"&gt;Middle&lt;/button&gt;
-  &lt;button color="primary" href="#"&gt;Right&lt;/button&gt;
+  &lt;button theme="primary" href="#"&gt;Left&lt;/button&gt;
+  &lt;button theme="primary" href="#"&gt;Middle&lt;/button&gt;
+  &lt;button theme="primary" href="#"&gt;Right&lt;/button&gt;
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
@@ -76,9 +76,9 @@
         <section>
         <title>Specialization</title>
         <codeblock>&lt;button-group&gt;
-  &lt;button color="danger" href="#"&gt;Left&lt;/button&gt;
-  &lt;button color="warning" href="#"&gt;Middle&lt;/button&gt;
-  &lt;button color="success" href="#"&gt;Right&lt;/button&gt;
+  &lt;button theme="danger" href="#"&gt;Left&lt;/button&gt;
+  &lt;button theme="warning" href="#"&gt;Middle&lt;/button&gt;
+  &lt;button theme="success" href="#"&gt;Right&lt;/button&gt;
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
@@ -104,9 +104,9 @@
         <section>
         <title>Specialization</title>
           <codeblock>&lt;button-group&gt;
-  &lt;button color="primary" style="outline" href="#"&gt;Left&lt;/button&gt;
-  &lt;button color="primary" style="outline" href="#"&gt;Middle&lt;/button&gt;
-  &lt;button color="primary" style="outline" href="#"&gt;Right&lt;/button&gt;
+  &lt;button theme="primary-outline" href="#"&gt;Left&lt;/button&gt;
+  &lt;button theme="primary-outline" href="#"&gt;Middle&lt;/button&gt;
+  &lt;button theme="primary-outline" href="#"&gt;Right&lt;/button&gt;
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
@@ -156,18 +156,18 @@
         <title>Specialization</title>
           <codeblock>&lt;button-toolbar&gt;
   &lt;button-group outputclass="me-2"&gt;
-    &lt;button color="primary" href="#"&gt;1&lt;/button&gt;
-    &lt;button color="primary" href="#"&gt;2&lt;/button&gt;
-    &lt;button color="primary" href="#"&gt;3&lt;/button&gt;
-    &lt;button color="primary" href="#"&gt;4&lt;/button&gt;
+    &lt;button theme="primary" href="#"&gt;1&lt;/button&gt;
+    &lt;button theme="primary" href="#"&gt;2&lt;/button&gt;
+    &lt;button theme="primary" href="#"&gt;3&lt;/button&gt;
+    &lt;button theme="primary" href="#"&gt;4&lt;/button&gt;
   &lt;/button-group&gt;
   &lt;button-group outputclass="me-2"&gt;
-    &lt;button color="secondary" href="#"&gt;5&lt;/button&gt;
-    &lt;button color="secondary" href="#"&gt;6&lt;/button&gt;
-    &lt;button color="secondary" href="#"&gt;7&lt;/button&gt;
+    &lt;button theme="secondary" href="#"&gt;5&lt;/button&gt;
+    &lt;button theme="secondary" href="#"&gt;6&lt;/button&gt;
+    &lt;button theme="secondary" href="#"&gt;7&lt;/button&gt;
   &lt;/button-group&gt;
   &lt;button-group outputclass="me-2"&gt;
-    &lt;button color="info" href="#"&gt;8&lt;/button&gt;
+    &lt;button theme="info" href="#"&gt;8&lt;/button&gt;
   &lt;/button-group&gt;
 &lt;/button-toolbar&gt;</codeblock>
         </section>
@@ -195,9 +195,9 @@
       <section>
       <title>Specialization</title>
       <codeblock>&lt;button-group vertical="yes"&gt;
-  &lt;button color="primary" href="#"&gt;Top&lt;/button&gt;
-  &lt;button color="primary" href="#"&gt;Middle&lt;/button&gt;
-  &lt;button color="primary" href="#"&gt;Bottom&lt;/button&gt;
+  &lt;button theme="primary" href="#"&gt;Top&lt;/button&gt;
+  &lt;button theme="primary" href="#"&gt;Middle&lt;/button&gt;
+  &lt;button theme="primary" href="#"&gt;Bottom&lt;/button&gt;
 &lt;/button-group&gt;</codeblock>
       </section>
     </bodydiv>
diff --git a/sample/buttons.dita b/sample/buttons.dita
index f23b02d3..9a7f5809 100644
--- a/sample/buttons.dita
+++ b/sample/buttons.dita
@@ -40,7 +40,7 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;button style="none"&gt;Base class&lt;/button&gt;</codeblock>
+        <codeblock>&lt;button&gt;Base class&lt;/button&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -74,14 +74,14 @@
         </section>
           <section>
           <title>Specialization</title>
-          <codeblock>&lt;button href="#" color="primary"&gt;Primary&lt;/button&gt;
-&lt;button href="#" color="secondary"&gt;Secondary&lt;/button&gt;
-&lt;button href="#" color="success"&gt;Success&lt;/button&gt;
-&lt;button href="#" color="danger"&gt;Danger&lt;/button&gt;
-&lt;button href="#" color="warning"&gt;Warning&lt;/button&gt;
-&lt;button href="#" color="info"&gt;Info&lt;/button&gt;
-&lt;button href="#" color="accent"&gt;Accent&lt;/button&gt;
-&lt;button href="#" color="inverse"&gt;Inverse&lt;/button&gt;</codeblock>
+          <codeblock>&lt;button href="#" theme="primary"&gt;Primary&lt;/button&gt;
+&lt;button href="#" theme="secondary"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" theme="success"&gt;Success&lt;/button&gt;
+&lt;button href="#" theme="danger"&gt;Danger&lt;/button&gt;
+&lt;button href="#" theme="warning"&gt;Warning&lt;/button&gt;
+&lt;button href="#" theme="info"&gt;Info&lt;/button&gt;
+&lt;button href="#" theme="accent"&gt;Accent&lt;/button&gt;
+&lt;button href="#" theme="inverse"&gt;Inverse&lt;/button&gt;</codeblock>
         </section>
       </bodydiv>
 
@@ -242,38 +242,38 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;button href="#" color="primary"&gt;Primary&lt;/button&gt;
-&lt;button href="#" color="primary" style="outline"&gt;Primary&lt;/button&gt;
-&lt;button href="#" color="primary" style="subtle"&gt;Primary&lt;/button&gt;
-&lt;button href="#" color="primary" style="text"&gt;Primary&lt;/button&gt;
-&lt;button href="#" color="secondary"&gt;Secondary&lt;/button&gt;
-&lt;button href="#" color="secondary" style="outline"&gt;Secondary&lt;/button&gt;
-&lt;button href="#" color="secondary" style="subtle"&gt;Secondary&lt;/button&gt;
-&lt;button href="#" color="secondary" style="text"&gt;Secondary&lt;/button&gt;
-&lt;button href="#" color="success"&gt;Success&lt;/button&gt;
-&lt;button href="#" color="success" style="outline"&gt;Success&lt;/button&gt;
-&lt;button href="#" color="success" style="subtle"&gt;Success&lt;/button&gt;
-&lt;button href="#" color="success" style="text"&gt;Success&lt;/button&gt;
-&lt;button href="#" color="danger"&gt;Danger&lt;/button&gt;
-&lt;button href="#" color="danger" style="outline"&gt;Danger&lt;/button&gt;
-&lt;button href="#" color="danger" style="subtle"&gt;Danger&lt;/button&gt;
-&lt;button href="#" color="danger" style="text"&gt;Danger&lt;/button&gt;
-&lt;button href="#" color="warning"&gt;Warning&lt;/button&gt;
-&lt;button href="#" color="warning" style="outline"&gt;Warning&lt;/button&gt;
-&lt;button href="#" color="warning" style="subtle"&gt;Warning&lt;/button&gt;
-&lt;button href="#" color="warning" style="text"&gt;Warning&lt;/button&gt;
-&lt;button href="#" color="info"&gt;Info&lt;/button&gt;
-&lt;button href="#" color="info" style="outline"&gt;Info&lt;/button&gt;
-&lt;button href="#" color="info" style="subtle"&gt;Info&lt;/button&gt;
-&lt;button href="#" color="info" style="text"&gt;Info&lt;/button&gt;
-&lt;button href="#" color="accent"&gt;Accent&lt;/button&gt;
-&lt;button href="#" color="accent" style="outline"&gt;Accent&lt;/button&gt;
-&lt;button href="#" color="accent" style="subtle"&gt;Accent&lt;/button&gt;
-&lt;button href="#" color="accent" style="text"&gt;Accent&lt;/button&gt;
-&lt;button href="#" color="inverse"&gt;Inverse&lt;/button&gt;
-&lt;button href="#" color="inverse" style="outline"&gt;Inverse&lt;/button&gt;
-&lt;button href="#" color="inverse" style="subtle"&gt;Inverse&lt;/button&gt;
-&lt;button href="#" color="inverse" style="text"&gt;Inverse&lt;/button&gt;</codeblock>
+        <codeblock>&lt;button href="#" theme="primary"&gt;Primary&lt;/button&gt;
+&lt;button href="#" theme="primary-outline"&gt;Primary&lt;/button&gt;
+&lt;button href="#" theme="primary-subtle"&gt;Primary&lt;/button&gt;
+&lt;button href="#" theme="primary-text"&gt;Primary&lt;/button&gt;
+&lt;button href="#" theme="secondary"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" theme="secondary-outline"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" theme="secondary-subtle"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" theme="secondary-text"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" theme="success"&gt;Success&lt;/button&gt;
+&lt;button href="#" theme="success-outline"&gt;Success&lt;/button&gt;
+&lt;button href="#" theme="success-subtle"&gt;Success&lt;/button&gt;
+&lt;button href="#" theme="success-text"&gt;Success&lt;/button&gt;
+&lt;button href="#" theme="danger"&gt;Danger&lt;/button&gt;
+&lt;button href="#" theme="danger-outline"&gt;Danger&lt;/button&gt;
+&lt;button href="#" theme="danger-subtle"&gt;Danger&lt;/button&gt;
+&lt;button href="#" theme="danger-text"&gt;Danger&lt;/button&gt;
+&lt;button href="#" theme="warning"&gt;Warning&lt;/button&gt;
+&lt;button href="#" theme="warning-outline"&gt;Warning&lt;/button&gt;
+&lt;button href="#" theme="warning-subtle"&gt;Warning&lt;/button&gt;
+&lt;button href="#" theme="warning-text"&gt;Warning&lt;/button&gt;
+&lt;button href="#" theme="info"&gt;Info&lt;/button&gt;
+&lt;button href="#" theme="info-outline"&gt;Info&lt;/button&gt;
+&lt;button href="#" theme="info-subtle"&gt;Info&lt;/button&gt;
+&lt;button href="#" theme="info-text"&gt;Info&lt;/button&gt;
+&lt;button href="#" theme="accent"&gt;Accent&lt;/button&gt;
+&lt;button href="#" theme="accent-outline"&gt;Accent&lt;/button&gt;
+&lt;button href="#" theme="accent-subtle"&gt;Accent&lt;/button&gt;
+&lt;button href="#" theme="accent-text"&gt;Accent&lt;/button&gt;
+&lt;button href="#" theme="inverse"&gt;Inverse&lt;/button&gt;
+&lt;button href="#" theme="inverse-outline"&gt;Inverse&lt;/button&gt;
+&lt;button href="#" theme="inverse-subtle"&gt;Inverse&lt;/button&gt;
+&lt;button href="#" theme="inverse-text"&gt;Inverse&lt;/button&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -307,14 +307,14 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;button href="#" color="primary" gradient="yes"&gt;Primary&lt;/button&gt;
-&lt;button href="#" color="secondary" gradient="yes"&gt;Secondary&lt;/button&gt;
-&lt;button href="#" color="success" gradient="yes"&gt;Success&lt;/button&gt;
-&lt;button href="#" color="danger" gradient="yes"&gt;Danger&lt;/button&gt;
-&lt;button href="#" color="warning" gradient="yes"&gt;Warning&lt;/button&gt;
-&lt;button href="#" color="info" gradient="yes"&gt;Info&lt;/button&gt;
-&lt;button href="#" color="accent" gradient="yes"&gt;Accent&lt;/button&gt;
-&lt;button href="#" color="inverse" gradient="yes"&gt;Inverse&lt;/button&gt;</codeblock>
+        <codeblock>&lt;button href="#" theme="primary-styled"&gt;Primary&lt;/button&gt;
+&lt;button href="#" theme="secondary-styled"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" theme="success-styled"&gt;Success&lt;/button&gt;
+&lt;button href="#" theme="danger-styled"&gt;Danger&lt;/button&gt;
+&lt;button href="#" theme="warning-styled"&gt;Warning&lt;/button&gt;
+&lt;button href="#" theme="info-styled"&gt;Info&lt;/button&gt;
+&lt;button href="#" theme="accent-styled"&gt;Accent&lt;/button&gt;
+&lt;button href="#" theme="inverse-styled"&gt;Inverse&lt;/button&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -349,14 +349,14 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;button href="#" style="outline"&gt;Primary&lt;/button&gt;
-&lt;button href="#" color="secondary" style="outline"&gt;Secondary&lt;/button&gt;
-&lt;button href="#" color="success" style="outline"&gt;Success&lt;/button&gt;
-&lt;button href="#" color="danger" style="outline"&gt;Danger&lt;/button&gt;
-&lt;button href="#" color="warning" style="outline"&gt;Warning&lt;/button&gt;
-&lt;button href="#" color="info" style="outline"&gt;Info&lt;/button&gt;
-&lt;button href="#" color="accent" style="outline"&gt;Accent&lt;/button&gt;
-&lt;button href="#" color="inverse" style="outline"&gt;Inverse&lt;/button&gt;</codeblock>
+          <codeblock>&lt;button href="#" theme="primary-outline"&gt;Primary&lt;/button&gt;
+&lt;button href="#" theme="secondary-outline"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" theme="success-outline"&gt;Success&lt;/button&gt;
+&lt;button href="#" theme="danger-outline"&gt;Danger&lt;/button&gt;
+&lt;button href="#" theme="warning-outline"&gt;Warning&lt;/button&gt;
+&lt;button href="#" theme="info-outline"&gt;Info&lt;/button&gt;
+&lt;button href="#" theme="accent-outline"&gt;Accent&lt;/button&gt;
+&lt;button href="#" theme="inverse-outline"&gt;Inverse&lt;/button&gt;</codeblock>
         </section>
       </bodydiv>
     <section id="sizing">
@@ -378,7 +378,7 @@
          <section>
         <title>Specialization</title>
           <codeblock>&lt;button href="#" size="large"&gt;Large button&lt;/button&gt;
-&lt;button href="#" color="secondary" size="large"&gt;Large button&lt;/button&gt;</codeblock>
+&lt;button href="#" theme="secondary" size="large"&gt;Large button&lt;/button&gt;</codeblock>
         </section>
       </bodydiv>
 
@@ -396,7 +396,7 @@
          <section>
         <title>Specialization</title>
           <codeblock>&lt;button href="#" size="small"&gt;Small button&lt;/button&gt;
-&lt;button href="#" color="secondary" size="small"&gt;Small button&lt;/button&gt;</codeblock>
+&lt;button href="#" theme="secondary" size="small"&gt;Small button&lt;/button&gt;</codeblock>
         </section>
       </bodydiv>
 
@@ -414,7 +414,7 @@
          <section>
         <title>Specialization</title>
           <codeblock>&lt;button href="#" size="xs"&gt;Extra small button&lt;/button&gt;
-&lt;button href="#" color="secondary" size="xs"&gt;Extra small button&lt;/button&gt;</codeblock>
+&lt;button href="#" theme="secondary" size="xs"&gt;Extra small button&lt;/button&gt;</codeblock>
         </section>
       </bodydiv>
   </body>
diff --git a/sample/card.dita b/sample/card.dita
index 60c4302a..a4067c2c 100644
--- a/sample/card.dita
+++ b/sample/card.dita
@@ -182,7 +182,7 @@
       </bodydiv>
     <section id="card-colors">
       <title>Card Colors</title>
-      <p>A card can be colorized by adding a <xmlatt>color</xmlatt> attribute. This
+      <p>A card can be colorized by adding a <xmlatt>theme</xmlatt> attribute. This
         applies a contextual background color.</p>
     </section>
     <bodydiv outputclass="p-3 border">
@@ -193,7 +193,7 @@
         <xref href="#" outputclass="btn-solid theme-primary">Go Somewhere</xref>
       </section>
     </bodydiv>
-    <codeblock>&lt;card color="success"&gt;
+    <codeblock>&lt;card theme="success"&gt;
   &lt;title&gt;Card Title&lt;/title&gt;
   &lt;div outputclass="card-header"&gt;Success Card&lt;/div&gt;
   &lt;p&gt;Some quick example text to build on the card title and make up the bulk of the card’s content.&lt;/p&gt;
diff --git a/sample/color.dita b/sample/color.dita
index 1f02ca87..dfa46a20 100644
--- a/sample/color.dita
+++ b/sample/color.dita
@@ -3,7 +3,7 @@
 <topic id="color">
   <title>Color</title>
   <shortdesc>Convey meaning through <codeph>color</codeph> with a handful of color utility classes. Includes support for
-    styling text and background colors via the semantic <xmlatt>color</xmlatt> attribute.</shortdesc>
+    styling text and background colors via the semantic <xmlatt>theme</xmlatt> attribute.</shortdesc>
   <prolog>
     <metadata>
       <keywords>
@@ -12,7 +12,7 @@
         <indexterm>CSS
           <indexterm><xmlatt>outputclass</xmlatt></indexterm>
         </indexterm>
-        <indexterm><xmlatt>color</xmlatt></indexterm>
+        <indexterm><xmlatt>theme</xmlatt></indexterm>
       </keywords>
     </metadata>
   </prolog>
@@ -20,7 +20,7 @@
     <section id="colors">
       <title>Colors</title>
       <p>Colorize text and backgrounds with color utilities. The <xmlatt
-        >color</xmlatt> attribute provides a semantic way to apply standard Bootstrap color themes.</p>
+        >theme</xmlatt> attribute provides a semantic way to apply standard Bootstrap color themes.</p>
     </section>
 
     <example>
@@ -48,14 +48,14 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;div color="primary"&gt;bg-primary&lt;/div&gt;
-&lt;div color="secondary"&gt;bg-secondary&lt;/div&gt;
-&lt;div color="success"&gt;bg-success&lt;/div&gt;
-&lt;div color="danger"&gt;bg-danger&lt;/div&gt;
-&lt;div color="warning"&gt;bg-warning&lt;/div&gt;
-&lt;div color="info"&gt;bg-info&lt;/div&gt;
-&lt;div color="accent"&gt;bg-accent&lt;/div&gt;
-&lt;div color="inverse"&gt;bg-inverse&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div theme="primary-contrast"&gt;bg-primary&lt;/div&gt;
+&lt;div theme="secondary-contrast"&gt;bg-secondary&lt;/div&gt;
+&lt;div theme="success-contrast"&gt;bg-success&lt;/div&gt;
+&lt;div theme="danger-contrast"&gt;bg-danger&lt;/div&gt;
+&lt;div theme="warning-contrast"&gt;bg-warning&lt;/div&gt;
+&lt;div theme="info-contrast"&gt;bg-info&lt;/div&gt;
+&lt;div theme="accent-contrast"&gt;bg-accent&lt;/div&gt;
+&lt;div theme="inverse-contrast"&gt;bg-inverse&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -164,30 +164,30 @@
   &lt;/tgroup&gt;
 &lt;/table&gt;
 
-&lt;note color="primary"&gt;
+&lt;note outputclass="theme-primary theme-contrast"&gt;
   ...
 &lt;/note&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;section color="primary"&gt;
+        <codeblock>&lt;section theme="primary-contrast"&gt;
   &lt;title&gt;Section Decoration&lt;/title&gt;
   &lt;p&gt;This section has a primary color background.&lt;/p&gt;
 &lt;/section&gt;
 
-&lt;div color="success" padding="3"&gt;
+&lt;div theme="success-contrast" padding="3"&gt;
   &lt;p&gt;This div has a success color background.&lt;/p&gt;
 &lt;/div&gt;
 
-&lt;pre color="warning"&gt;
+&lt;pre theme="warning-contrast"&gt;
   This pre has a warning color background.
 &lt;/pre&gt;
 
-&lt;lq color="danger" padding="1"&gt;
+&lt;lq theme="danger-contrast" padding="1"&gt;
   This is a long quote with a danger color background.
 &lt;/lq&gt;
 
-&lt;table color="primary" padding="1" width="100"&gt;
+&lt;table theme="primary" padding="1" width="100"&gt;
   &lt;tgroup cols="2"&gt;
     &lt;thead&gt;
       &lt;row&gt;
@@ -196,15 +196,15 @@
       &lt;/row&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
-      &lt;row color="info"&gt;
+      &lt;row theme="info"&gt;
         ...
       &lt;/row&gt;
-      &lt;row color="success"&gt;
+      &lt;row theme="success"&gt;
         ...
       &lt;/row&gt;
       &lt;row&gt;
         &lt;entry&gt;...&lt;/entry&gt;
-        &lt;entry color="danger"&gt;...&lt;/entry&gt;
+        &lt;entry theme="danger"&gt;...&lt;/entry&gt;
       &lt;/row&gt;
       &lt;row&gt;
         ...
@@ -213,7 +213,7 @@
   &lt;/tgroup&gt;
 &lt;/table&gt;
 
-&lt;note color="primary"&gt;
+&lt;note theme="primary-contrast"&gt;
   This is a note with a primary color theme.
 &lt;/note&gt;</codeblock>
       </section>
@@ -221,7 +221,7 @@
 
     <section id="specialized-elements">
       <title>Specialized Elements</title>
-      <p>Many specialized components also support the <xmlatt>color</xmlatt> attribute for consistent theming.</p>
+      <p>Many specialized components also support the <xmlatt>theme</xmlatt> attribute for consistent theming.</p>
     </section>
 
     <bodydiv outputclass="p-3 border">
@@ -281,26 +281,26 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;thumbnail href="..." color="warning"/&gt;
+        <codeblock>&lt;thumbnail href="..." theme="warning-contrast"/&gt;
 
-&lt;card color="success" width="50"&gt;
+&lt;card theme="success-contrast" width="50"&gt;
   &lt;title&gt;Card Title&lt;/title&gt;
   &lt;p&gt;Some quick example text to build on the card title and make up the bulk of the card’s content.&lt;/p&gt;
 &lt;/card&gt;
 
-&lt;accordion color="info"&gt;
+&lt;accordion theme="info-contrast"&gt;
   &lt;accordion-item open="yes"&gt;
     &lt;title&gt;Accordion Item #1&lt;/title&gt;
     &lt;p&gt;This is the first item's accordion body.&lt;/p&gt;
   &lt;/accordion-item&gt;
 &lt;/accordion&gt;
 
-&lt;list-group width="50" color="danger"&gt;
+&lt;list-group width="50" theme="danger-contrast"&gt;
   &lt;li&gt;An item&lt;/li&gt;
   &lt;li&gt;A second item&lt;/li&gt;
 &lt;/list-group&gt;
 
-&lt;carousel color="inverse" width="50" indicators="yes"&gt;
+&lt;carousel theme="inverse-contrast" width="50" indicators="yes"&gt;
   &lt;carousel-item&gt;
     &lt;image href="..."/&gt;
   &lt;/carousel-item&gt;
diff --git a/sample/drawer.dita b/sample/drawer.dita
index e88a3590..6b07bd05 100644
--- a/sample/drawer.dita
+++ b/sample/drawer.dita
@@ -196,7 +196,7 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;note color="info" outputclass="d-none lg:d-block"&gt;
+          <codeblock>&lt;note theme="info-contrast" outputclass="d-none lg:d-block"&gt;
   Resize your browser to show the responsive drawer toggle.
 &lt;/note&gt;
 &lt;button outputclass="lg:d-none" props="drawer-toggle" href="#drawer4"&gt;
diff --git a/sample/icons.dita b/sample/icons.dita
index 27307771..48a0e91f 100644
--- a/sample/icons.dita
+++ b/sample/icons.dita
@@ -128,28 +128,28 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;xref color="primary" href="#"&gt;
+          <codeblock>&lt;xref theme="primary-contrast" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Primary link
 &lt;/xref&gt;
-&lt;xref color="secondary" href="#"&gt;
+&lt;xref theme="secondary-contrast" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Secondary link
 &lt;/xref&gt;
-&lt;xref color="success" href="#"&gt;
+&lt;xref theme="success-contrast" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Success link
 &lt;/xref&gt;
-&lt;xref color="danger" href="#"&gt;
+&lt;xref theme="danger-contrast" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Danger link
 &lt;/xref&gt;
-&lt;xref color="warning" href="#"&gt;
+&lt;xref theme="warning-contrast" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Warning link
 &lt;/xref&gt;
-&lt;xref color="info" href="#"&gt;
+&lt;xref theme="info-contrast" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Info link
 &lt;/xref&gt;
-&lt;xref color="accent" href="#"&gt;
+&lt;xref theme="accent-contrast" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Accent link
 &lt;/xref&gt;
-&lt;xref color="inverse" href="#"&gt;
+&lt;xref theme="inverse-contrast" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Inverse link
 &lt;/xref&gt;</codeblock>
         </section>
@@ -187,22 +187,22 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;button color="primary" outputclass="btn-icon" href="#"&gt;
+          <codeblock>&lt;button theme="primary" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-arrow-down-square-fill"/&gt;
 &lt;/button&gt;
-&lt;button color="secondary" outputclass="btn-icon" href="#"&gt;
+&lt;button theme="secondary" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-chat-left-quote-fill"/&gt;
 &lt;/button&gt;
-&lt;button color="warning" outputclass="btn-icon" href="#"&gt;
+&lt;button theme="warning" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-speedometer"/&gt;
 &lt;/button&gt;
-&lt;button color="info" outputclass="btn-icon" href="#"&gt;
+&lt;button theme="info" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-camera-fill"/&gt;
 &lt;/button&gt;
-&lt;button color="accent" outputclass="btn-icon" href="#"&gt;
+&lt;button theme="accent" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt;
 &lt;/button&gt;
-&lt;button color="danger" outputclass="btn-icon" href="#"&gt;
+&lt;button theme="danger" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-share-fill"/&gt;
 &lt;/button&gt;</codeblock>
         </section>
diff --git a/sample/pagination.dita b/sample/pagination.dita
index b4ee7e03..ef57b76e 100644
--- a/sample/pagination.dita
+++ b/sample/pagination.dita
@@ -230,7 +230,7 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;pagination color="primary"&gt;
+        <codeblock>&lt;pagination theme="primary"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
   &lt;ol&gt;
     &lt;li&gt;&lt;xref href="#"&gt;Previous&lt;/xref&gt;&lt;/li&gt;
@@ -240,31 +240,31 @@
     &lt;li&gt;&lt;xref href="#"&gt;Next&lt;/xref&gt;&lt;/li&gt;
   &lt;/ol&gt;
 &lt;/pagination&gt;
-&lt;pagination color="secondary"&gt;
+&lt;pagination theme="secondary"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
   &lt;ol&gt;...&lt;/ol&gt;
 &lt;/pagination&gt;
-&lt;pagination color="success"&gt;
+&lt;pagination theme="success"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
   &lt;ol&gt;...&lt;/ol&gt;
 &lt;/pagination&gt;
-&lt;pagination color="danger"&gt;
+&lt;pagination theme="danger"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
   &lt;ol&gt;...&lt;/ol&gt;
 &lt;/pagination&gt;
-&lt;pagination color="warning"&gt;
+&lt;pagination theme="warning"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
   &lt;ol&gt;...&lt;/ol&gt;
 &lt;/pagination&gt;
-&lt;pagination color="info"&gt;
+&lt;pagination theme="info"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
   &lt;ol&gt;...&lt;/ol&gt;
 &lt;/pagination&gt;
-&lt;pagination color="accent"&gt;
+&lt;pagination theme="accent"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
   &lt;ol&gt;...&lt;/ol&gt;
 &lt;/pagination&gt;
-&lt;pagination color="inverse"&gt;
+&lt;pagination theme="inverse"&gt;
   &lt;title&gt;Page navigation example&lt;/title&gt;
   &lt;ol&gt;...&lt;/ol&gt;
 &lt;/pagination&gt;</codeblock>
diff --git a/sample/popovers.dita b/sample/popovers.dita
index ab063956..7bfdc97c 100644
--- a/sample/popovers.dita
+++ b/sample/popovers.dita
@@ -67,7 +67,7 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock> &lt;popover outputclass="btn-lg btn-solid" color="danger"&gt;
+          <codeblock> &lt;popover outputclass="btn-lg btn-solid" theme="danger-contrast"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
   &lt;desc&gt;And here’s some amazing content. It’s very engaging. Right?&lt;/desc&gt;
   Click to toggle popover
@@ -115,19 +115,19 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;popover outputclass="btn-solid" color="secondary" position="top"&gt;
+          <codeblock>&lt;popover outputclass="btn-solid" theme="secondary-contrast" position="top"&gt;
   &lt;desc&gt;Top popover&lt;/desc&gt;
   Popover on top
 &lt;/popover&gt;
-&lt;popover outputclass="btn-solid" color="secondary" position="right"&gt;
+&lt;popover outputclass="btn-solid" theme="secondary-contrast" position="right"&gt;
   &lt;desc&gt;Right Popover&lt;/desc&gt;
   Popover on right
 &lt;/popover&gt;
-&lt;popover outputclass="btn-solid" color="secondary" position="bottom"&gt;
+&lt;popover outputclass="btn-solid" theme="secondary-contrast" position="bottom"&gt;
   &lt;desc&gt;Bottom popover&lt;/desc&gt;
   Popover on bottom
 &lt;/popover&gt;
-&lt;popover outputclass="btn-solid" color="secondary" position="left"&gt;
+&lt;popover outputclass="btn-solid" theme="secondary-contrast" position="left"&gt;
   &lt;desc&gt;Left popover&lt;/desc&gt;
   Popover on left
 &lt;/popover&gt;</codeblock>
@@ -166,7 +166,7 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;popover outputclass="btn-lg btn-solid" color="danger"&gt;
+          <codeblock>&lt;popover outputclass="btn-lg btn-solid" theme="danger-contrast"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
   &lt;data name="class"&gt;custom-popover&lt;/data&gt;
   &lt;desc&gt;And here’s some amazing content. It’s very engaging. Right?&lt;/desc&gt;
diff --git a/sample/rtl.dita b/sample/rtl.dita
index c0c9f914..73ae8df2 100644
--- a/sample/rtl.dita
+++ b/sample/rtl.dita
@@ -77,7 +77,7 @@
       &lt;title&gt;عنوان البطاقة&lt;/title&gt;
       &lt;image href="..." /&gt;
       &lt;p&gt;بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.&lt;/p&gt;
-      &lt;button href="#"  color="primary"&gt;اذهب لمكان ما&lt;/button&gt;
+      &lt;button href="#"  theme="primary"&gt;اذهب لمكان ما&lt;/button&gt;
     &lt;/card&gt;
   &lt;/grid-col&gt;
 &lt;/grid-row&gt;</codeblock>
diff --git a/sample/shadows.dita b/sample/shadows.dita
index 23adf4bf..d002c2db 100644
--- a/sample/shadows.dita
+++ b/sample/shadows.dita
@@ -77,12 +77,12 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;card shadow="lg" margin="3" color="accent"&gt;
+        <codeblock>&lt;card shadow="lg" margin="3" theme="accent-contrast"&gt;
   &lt;title&gt;Shadowed Card&lt;/title&gt;
   &lt;p&gt;This card has a large shadow.&lt;/p&gt;
 &lt;/card&gt;
 
-&lt;alert shadow="sm" color="accent"&gt;Alert with small shadow&lt;/alert&gt;</codeblock>
+&lt;alert shadow="sm" theme="accent-contrast"&gt;Alert with small shadow&lt;/alert&gt;</codeblock>
       </section>
     </bodydiv>
   </body>
diff --git a/sample/spacing.dita b/sample/spacing.dita
index bc980f9f..b7f8930c 100644
--- a/sample/spacing.dita
+++ b/sample/spacing.dita
@@ -28,35 +28,35 @@
     </section>
 
     <example>
-      <div outputclass="m-0 p-2 bg-primary fg-contrast-primary">Margin 0</div>
-      <div outputclass="m-1 p-2 bg-secondary fg-contrast-secondary">Margin 1</div>
-      <div outputclass="m-2 p-2 bg-success fg-contrast-success">Margin 2</div>
-      <div outputclass="m-3 p-2 bg-danger fg-contrast-danger">Margin 3</div>
-      <div outputclass="m-4 p-2 bg-warning fg-contrast-warning">Margin 4</div>
-      <div outputclass="m-5 p-2 bg-info fg-contrast-info">Margin 5</div>
-      <div outputclass="m-auto p-2 w-50 bg-accent fg-contrast-accent">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>
     </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="bg-primary fg-contrast-primary m-0 p-2"&gt;Margin 0&lt;/div&gt;
-&lt;div outputclass="bg-secondary fg-contrast-secondary m-1 p-2"&gt;Margin 1&lt;/div&gt;
-&lt;div outputclass="bg-success fg-contrast-success m-2 p-2"&gt;Margin 2&lt;/div&gt;
-&lt;div outputclass="bg-danger fg-contrast-danger m-3 p-2"&gt;Margin 3&lt;/div&gt;
-&lt;div outputclass="bg-warning fg-contrast-warning m-4 p-2"&gt;Margin 4&lt;/div&gt;
-&lt;div outputclass="bg-info fg-contrast-info m-5 p-2"&gt;Margin 5&lt;/div&gt;
-&lt;div outputclass="bg-accent fg-contrast-accent m-auto p-2 w-50"&gt;Margin Auto&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="theme-primary theme-contrast m-0 p-2"&gt;Margin 0&lt;/div&gt;
+&lt;div outputclass="theme-secondary theme-contrast m-1 p-2"&gt;Margin 1&lt;/div&gt;
+&lt;div outputclass="theme-success theme-contrast m-2 p-2"&gt;Margin 2&lt;/div&gt;
+&lt;div outputclass="theme-danger theme-contrast m-3 p-2"&gt;Margin 3&lt;/div&gt;
+&lt;div outputclass="theme-warning theme-contrast m-4 p-2"&gt;Margin 4&lt;/div&gt;
+&lt;div outputclass="theme-info theme-contrast m-5 p-2"&gt;Margin 5&lt;/div&gt;
+&lt;div outputclass="theme-accent theme-contrast m-auto p-2 w-50"&gt;Margin Auto&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;div color="primary" margin="0" padding="2"&gt;Margin 0&lt;/div&gt;
-&lt;div color="secondary" margin="1" padding="2"&gt;Margin 1&lt;/div&gt;
-&lt;div color="success" margin="2" padding="2"&gt;Margin 2&lt;/div&gt;
-&lt;div color="danger" margin="3" padding="2"&gt;Margin 3&lt;/div&gt;
-&lt;div color="warning" margin="4" padding="2"&gt;Margin 4&lt;/div&gt;
-&lt;div color="info" margin="5" padding="2"&gt;Margin 5&lt;/div&gt;
-&lt;div color="light" margin="auto" padding="2" width="50"&gt;Margin Auto&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div theme="primary-contrast" margin="0" padding="2"&gt;Margin 0&lt;/div&gt;
+&lt;div theme="secondary-contrast" margin="1" padding="2"&gt;Margin 1&lt;/div&gt;
+&lt;div theme="success-contrast" margin="2" padding="2"&gt;Margin 2&lt;/div&gt;
+&lt;div theme="danger-contrast" margin="3" padding="2"&gt;Margin 3&lt;/div&gt;
+&lt;div theme="warning-contrast" margin="4" padding="2"&gt;Margin 4&lt;/div&gt;
+&lt;div theme="info-contrast" margin="5" padding="2"&gt;Margin 5&lt;/div&gt;
+&lt;div theme="accent-contrast" margin="auto" padding="2" width="50"&gt;Margin Auto&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -67,42 +67,42 @@
     </section>
 
     <example>
-      <div outputclass="p-0 bg-primary fg-contrast-primary">Padding 0</div>
-      <div outputclass="m-1 p-1 bg-secondary"><div
-          outputclass="bg-subtle-secondary fg-contrast-subtle-secondary w-100"
+      <div outputclass="theme-primary theme-contrast p-0">Padding 0</div>
+      <div outputclass="theme-secondary theme-contrast p-1 m-1"><div
+          outputclass="theme-secondary theme-subtle w-100"
         >Padding 1</div></div>
-      <div outputclass="m-1 p-2 bg-success"><div
-          outputclass="bg-subtle-success fg-contrast-subtle-success w-100"
+      <div outputclass="theme-success theme-contrast p-2 m-1"><div
+          outputclass="theme-success theme-subtle w-100"
         >Padding 2</div></div>
-      <div outputclass="m-1 p-3 bg-danger"><div
-          outputclass="bg-subtle-danger fg-contrast-subtle-danger w-100"
+      <div outputclass="theme-danger theme-contrast p-3 m-1"><div
+          outputclass="theme-danger theme-subtle w-100"
         >Padding 3</div></div>
-      <div outputclass="m-1 p-4 bg-warning"><div
-          outputclass="bg-subtle-warning fg-contrast-subtle-warning w-100"
+      <div outputclass="theme-warning theme-contrast p-4 m-1"><div
+          outputclass="theme-warning theme-subtle w-100"
         >Padding 4</div></div>
-      <div outputclass="m-1 p-5 bg-info"><div
-          outputclass="bg-subtle-info fg-contrast-subtle-info w-100"
+      <div outputclass="theme-info theme-contrast p-5 m-1"><div
+          outputclass="theme-info theme-subtle w-100"
         >Padding 5</div></div>
     </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="bg-primary p-0"&gt;Padding 0&lt;/div&gt;
-&lt;div outputclass="bg-secondary p-1 m-1"&gt;Padding 1&lt;/div&gt;
-&lt;div outputclass="bg-success p-2 m-1"&gt;Padding 2&lt;/div&gt;
-&lt;div outputclass="bg-danger p-3 m-1"&gt;Padding 3&lt;/div&gt;
-&lt;div outputclass="bg-warning p-4 m-1"&gt;Padding 4&lt;/div&gt;
-&lt;div outputclass="bg-info p-5 m-1"&gt;Padding 5&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="theme-primary theme-contrast p-0"&gt;Padding 0&lt;/div&gt;
+&lt;div outputclass="theme-secondary theme-contrast p-1 m-1"&gt;Padding 1&lt;/div&gt;
+&lt;div outputclass="theme-success theme-contrast p-2 m-1"&gt;Padding 2&lt;/div&gt;
+&lt;div outputclass="theme-danger theme-contrast p-3 m-1"&gt;Padding 3&lt;/div&gt;
+&lt;div outputclass="theme-warning theme-contrast p-4 m-1"&gt;Padding 4&lt;/div&gt;
+&lt;div outputclass="theme-info theme-contrast p-5 m-1"&gt;Padding 5&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;div color="primary" padding="0"&gt;Padding 0&lt;/div&gt;
-&lt;div color="secondary" padding="1" margin="1"&gt;Padding 1&lt;/div&gt;
-&lt;div color="success" padding="2" margin="1"&gt;Padding 2&lt;/div&gt;
-&lt;div color="danger" padding="3" margin="1"&gt;Padding 3&lt;/div&gt;
-&lt;div color="warning" padding="4" margin="1"&gt;Padding 4&lt;/div&gt;
-&lt;div color="info" padding="5" margin="1"&gt;Padding 5&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div theme="primary-contrast" padding="0"&gt;Padding 0&lt;/div&gt;
+&lt;div theme="secondary-contrast" padding="1" margin="1"&gt;Padding 1&lt;/div&gt;
+&lt;div theme="success-contrast" padding="2" margin="1"&gt;Padding 2&lt;/div&gt;
+&lt;div theme="danger-contrast" padding="3" margin="1"&gt;Padding 3&lt;/div&gt;
+&lt;div theme="warning-contrast" padding="4" margin="1"&gt;Padding 4&lt;/div&gt;
+&lt;div theme="info-contrast" padding="5" margin="1"&gt;Padding 5&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -142,10 +142,10 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;div color="primary" margin="t5 b0"&gt;Margin Top 5, Bottom 0&lt;/div&gt;
-&lt;div color="secondary" margin="x3"&gt;Margin Horizontal 3&lt;/div&gt;
-&lt;div color="success" padding="y5"&gt;Padding Vertical 5&lt;/div&gt;
-&lt;div color="danger" padding="s3 e1"&gt;Padding Start 3, End 1&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div theme="primary-contrast" margin="t5 b0"&gt;Margin Top 5, Bottom 0&lt;/div&gt;
+&lt;div theme="secondary-contrast" margin="x3"&gt;Margin Horizontal 3&lt;/div&gt;
+&lt;div theme="success-contrast" padding="y5"&gt;Padding Vertical 5&lt;/div&gt;
+&lt;div theme="danger-contrast" padding="s3 e1"&gt;Padding Start 3, End 1&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
   </body>
diff --git a/sample/tables.dita b/sample/tables.dita
index 3f4108c0..d24822bc 100644
--- a/sample/tables.dita
+++ b/sample/tables.dita
@@ -175,7 +175,7 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;table color="primary" padding="1" width="100"&gt;
+        <codeblock>&lt;table theme="primary" padding="1" width="100"&gt;
   &lt;tgroup cols="2"&gt;
     &lt;thead&gt;
       &lt;row&gt;
@@ -184,17 +184,17 @@
       &lt;/row&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
-      &lt;row color="info"&gt;
+      &lt;row theme="info"&gt;
         &lt;entry&gt;Elephant (African and Asian)&lt;/entry&gt;
         &lt;entry&gt;19-22 months&lt;/entry&gt;
       &lt;/row&gt;
-      &lt;row color="success"&gt;
+      &lt;row theme="success"&gt;
         &lt;entry&gt;Giraffe&lt;/entry&gt;
         &lt;entry&gt;15 months&lt;/entry&gt;
       &lt;/row&gt;
       &lt;row&gt;
         &lt;entry&gt;Rhinoceros&lt;/entry&gt;
-        &lt;entry color="danger"&gt;14-16 months&lt;/entry&gt;
+        &lt;entry theme="danger"&gt;14-16 months&lt;/entry&gt;
       &lt;/row&gt;
       &lt;row&gt;
         &lt;entry&gt;Hippopotamus&lt;/entry&gt;
@@ -627,8 +627,8 @@
     </bodydiv>
     <section id="table-head">
       <title>Table head</title>
-      <p>Similar to tables and dark tables, use the modifier <xmlatt>color="secondary"</xmlatt> or
-          <xmlatt>color="inverse"</xmlatt> to make <xmlelement>thead</xmlelement> elements appear light or dark
+      <p>Similar to tables and dark tables, use the modifier <xmlatt>theme="secondary"</xmlatt> or
+          <xmlatt>theme="inverse"</xmlatt> to make <xmlelement>thead</xmlelement> elements appear light or dark
         gray.</p>
     </section>
     <example>
@@ -678,7 +678,7 @@
         <title>Specialization</title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
-    &lt;thead color="secondary"&gt;
+    &lt;thead theme="secondary"&gt;
       ...etc
     &lt;/thead&gt;
   &lt;/tgroup&gt;
@@ -732,7 +732,7 @@
         <title>Specialization</title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
-    &lt;thead color="inverse"&gt;
+    &lt;thead theme="inverse"&gt;
       ...etc
     &lt;/thead&gt;
   &lt;/tgroup&gt;
diff --git a/sample/tooltips.dita b/sample/tooltips.dita
index ef36c338..64365d32 100644
--- a/sample/tooltips.dita
+++ b/sample/tooltips.dita
@@ -123,19 +123,19 @@
     </section>
     <section>
       <title>Specialization</title>
-        <codeblock>&lt;tooltip outputclass="btn-solid" color="secondary" position="top"&gt;
+        <codeblock>&lt;tooltip outputclass="btn-solid" theme="secondary-contrast" position="top"&gt;
   &lt;desc&gt;Tooltip on top&lt;/desc&gt;
   Tooltip on top
 &lt;/tooltip&gt;
-&lt;tooltip outputclass="btn-solid" color="secondary" position="right"&gt;
+&lt;tooltip outputclass="btn-solid" theme="secondary-contrast" position="right"&gt;
   &lt;desc&gt;Tooltip on right&lt;/desc&gt;
   Tooltip on right
 &lt;/tooltip&gt;
-&lt;tooltip outputclass="btn-solid" color="secondary" position="bottom"&gt;
+&lt;tooltip outputclass="btn-solid" theme="secondary-contrast" position="bottom"&gt;
   &lt;desc&gt;Tooltip on bottom&lt;/desc&gt;
   Tooltip on bottom
 &lt;/tooltip&gt;
-&lt;tooltip outputclass="btn-solid" color="secondary" position="left"&gt;
+&lt;tooltip outputclass="btn-solid" theme="secondary-contrast" position="left"&gt;
   &lt;desc&gt;Tooltip on left&lt;/desc&gt;
   Tooltip on left
 &lt;/tooltip&gt;</codeblock>
@@ -159,7 +159,7 @@ Tooltip with embedded DITA
       </section>
        <section>
       <title>Specialization</title>
-        <codeblock>&lt;tooltip outputclass="btn-solid" color="secondary"&gt;
+        <codeblock>&lt;tooltip outputclass="btn-solid" theme="secondary-contrast"&gt;
 &lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
 Tooltip with embedded DITA
 &lt;/tooltip&gt;</codeblock>
@@ -191,7 +191,7 @@ Tooltip with embedded DITA
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;tooltip outputclass="btn-solid" color="secondary"&gt;
+          <codeblock>&lt;tooltip outputclass="btn-solid" theme="secondary-contrast"&gt;
   &lt;data name="class"&gt;custom-tooltip&lt;/data&gt;
   &lt;desc&gt;This top tooltip is themed via CSS variables.&lt;/desc&gt;
   Custom tooltip

From 0e6ebc8050aa94265d01f17c212a51ab8cae89ac Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Wed, 12 Aug 2026 20:29:10 +0200
Subject: [PATCH 81/87] Document themes

---
 sample/index.dita |   3 +-
 sample/theme.dita | 250 +++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 216 insertions(+), 37 deletions(-)

diff --git a/sample/index.dita b/sample/index.dita
index 8285d0e9..70db0c51 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -550,7 +550,8 @@
       <indexterm><parmname>--bootstrap.theme.scrollspy</parmname></indexterm>
       <indexterm><parmname>--bootstrap.theme.sidebar</parmname></indexterm>
       <indexterm><parmname>--bootstrap.theme.topbar</parmname></indexterm>
-      <p>Layout regions can be styled with a Bootstrap theme color using additional command line parameters.</p>
+      <p>Layout regions can be styled with a Bootstrap theme color using additional command line parameters. See
+        <xref href="theme.dita"/> for details on how theme values are built up.</p>
       <parml otherprops="cols(4)">
         <plentry>
           <pt>
diff --git a/sample/theme.dita b/sample/theme.dita
index ae411ad1..684f19f5 100644
--- a/sample/theme.dita
+++ b/sample/theme.dita
@@ -54,7 +54,10 @@
         <div outputclass="p-2 theme-secondary theme-contrast">.theme-secondary .theme-contrast</div>
       </div>
     </example>
-    <codeblock>&lt;div outputclass="p-2 theme-primary theme-contrast"&gt;.theme-primary .theme-contrast&lt;/div&gt;
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="p-2 theme-primary theme-contrast"&gt;.theme-primary .theme-contrast&lt;/div&gt;
 &lt;div outputclass="p-2 theme-accent theme-contrast"&gt;.theme-accent .theme-contrast&lt;/div&gt;
 &lt;div outputclass="p-2 theme-success theme-contrast"&gt;.theme-success .theme-contrast&lt;/div&gt;
 &lt;div outputclass="p-2 theme-danger theme-contrast"&gt;.theme-danger .theme-contrast&lt;/div&gt;
@@ -62,6 +65,19 @@
 &lt;div outputclass="p-2 theme-info theme-contrast"&gt;.theme-info .theme-contrast&lt;/div&gt;
 &lt;div outputclass="p-2 theme-inverse theme-contrast"&gt;.theme-inverse .theme-contrast&lt;/div&gt;
 &lt;div outputclass="p-2 theme-secondary theme-contrast"&gt;.theme-secondary .theme-contrast&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div theme="primary-contrast" padding="2"&gt;.theme-primary .theme-contrast&lt;/div&gt;
+&lt;div theme="accent-contrast" padding="2"&gt;.theme-accent .theme-contrast&lt;/div&gt;
+&lt;div theme="success-contrast" padding="2"&gt;.theme-success .theme-contrast&lt;/div&gt;
+&lt;div theme="danger-contrast" padding="2"&gt;.theme-danger .theme-contrast&lt;/div&gt;
+&lt;div theme="warning-contrast" padding="2"&gt;.theme-warning .theme-contrast&lt;/div&gt;
+&lt;div theme="info-contrast" padding="2"&gt;.theme-info .theme-contrast&lt;/div&gt;
+&lt;div theme="inverse-contrast" padding="2"&gt;.theme-inverse .theme-contrast&lt;/div&gt;
+&lt;div theme="secondary-contrast" padding="2"&gt;.theme-secondary .theme-contrast&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
 
     <p>Nested links inherit the contrast foreground so they stay legible on the solid background:</p>
     <example>
@@ -84,8 +100,18 @@
           <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
       </div>
     </example>
-    <codeblock>&lt;div outputclass="p-3 theme-primary theme-contrast"&gt;Theme Primary with a
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="p-3 theme-primary theme-contrast"&gt;Theme Primary with a
   &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div theme="primary-contrast" padding="3"&gt;Theme Primary with a
+  &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
 
     <section id="subtle">
       <title>Subtle</title>
@@ -105,7 +131,10 @@
         <div outputclass="p-2 theme-secondary theme-subtle">.theme-secondary .theme-subtle</div>
       </div>
     </example>
-    <codeblock>&lt;div outputclass="p-2 theme-primary theme-subtle"&gt;.theme-primary .theme-subtle&lt;/div&gt;
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="p-2 theme-primary theme-subtle"&gt;.theme-primary .theme-subtle&lt;/div&gt;
 &lt;div outputclass="p-2 theme-accent theme-subtle"&gt;.theme-accent .theme-subtle&lt;/div&gt;
 &lt;div outputclass="p-2 theme-success theme-subtle"&gt;.theme-success .theme-subtle&lt;/div&gt;
 &lt;div outputclass="p-2 theme-danger theme-subtle"&gt;.theme-danger .theme-subtle&lt;/div&gt;
@@ -113,6 +142,19 @@
 &lt;div outputclass="p-2 theme-info theme-subtle"&gt;.theme-info .theme-subtle&lt;/div&gt;
 &lt;div outputclass="p-2 theme-inverse theme-subtle"&gt;.theme-inverse .theme-subtle&lt;/div&gt;
 &lt;div outputclass="p-2 theme-secondary theme-subtle"&gt;.theme-secondary .theme-subtle&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div theme="primary-subtle" padding="2"&gt;.theme-primary .theme-subtle&lt;/div&gt;
+&lt;div theme="accent-subtle" padding="2"&gt;.theme-accent .theme-subtle&lt;/div&gt;
+&lt;div theme="success-subtle" padding="2"&gt;.theme-success .theme-subtle&lt;/div&gt;
+&lt;div theme="danger-subtle" padding="2"&gt;.theme-danger .theme-subtle&lt;/div&gt;
+&lt;div theme="warning-subtle" padding="2"&gt;.theme-warning .theme-subtle&lt;/div&gt;
+&lt;div theme="info-subtle" padding="2"&gt;.theme-info .theme-subtle&lt;/div&gt;
+&lt;div theme="inverse-subtle" padding="2"&gt;.theme-inverse .theme-subtle&lt;/div&gt;
+&lt;div theme="secondary-subtle" padding="2"&gt;.theme-secondary .theme-subtle&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
 
     <p>And with borders:</p>
     <example>
@@ -129,8 +171,11 @@
         >.theme-secondary .theme-subtle .theme-border</div>
       </div>
     </example>
-    <codeblock
-    >&lt;div outputclass="p-2 theme-primary theme-subtle theme-border"&gt;.theme-primary .theme-subtle .theme-border&lt;/div&gt;
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock
+        >&lt;div outputclass="p-2 theme-primary theme-subtle theme-border"&gt;.theme-primary .theme-subtle .theme-border&lt;/div&gt;
 &lt;div outputclass="p-2 theme-accent theme-subtle theme-border"&gt;.theme-accent .theme-subtle .theme-border&lt;/div&gt;
 &lt;div outputclass="p-2 theme-success theme-subtle theme-border"&gt;.theme-success .theme-subtle .theme-border&lt;/div&gt;
 &lt;div outputclass="p-2 theme-danger theme-subtle theme-border"&gt;.theme-danger .theme-subtle .theme-border&lt;/div&gt;
@@ -138,6 +183,20 @@
 &lt;div outputclass="p-2 theme-info theme-subtle theme-border"&gt;.theme-info .theme-subtle .theme-border&lt;/div&gt;
 &lt;div outputclass="p-2 theme-inverse theme-subtle theme-border"&gt;.theme-inverse .theme-subtle .theme-border&lt;/div&gt;
 &lt;div outputclass="p-2 theme-secondary theme-subtle theme-border"&gt;.theme-secondary .theme-subtle .theme-border&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock
+        >&lt;div theme="primary-subtle-border" padding="2"&gt;.theme-primary .theme-subtle .theme-border&lt;/div&gt;
+&lt;div theme="accent-subtle-border" padding="2"&gt;.theme-accent .theme-subtle .theme-border&lt;/div&gt;
+&lt;div theme="success-subtle-border" padding="2"&gt;.theme-success .theme-subtle .theme-border&lt;/div&gt;
+&lt;div theme="danger-subtle-border" padding="2"&gt;.theme-danger .theme-subtle .theme-border&lt;/div&gt;
+&lt;div theme="warning-subtle-border" padding="2"&gt;.theme-warning .theme-subtle .theme-border&lt;/div&gt;
+&lt;div theme="info-subtle-border" padding="2"&gt;.theme-info .theme-subtle .theme-border&lt;/div&gt;
+&lt;div theme="inverse-subtle-border" padding="2"&gt;.theme-inverse .theme-subtle .theme-border&lt;/div&gt;
+&lt;div theme="secondary-subtle-border" padding="2"&gt;.theme-secondary .theme-subtle .theme-border&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
 
     <p>Nested links inherit the subtle foreground so they stay legible on the subtle background:</p>
     <example>
@@ -160,8 +219,18 @@
           <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
       </div>
     </example>
-    <codeblock>&lt;div outputclass="p-3 theme-primary theme-subtle"&gt;Theme Primary with a
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="p-3 theme-primary theme-subtle"&gt;Theme Primary with a
+  &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div theme="primary-subtle" padding="3"&gt;Theme Primary with a
   &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
 
     <section id="muted">
       <title>Muted</title>
@@ -181,7 +250,10 @@
         <div outputclass="p-2 theme-secondary theme-muted">.theme-secondary .theme-muted</div>
       </div>
     </example>
-    <codeblock>&lt;div outputclass="p-2 theme-primary theme-muted"&gt;.theme-primary .theme-muted&lt;/div&gt;
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="p-2 theme-primary theme-muted"&gt;.theme-primary .theme-muted&lt;/div&gt;
 &lt;div outputclass="p-2 theme-accent theme-muted"&gt;.theme-accent .theme-muted&lt;/div&gt;
 &lt;div outputclass="p-2 theme-success theme-muted"&gt;.theme-success .theme-muted&lt;/div&gt;
 &lt;div outputclass="p-2 theme-danger theme-muted"&gt;.theme-danger .theme-muted&lt;/div&gt;
@@ -189,31 +261,19 @@
 &lt;div outputclass="p-2 theme-info theme-muted"&gt;.theme-info .theme-muted&lt;/div&gt;
 &lt;div outputclass="p-2 theme-inverse theme-muted"&gt;.theme-inverse .theme-muted&lt;/div&gt;
 &lt;div outputclass="p-2 theme-secondary theme-muted"&gt;.theme-secondary .theme-muted&lt;/div&gt;</codeblock>
-
-    <p>And with borders:</p>
-    <example>
-      <div outputclass="d-flex flex-wrap gap-2">
-        <div outputclass="p-2 theme-primary theme-muted theme-border">.theme-primary .theme-muted .theme-border</div>
-        <div outputclass="p-2 theme-accent theme-muted theme-border">.theme-accent .theme-muted .theme-border</div>
-        <div outputclass="p-2 theme-success theme-muted theme-border">.theme-success .theme-muted .theme-border</div>
-        <div outputclass="p-2 theme-danger theme-muted theme-border">.theme-danger .theme-muted .theme-border</div>
-        <div outputclass="p-2 theme-warning theme-muted theme-border">.theme-warning .theme-muted .theme-border</div>
-        <div outputclass="p-2 theme-info theme-muted theme-border">.theme-info .theme-muted .theme-border</div>
-        <div outputclass="p-2 theme-inverse theme-muted theme-border">.theme-inverse .theme-muted .theme-border</div>
-        <div
-          outputclass="p-2 theme-secondary theme-muted theme-border"
-        >.theme-secondary .theme-muted .theme-border</div>
-      </div>
-    </example>
-    <codeblock
-    >&lt;div outputclass="p-2 theme-primary theme-muted theme-border"&gt;.theme-primary .theme-muted .theme-border&lt;/div&gt;
-&lt;div outputclass="p-2 theme-accent theme-muted theme-border"&gt;.theme-accent .theme-muted .theme-border&lt;/div&gt;
-&lt;div outputclass="p-2 theme-success theme-muted theme-border"&gt;.theme-success .theme-muted .theme-border&lt;/div&gt;
-&lt;div outputclass="p-2 theme-danger theme-muted theme-border"&gt;.theme-danger .theme-muted .theme-border&lt;/div&gt;
-&lt;div outputclass="p-2 theme-warning theme-muted theme-border"&gt;.theme-warning .theme-muted .theme-border&lt;/div&gt;
-&lt;div outputclass="p-2 theme-info theme-muted theme-border"&gt;.theme-info .theme-muted .theme-border&lt;/div&gt;
-&lt;div outputclass="p-2 theme-inverse theme-muted theme-border"&gt;.theme-inverse .theme-muted .theme-border&lt;/div&gt;
-&lt;div outputclass="p-2 theme-secondary theme-muted theme-border"&gt;.theme-secondary .theme-muted .theme-border&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div theme="primary-muted" padding="2"&gt;.theme-primary .theme-muted&lt;/div&gt;
+&lt;div theme="accent-muted" padding="2"&gt;.theme-accent .theme-muted&lt;/div&gt;
+&lt;div theme="success-muted" padding="2"&gt;.theme-success .theme-muted&lt;/div&gt;
+&lt;div theme="danger-muted" padding="2"&gt;.theme-danger .theme-muted&lt;/div&gt;
+&lt;div theme="warning-muted" padding="2"&gt;.theme-warning .theme-muted&lt;/div&gt;
+&lt;div theme="info-muted" padding="2"&gt;.theme-info .theme-muted&lt;/div&gt;
+&lt;div theme="inverse-muted" padding="2"&gt;.theme-inverse .theme-muted&lt;/div&gt;
+&lt;div theme="secondary-muted" padding="2"&gt;.theme-secondary .theme-muted&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
 
     <p>Nested links inherit the muted foreground so they stay legible on the muted background:</p>
     <example>
@@ -236,8 +296,18 @@
           <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
       </div>
     </example>
-    <codeblock>&lt;div outputclass="p-3 theme-primary theme-muted"&gt;Theme Primary with a
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="p-3 theme-primary theme-muted"&gt;Theme Primary with a
   &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div theme="primary-muted" padding="3"&gt;Theme Primary with a
+  &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
 
     <section id="comparison">
       <title>Comparison</title>
@@ -310,7 +380,10 @@
           <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
       </div>
     </example>
-    <codeblock>&lt;div outputclass="d-flex gap-2 mb-2"&gt;
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="d-flex gap-2 mb-2"&gt;
   &lt;div outputclass="theme-primary theme-contrast p-3 flex-fill text-center rounded"&gt;Primary with a
     &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
   &lt;div outputclass="theme-primary theme-subtle p-3 flex-fill text-center rounded"&gt;Primary with a
@@ -318,6 +391,19 @@
   &lt;div outputclass="theme-primary theme-muted p-3 flex-fill text-center rounded"&gt;Primary with a
     &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
 &lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div outputclass="d-flex gap-2" margin="b2"&gt;
+  &lt;div theme="primary-contrast" padding="3" rounded="yes" outputclass="flex-fill text-center"&gt;Primary with a
+    &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+  &lt;div theme="primary-subtle" padding="3" rounded="yes" outputclass="flex-fill text-center"&gt;Primary with a
+    &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+  &lt;div theme="primary-muted" padding="3" rounded="yes" outputclass="flex-fill text-center"&gt;Primary with a
+    &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
 
     <section id="with-components">
       <title>With components</title>
@@ -340,13 +426,33 @@
         </div>
       </div>
     </example>
-    <codeblock>&lt;div outputclass="theme-primary"&gt;
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="theme-primary"&gt;
   &lt;div outputclass="d-flex gap-2 mb-3"&gt;
     &lt;ph outputclass="badge theme-contrast"&gt;Contrast badge&lt;/ph&gt;
     &lt;ph outputclass="badge theme-subtle"&gt;Subtle badge&lt;/ph&gt;
     &lt;ph outputclass="badge theme-muted"&gt;Muted badge&lt;/ph&gt;
   &lt;/div&gt;
 &lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <p outputclass="text-muted">A bare <codeph>theme-{color}</codeph> container (setting only the CSS
+          custom properties for descendants to consume, with no contrast/subtle/muted/border
+          suffix of its own) has no <xmlatt>theme</xmlatt> attribute equivalent &#8212; <xmlelement
+          >div</xmlelement>'s <xmlatt>theme</xmlatt> enumeration requires a suffix. This case
+          still requires <xmlatt>outputclass</xmlatt>.</p>
+        <codeblock>&lt;div outputclass="theme-primary"&gt;
+  &lt;div outputclass="d-flex gap-2 mb-3"&gt;
+    &lt;ph outputclass="badge theme-contrast"&gt;Contrast badge&lt;/ph&gt;
+    &lt;ph outputclass="badge theme-subtle"&gt;Subtle badge&lt;/ph&gt;
+    &lt;ph outputclass="badge theme-muted"&gt;Muted badge&lt;/ph&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
 
     <p>You can also mix theme colors within the same container by applying different
       <codeph>theme-{color}</codeph> classes to child elements:</p>
@@ -357,11 +463,83 @@
         <div outputclass="theme-danger theme-contrast p-3 rounded">Danger</div>
       </div>
     </example>
-    <codeblock>&lt;div outputclass="d-flex gap-2"&gt;
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="d-flex gap-2"&gt;
   &lt;div outputclass="theme-success theme-contrast p-3 rounded"&gt;Success&lt;/div&gt;
   &lt;div outputclass="theme-warning theme-contrast p-3 rounded"&gt;Warning&lt;/div&gt;
   &lt;div outputclass="theme-danger theme-contrast p-3 rounded"&gt;Danger&lt;/div&gt;
 &lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div outputclass="d-flex gap-2"&gt;
+  &lt;div theme="success-contrast" padding="3" rounded="yes"&gt;Success&lt;/div&gt;
+  &lt;div theme="warning-contrast" padding="3" rounded="yes"&gt;Warning&lt;/div&gt;
+  &lt;div theme="danger-contrast" padding="3" rounded="yes"&gt;Danger&lt;/div&gt;
+&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="how-theme-values-are-built-up">
+      <title>How theme values are built up</title>
+      <p>Every theme value used throughout this documentation, whether on an individual
+        element's <xmlatt>outputclass</xmlatt> (or the specialization plugin's <xmlatt
+        >theme</xmlatt> attribute), or on one of the <parmname>--bootstrap.theme.*</parmname>
+        command line parameters below, is a hyphenated compound of one of the 8 Bootstrap
+        theme colors:</p>
+      <ul>
+        <li><codeph>accent</codeph></li>
+        <li><codeph>danger</codeph></li>
+        <li><codeph>info</codeph></li>
+        <li><codeph>inverse</codeph></li>
+        <li><codeph>primary</codeph></li>
+        <li><codeph>secondary</codeph></li>
+        <li><codeph>success</codeph></li>
+        <li><codeph>warning</codeph></li>
+      </ul>
+      <p>With a suffix indicating the theme style</p>
+      <ul>
+        <li><codeph>-contrast</codeph> pairs the solid background with the contrast text color</li>
+        <li><codeph>-subtle</codeph> pairs the low-contrast background with matching text</li>
+        <li><codeph>-muted</codeph> pairs the low-contrast background with muted text</li>
+        <li><codeph>-border</codeph> sets a predefined border color on its own</li>
+        <li><codeph>-subtle-border</codeph> combines <codeph>-subtle</codeph> and <codeph>-border</codeph></li>
+      </ul>
+      <p>The following command line parameters optional consume a theme value to style layout regions:</p>
+      <parml>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.header</parmname></pt>
+          <pd>Page header theme. Defaults to <option>primary-contrast</option></pd>
+        </plentry>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.footer</parmname></pt>
+          <pd>Page footer theme. Defaults to <option>none</option></pd>
+        </plentry>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.sidebar</parmname></pt>
+          <pd><xref href="nav.dita#navigation/sidebar"/> theme. Defaults to <option>none</option></pd>
+        </plentry>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.topbar</parmname></pt>
+          <pd><xref href="nav.dita#navigation/top-bar"/> theme. Defaults to <option>none</option></pd>
+        </plentry>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.content</parmname></pt>
+          <pd>Main content area theme. Defaults to <option>none</option></pd>
+        </plentry>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.scrollspy</parmname></pt>
+          <pd><xref href="scrollspy.dita"/> menu theme. Defaults to <option>none</option></pd>
+        </plentry>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.body</parmname></pt>
+          <pd>Page <xmlelement>body</xmlelement>. Defaults to
+            <option>none</option></pd>
+        </plentry>
+      </parml>
+    </section>
 
   </body>
 </topic>

From 484e661a7c03f234912c85228c2c0a94baad85a4 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Wed, 12 Aug 2026 20:44:21 +0200
Subject: [PATCH 82/87] Amend text

---
 sample/index.dita | 21 +++++++++++----------
 sample/theme.dita | 10 +++++++---
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/sample/index.dita b/sample/index.dita
index 70db0c51..40b25339 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -550,7 +550,8 @@
       <indexterm><parmname>--bootstrap.theme.scrollspy</parmname></indexterm>
       <indexterm><parmname>--bootstrap.theme.sidebar</parmname></indexterm>
       <indexterm><parmname>--bootstrap.theme.topbar</parmname></indexterm>
-      <p>Layout regions can be styled with a Bootstrap theme color using additional command line parameters. See
+      <p
+      >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
         <xref href="theme.dita"/> for details on how theme values are built up.</p>
       <parml otherprops="cols(4)">
         <plentry>
@@ -558,7 +559,7 @@
             <parmname>--bootstrap.css&#8203;.accessibility&#8203;.link</parmname>
           </pt>
           <pd>
-            Common Bootstrap utility classes for accessibility links
+            Common Bootstrap CSS classes for accessibility links
           </pd>
         </plentry>
         <plentry>
@@ -566,7 +567,7 @@
             <parmname>--bootstrap.theme&#8203;.accessibility</parmname>
           </pt>
           <pd>
-            Common Bootstrap utility classes for accessibility navigation
+            Bootstrap theme color classes for accessibility navigation
           </pd>
         </plentry>
         <plentry>
@@ -574,7 +575,7 @@
             <parmname>--bootstrap.theme&#8203;.body</parmname>
           </pt>
           <pd>
-            Theme utility class for the page <xmlelement>body</xmlelement>.
+            Bootstrap theme color classes for the page <xmlelement>body</xmlelement>.
             Defaults to <option>none</option>
           </pd>
         </plentry>
@@ -583,7 +584,7 @@
             <parmname>--bootstrap.theme&#8203;.content</parmname>
           </pt>
           <pd>
-            Theme utility class for the main content area. Defaults to <option>none</option>
+            Bootstrap theme color classes for the main content area. Defaults to <option>none</option>
           </pd>
         </plentry>
         <plentry>
@@ -591,7 +592,7 @@
             <parmname>--bootstrap.theme&#8203;.footer</parmname>
           </pt>
           <pd>
-            Theme utility class for the page footer. Defaults to <option>none</option>
+            Bootstrap theme color classes for the page footer. Defaults to <option>none</option>
           </pd>
         </plentry>
         <plentry>
@@ -599,7 +600,7 @@
             <parmname>--bootstrap.theme&#8203;.header</parmname>
           </pt>
           <pd>
-            Theme utility class for the page header. Defaults to <option>primary-contrast</option>
+            Bootstrap theme color classes for the page header. Defaults to <option>primary-contrast</option>
           </pd>
         </plentry>
         <plentry>
@@ -607,7 +608,7 @@
             <parmname>--bootstrap.theme&#8203;.scrollspy</parmname>
           </pt>
           <pd>
-            Theme utility class for the scrollspy menu. Defaults to <option>none</option>
+            Bootstrap theme color classes for the scrollspy menu. Defaults to <option>none</option>
           </pd>
         </plentry>
         <plentry>
@@ -615,7 +616,7 @@
             <parmname>--bootstrap.theme&#8203;.sidebar</parmname>
           </pt>
           <pd>
-            Theme utility class for the sidebar navigation. Defaults to <option>none</option>
+            Bootstrap theme color classes for the sidebar navigation. Defaults to <option>none</option>
           </pd>
         </plentry>
         <plentry>
@@ -623,7 +624,7 @@
             <parmname>--bootstrap.theme&#8203;.topbar</parmname>
           </pt>
           <pd>
-            Theme utility class for the collapsible top header. Defaults to <option>none</option>
+            Bootstrap theme color classes for the collapsible top header. Defaults to <option>none</option>
           </pd>
         </plentry>
       </parml>
diff --git a/sample/theme.dita b/sample/theme.dita
index 684f19f5..728c69dd 100644
--- a/sample/theme.dita
+++ b/sample/theme.dita
@@ -484,8 +484,8 @@
 
     <section id="how-theme-values-are-built-up">
       <title>How theme values are built up</title>
-      <p>Every theme value used throughout this documentation, whether on an individual
-        element's <xmlatt>outputclass</xmlatt> (or the specialization plugin's <xmlatt
+      <p
+      >Every Bootstrap theme color class used in this documentation, whether on a standard DITA element or the specialization  <xmlatt
         >theme</xmlatt> attribute), or on one of the <parmname>--bootstrap.theme.*</parmname>
         command line parameters below, is a hyphenated compound of one of the 8 Bootstrap
         theme colors:</p>
@@ -499,7 +499,7 @@
         <li><codeph>success</codeph></li>
         <li><codeph>warning</codeph></li>
       </ul>
-      <p>With a suffix indicating the theme style</p>
+      <p>With a suffix indicating the theme's style</p>
       <ul>
         <li><codeph>-contrast</codeph> pairs the solid background with the contrast text color</li>
         <li><codeph>-subtle</codeph> pairs the low-contrast background with matching text</li>
@@ -507,6 +507,10 @@
         <li><codeph>-border</codeph> sets a predefined border color on its own</li>
         <li><codeph>-subtle-border</codeph> combines <codeph>-subtle</codeph> and <codeph>-border</codeph></li>
       </ul>
+      <p>
+        These values are a shorthand notation corresponding to the <xmlatt
+        >outputclass="theme-{color} theme-{contrast|subtle|muted} theme-{border}</xmlatt> attribute values.
+      </p>
       <p>The following command line parameters optional consume a theme value to style layout regions:</p>
       <parml>
         <plentry>

From 1dad303dd5bc514113f303ed0269dc2c1734d7d3 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Wed, 12 Aug 2026 20:57:19 +0200
Subject: [PATCH 83/87] Fix text

---
 sample/theme.dita | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/sample/theme.dita b/sample/theme.dita
index 728c69dd..5c27f219 100644
--- a/sample/theme.dita
+++ b/sample/theme.dita
@@ -407,8 +407,8 @@
 
     <section id="with-components">
       <title>With components</title>
-      <p>Theme utilities work great with components that support theming. Apply the
-        theme color to a container and use theme style classes on individual elements.</p>
+      <p>Theme utilities work great with components that support theming. Use theme
+        style classes on individual elements.</p>
     </section>
     <example>
       <div outputclass="theme-primary">
@@ -439,17 +439,10 @@
       </section>
       <section>
         <title>Specialization</title>
-        <p outputclass="text-muted">A bare <codeph>theme-{color}</codeph> container (setting only the CSS
-          custom properties for descendants to consume, with no contrast/subtle/muted/border
-          suffix of its own) has no <xmlatt>theme</xmlatt> attribute equivalent &#8212; <xmlelement
-          >div</xmlelement>'s <xmlatt>theme</xmlatt> enumeration requires a suffix. This case
-          still requires <xmlatt>outputclass</xmlatt>.</p>
-        <codeblock>&lt;div outputclass="theme-primary"&gt;
-  &lt;div outputclass="d-flex gap-2 mb-3"&gt;
-    &lt;ph outputclass="badge theme-contrast"&gt;Contrast badge&lt;/ph&gt;
-    &lt;ph outputclass="badge theme-subtle"&gt;Subtle badge&lt;/ph&gt;
-    &lt;ph outputclass="badge theme-muted"&gt;Muted badge&lt;/ph&gt;
-  &lt;/div&gt;
+        <codeblock>&lt;div outputclass="d-flex gap-2 mb-3"&gt;
+  &lt;badge theme="primary"&gt;Solid badge&lt;/badge&gt;
+  &lt;badge theme="primary-outline"&gt;Outline badge&lt;/badge&gt;
+  &lt;badge theme="primary-subtle"&gt;Subtle badge&lt;/badge&gt;
 &lt;/div&gt;</codeblock>
       </section>
     </bodydiv>

From bbca4a16d85f0cf5ee66a7a92af3e7ae83129e5b Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Wed, 12 Aug 2026 21:09:02 +0200
Subject: [PATCH 84/87] fix typo

---
 sample/theme.dita | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sample/theme.dita b/sample/theme.dita
index 5c27f219..01fbd1a4 100644
--- a/sample/theme.dita
+++ b/sample/theme.dita
@@ -504,7 +504,7 @@
         These values are a shorthand notation corresponding to the <xmlatt
         >outputclass="theme-{color} theme-{contrast|subtle|muted} theme-{border}</xmlatt> attribute values.
       </p>
-      <p>The following command line parameters optional consume a theme value to style layout regions:</p>
+      <p>The following command line parameters optionally consume a theme value to style layout regions:</p>
       <parml>
         <plentry>
           <pt><parmname>--bootstrap.theme.header</parmname></pt>

From 58b479e70f1f4c994e8151c8e8fbf3f1606a4d30 Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Wed, 12 Aug 2026 21:34:34 +0200
Subject: [PATCH 85/87] Simplify examples

---
 sample/color.dita |  10 +-
 sample/theme.dita | 343 ++++++++++++++++++++++++----------------------
 2 files changed, 187 insertions(+), 166 deletions(-)

diff --git a/sample/color.dita b/sample/color.dita
index dfa46a20..928bd0b4 100644
--- a/sample/color.dita
+++ b/sample/color.dita
@@ -281,26 +281,26 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;thumbnail href="..." theme="warning-contrast"/&gt;
+        <codeblock>&lt;thumbnail href="..." theme="warning"/&gt;
 
-&lt;card theme="success-contrast" width="50"&gt;
+&lt;card theme="success" width="50"&gt;
   &lt;title&gt;Card Title&lt;/title&gt;
   &lt;p&gt;Some quick example text to build on the card title and make up the bulk of the card’s content.&lt;/p&gt;
 &lt;/card&gt;
 
-&lt;accordion theme="info-contrast"&gt;
+&lt;accordion theme="info"&gt;
   &lt;accordion-item open="yes"&gt;
     &lt;title&gt;Accordion Item #1&lt;/title&gt;
     &lt;p&gt;This is the first item's accordion body.&lt;/p&gt;
   &lt;/accordion-item&gt;
 &lt;/accordion&gt;
 
-&lt;list-group width="50" theme="danger-contrast"&gt;
+&lt;list-group width="50" theme="danger"&gt;
   &lt;li&gt;An item&lt;/li&gt;
   &lt;li&gt;A second item&lt;/li&gt;
 &lt;/list-group&gt;
 
-&lt;carousel theme="inverse-contrast" width="50" indicators="yes"&gt;
+&lt;carousel theme="inverse" width="50" indicators="yes"&gt;
   &lt;carousel-item&gt;
     &lt;image href="..."/&gt;
   &lt;/carousel-item&gt;
diff --git a/sample/theme.dita b/sample/theme.dita
index 01fbd1a4..d8496cfd 100644
--- a/sample/theme.dita
+++ b/sample/theme.dita
@@ -12,7 +12,7 @@
     -->
 <topic id="theme">
   <title>Theme</title>
-  <shortdesc>Combine one of three theme utilities with our theme color classes to set
+  <shortdesc>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.</shortdesc>
   <prolog>
     <metadata>
@@ -30,7 +30,7 @@
 
     <section id="overview">
       <title>Overview</title>
-      <p>Take any of our theme color classes and add <codeph>theme-contrast</codeph>,
+      <p>Take any of the Bootstrap theme color classes and add <codeph>theme-contrast</codeph>,
         <codeph>theme-subtle</codeph>, or <codeph>theme-muted</codeph> to set a predefined
         color and background-color pairing. Then optionally add <codeph>theme-border</codeph>
         to set a predefined border color.</p>
@@ -44,38 +44,38 @@
     </section>
     <example>
       <div outputclass="d-flex flex-wrap gap-2">
-        <div outputclass="p-2 theme-primary theme-contrast">.theme-primary .theme-contrast</div>
-        <div outputclass="p-2 theme-accent theme-contrast">.theme-accent .theme-contrast</div>
-        <div outputclass="p-2 theme-success theme-contrast">.theme-success .theme-contrast</div>
-        <div outputclass="p-2 theme-danger theme-contrast">.theme-danger .theme-contrast</div>
-        <div outputclass="p-2 theme-warning theme-contrast">.theme-warning .theme-contrast</div>
-        <div outputclass="p-2 theme-info theme-contrast">.theme-info .theme-contrast</div>
-        <div outputclass="p-2 theme-inverse theme-contrast">.theme-inverse .theme-contrast</div>
-        <div outputclass="p-2 theme-secondary theme-contrast">.theme-secondary .theme-contrast</div>
+        <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>
       </div>
     </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="p-2 theme-primary theme-contrast"&gt;.theme-primary .theme-contrast&lt;/div&gt;
-&lt;div outputclass="p-2 theme-accent theme-contrast"&gt;.theme-accent .theme-contrast&lt;/div&gt;
-&lt;div outputclass="p-2 theme-success theme-contrast"&gt;.theme-success .theme-contrast&lt;/div&gt;
-&lt;div outputclass="p-2 theme-danger theme-contrast"&gt;.theme-danger .theme-contrast&lt;/div&gt;
-&lt;div outputclass="p-2 theme-warning theme-contrast"&gt;.theme-warning .theme-contrast&lt;/div&gt;
-&lt;div outputclass="p-2 theme-info theme-contrast"&gt;.theme-info .theme-contrast&lt;/div&gt;
-&lt;div outputclass="p-2 theme-inverse theme-contrast"&gt;.theme-inverse .theme-contrast&lt;/div&gt;
-&lt;div outputclass="p-2 theme-secondary theme-contrast"&gt;.theme-secondary .theme-contrast&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="p-2 theme-primary theme-contrast"&gt;primary-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-accent theme-contrast"&gt;accent-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-success theme-contrast"&gt;success-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-danger theme-contrast"&gt;danger-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-warning theme-contrast"&gt;warning-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-info theme-contrast"&gt;info-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-inverse theme-contrast"&gt;inverse-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-secondary theme-contrast"&gt;secondary-contrast&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;div theme="primary-contrast" padding="2"&gt;.theme-primary .theme-contrast&lt;/div&gt;
-&lt;div theme="accent-contrast" padding="2"&gt;.theme-accent .theme-contrast&lt;/div&gt;
-&lt;div theme="success-contrast" padding="2"&gt;.theme-success .theme-contrast&lt;/div&gt;
-&lt;div theme="danger-contrast" padding="2"&gt;.theme-danger .theme-contrast&lt;/div&gt;
-&lt;div theme="warning-contrast" padding="2"&gt;.theme-warning .theme-contrast&lt;/div&gt;
-&lt;div theme="info-contrast" padding="2"&gt;.theme-info .theme-contrast&lt;/div&gt;
-&lt;div theme="inverse-contrast" padding="2"&gt;.theme-inverse .theme-contrast&lt;/div&gt;
-&lt;div theme="secondary-contrast" padding="2"&gt;.theme-secondary .theme-contrast&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div theme="primary-contrast" padding="2"&gt;primary-contrast&lt;/div&gt;
+&lt;div theme="accent-contrast" padding="2"&gt;accent-contrast&lt;/div&gt;
+&lt;div theme="success-contrast" padding="2"&gt;success-contrast&lt;/div&gt;
+&lt;div theme="danger-contrast" padding="2"&gt;danger-contrast&lt;/div&gt;
+&lt;div theme="warning-contrast" padding="2"&gt;warning-contrast&lt;/div&gt;
+&lt;div theme="info-contrast" padding="2"&gt;info-contrast&lt;/div&gt;
+&lt;div theme="inverse-contrast" padding="2"&gt;inverse-contrast&lt;/div&gt;
+&lt;div theme="secondary-contrast" padding="2"&gt;secondary-contrast&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -83,33 +83,33 @@
     <example>
       <div outputclass="d-flex flex-column gap-2">
         <div outputclass="p-3 theme-primary theme-contrast">Theme Primary with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-accent theme-contrast">Theme Accent with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-success theme-contrast">Theme Success with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-danger theme-contrast">Theme Danger with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-warning theme-contrast">Theme Warning with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-info theme-contrast">Theme Info with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-inverse theme-contrast">Theme Inverse with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-secondary theme-contrast">Theme Secondary with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
       </div>
     </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;div outputclass="p-3 theme-primary theme-contrast"&gt;Theme Primary with a
-  &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+  &lt;xref href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
         <codeblock>&lt;div theme="primary-contrast" padding="3"&gt;Theme Primary with a
-  &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+  &lt;xref href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -121,80 +121,93 @@
     </section>
     <example>
       <div outputclass="d-flex flex-wrap gap-2">
-        <div outputclass="p-2 theme-primary theme-subtle">.theme-primary .theme-subtle</div>
-        <div outputclass="p-2 theme-accent theme-subtle">.theme-accent .theme-subtle</div>
-        <div outputclass="p-2 theme-success theme-subtle">.theme-success .theme-subtle</div>
-        <div outputclass="p-2 theme-danger theme-subtle">.theme-danger .theme-subtle</div>
-        <div outputclass="p-2 theme-warning theme-subtle">.theme-warning .theme-subtle</div>
-        <div outputclass="p-2 theme-info theme-subtle">.theme-info .theme-subtle</div>
-        <div outputclass="p-2 theme-inverse theme-subtle">.theme-inverse .theme-subtle</div>
-        <div outputclass="p-2 theme-secondary theme-subtle">.theme-secondary .theme-subtle</div>
+        <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>
       </div>
     </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="p-2 theme-primary theme-subtle"&gt;.theme-primary .theme-subtle&lt;/div&gt;
-&lt;div outputclass="p-2 theme-accent theme-subtle"&gt;.theme-accent .theme-subtle&lt;/div&gt;
-&lt;div outputclass="p-2 theme-success theme-subtle"&gt;.theme-success .theme-subtle&lt;/div&gt;
-&lt;div outputclass="p-2 theme-danger theme-subtle"&gt;.theme-danger .theme-subtle&lt;/div&gt;
-&lt;div outputclass="p-2 theme-warning theme-subtle"&gt;.theme-warning .theme-subtle&lt;/div&gt;
-&lt;div outputclass="p-2 theme-info theme-subtle"&gt;.theme-info .theme-subtle&lt;/div&gt;
-&lt;div outputclass="p-2 theme-inverse theme-subtle"&gt;.theme-inverse .theme-subtle&lt;/div&gt;
-&lt;div outputclass="p-2 theme-secondary theme-subtle"&gt;.theme-secondary .theme-subtle&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="p-2 theme-primary theme-subtle"&gt;primary-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-accent theme-subtle"&gt;accent-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-success theme-subtle"&gt;success-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-danger theme-subtle"&gt;danger-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-warning theme-subtle"&gt;warning-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-info theme-subtle"&gt;info-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-inverse theme-subtle"&gt;inverse-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-secondary theme-subtle"&gt;secondary-subtle&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;div theme="primary-subtle" padding="2"&gt;.theme-primary .theme-subtle&lt;/div&gt;
-&lt;div theme="accent-subtle" padding="2"&gt;.theme-accent .theme-subtle&lt;/div&gt;
-&lt;div theme="success-subtle" padding="2"&gt;.theme-success .theme-subtle&lt;/div&gt;
-&lt;div theme="danger-subtle" padding="2"&gt;.theme-danger .theme-subtle&lt;/div&gt;
-&lt;div theme="warning-subtle" padding="2"&gt;.theme-warning .theme-subtle&lt;/div&gt;
-&lt;div theme="info-subtle" padding="2"&gt;.theme-info .theme-subtle&lt;/div&gt;
-&lt;div theme="inverse-subtle" padding="2"&gt;.theme-inverse .theme-subtle&lt;/div&gt;
-&lt;div theme="secondary-subtle" padding="2"&gt;.theme-secondary .theme-subtle&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div theme="primary-subtle" padding="2"&gt;primary-subtle&lt;/div&gt;
+&lt;div theme="accent-subtle" padding="2"&gt;accent-subtle&lt;/div&gt;
+&lt;div theme="success-subtle" padding="2"&gt;success-subtle&lt;/div&gt;
+&lt;div theme="danger-subtle" padding="2"&gt;danger-subtle&lt;/div&gt;
+&lt;div theme="warning-subtle" padding="2"&gt;warning-subtle&lt;/div&gt;
+&lt;div theme="info-subtle" padding="2"&gt;info-subtle&lt;/div&gt;
+&lt;div theme="inverse-subtle" padding="2"&gt;inverse-subtle&lt;/div&gt;
+&lt;div theme="secondary-subtle" padding="2"&gt;secondary-subtle&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
     <p>And with borders:</p>
     <example>
       <div outputclass="d-flex flex-wrap gap-2">
-        <div outputclass="p-2 theme-primary theme-subtle theme-border">.theme-primary .theme-subtle .theme-border</div>
-        <div outputclass="p-2 theme-accent theme-subtle theme-border">.theme-accent .theme-subtle .theme-border</div>
-        <div outputclass="p-2 theme-success theme-subtle theme-border">.theme-success .theme-subtle .theme-border</div>
-        <div outputclass="p-2 theme-danger theme-subtle theme-border">.theme-danger .theme-subtle .theme-border</div>
-        <div outputclass="p-2 theme-warning theme-subtle theme-border">.theme-warning .theme-subtle .theme-border</div>
-        <div outputclass="p-2 theme-info theme-subtle theme-border">.theme-info .theme-subtle .theme-border</div>
-        <div outputclass="p-2 theme-inverse theme-subtle theme-border">.theme-inverse .theme-subtle .theme-border</div>
-        <div
-          outputclass="p-2 theme-secondary theme-subtle theme-border"
-        >.theme-secondary .theme-subtle .theme-border</div>
+        <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>
       </div>
     </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock
-        >&lt;div outputclass="p-2 theme-primary theme-subtle theme-border"&gt;.theme-primary .theme-subtle .theme-border&lt;/div&gt;
-&lt;div outputclass="p-2 theme-accent theme-subtle theme-border"&gt;.theme-accent .theme-subtle .theme-border&lt;/div&gt;
-&lt;div outputclass="p-2 theme-success theme-subtle theme-border"&gt;.theme-success .theme-subtle .theme-border&lt;/div&gt;
-&lt;div outputclass="p-2 theme-danger theme-subtle theme-border"&gt;.theme-danger .theme-subtle .theme-border&lt;/div&gt;
-&lt;div outputclass="p-2 theme-warning theme-subtle theme-border"&gt;.theme-warning .theme-subtle .theme-border&lt;/div&gt;
-&lt;div outputclass="p-2 theme-info theme-subtle theme-border"&gt;.theme-info .theme-subtle .theme-border&lt;/div&gt;
-&lt;div outputclass="p-2 theme-inverse theme-subtle theme-border"&gt;.theme-inverse .theme-subtle .theme-border&lt;/div&gt;
-&lt;div outputclass="p-2 theme-secondary theme-subtle theme-border"&gt;.theme-secondary .theme-subtle .theme-border&lt;/div&gt;</codeblock>
+        >&lt;div outputclass="p-2 theme-primary theme-subtle theme-border"&gt;primary-subtle-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-accent theme-subtle theme-border"&gt;accent-subtle-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-success theme-subtle theme-border"&gt;success-subtle-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-danger theme-subtle theme-border"&gt;danger-subtle-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-warning theme-subtle theme-border"&gt;warning-subtle-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-info theme-subtle theme-border"&gt;info-subtle-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-inverse theme-subtle theme-border"&gt;inverse-subtle-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-secondary theme-subtle theme-border"&gt;secondary-subtle-border&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock
-        >&lt;div theme="primary-subtle-border" padding="2"&gt;.theme-primary .theme-subtle .theme-border&lt;/div&gt;
-&lt;div theme="accent-subtle-border" padding="2"&gt;.theme-accent .theme-subtle .theme-border&lt;/div&gt;
-&lt;div theme="success-subtle-border" padding="2"&gt;.theme-success .theme-subtle .theme-border&lt;/div&gt;
-&lt;div theme="danger-subtle-border" padding="2"&gt;.theme-danger .theme-subtle .theme-border&lt;/div&gt;
-&lt;div theme="warning-subtle-border" padding="2"&gt;.theme-warning .theme-subtle .theme-border&lt;/div&gt;
-&lt;div theme="info-subtle-border" padding="2"&gt;.theme-info .theme-subtle .theme-border&lt;/div&gt;
-&lt;div theme="inverse-subtle-border" padding="2"&gt;.theme-inverse .theme-subtle .theme-border&lt;/div&gt;
-&lt;div theme="secondary-subtle-border" padding="2"&gt;.theme-secondary .theme-subtle .theme-border&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div theme="primary-subtle-border" padding="2"&gt;primary-subtle-border&lt;/div&gt;
+&lt;div theme="accent-subtle-border" padding="2"&gt;accent-subtle-border&lt;/div&gt;
+&lt;div theme="success-subtle-border" padding="2"&gt;success-subtle-border&lt;/div&gt;
+&lt;div theme="danger-subtle-border" padding="2"&gt;danger-subtle-border&lt;/div&gt;
+&lt;div theme="warning-subtle-border" padding="2"&gt;warning-subtle-border&lt;/div&gt;
+&lt;div theme="info-subtle-border" padding="2"&gt;info-subtle-border&lt;/div&gt;
+&lt;div theme="inverse-subtle-border" padding="2"&gt;inverse-subtle-border&lt;/div&gt;
+&lt;div theme="secondary-subtle-border" padding="2"&gt;secondary-subtle-border&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -202,33 +215,33 @@
     <example>
       <div outputclass="d-flex flex-column gap-2">
         <div outputclass="p-3 theme-primary theme-subtle">Theme Primary with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-accent theme-subtle">Theme Accent with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-success theme-subtle">Theme Success with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-danger theme-subtle">Theme Danger with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-warning theme-subtle">Theme Warning with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-info theme-subtle">Theme Info with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-inverse theme-subtle">Theme Inverse with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-secondary theme-subtle">Theme Secondary with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
       </div>
     </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;div outputclass="p-3 theme-primary theme-subtle"&gt;Theme Primary with a
-  &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+  &lt;xref href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
         <codeblock>&lt;div theme="primary-subtle" padding="3"&gt;Theme Primary with a
-  &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+  &lt;xref href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -240,38 +253,46 @@
     </section>
     <example>
       <div outputclass="d-flex flex-wrap gap-2">
-        <div outputclass="p-2 theme-primary theme-muted">.theme-primary .theme-muted</div>
-        <div outputclass="p-2 theme-accent theme-muted">.theme-accent .theme-muted</div>
-        <div outputclass="p-2 theme-success theme-muted">.theme-success .theme-muted</div>
-        <div outputclass="p-2 theme-danger theme-muted">.theme-danger .theme-muted</div>
-        <div outputclass="p-2 theme-warning theme-muted">.theme-warning .theme-muted</div>
-        <div outputclass="p-2 theme-info theme-muted">.theme-info .theme-muted</div>
-        <div outputclass="p-2 theme-inverse theme-muted">.theme-inverse .theme-muted</div>
-        <div outputclass="p-2 theme-secondary theme-muted">.theme-secondary .theme-muted</div>
+        <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>
       </div>
     </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="p-2 theme-primary theme-muted"&gt;.theme-primary .theme-muted&lt;/div&gt;
-&lt;div outputclass="p-2 theme-accent theme-muted"&gt;.theme-accent .theme-muted&lt;/div&gt;
-&lt;div outputclass="p-2 theme-success theme-muted"&gt;.theme-success .theme-muted&lt;/div&gt;
-&lt;div outputclass="p-2 theme-danger theme-muted"&gt;.theme-danger .theme-muted&lt;/div&gt;
-&lt;div outputclass="p-2 theme-warning theme-muted"&gt;.theme-warning .theme-muted&lt;/div&gt;
-&lt;div outputclass="p-2 theme-info theme-muted"&gt;.theme-info .theme-muted&lt;/div&gt;
-&lt;div outputclass="p-2 theme-inverse theme-muted"&gt;.theme-inverse .theme-muted&lt;/div&gt;
-&lt;div outputclass="p-2 theme-secondary theme-muted"&gt;.theme-secondary .theme-muted&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="p-2 theme-primary theme-muted"&gt;primary-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-accent theme-muted"&gt;accent-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-success theme-muted"&gt;success-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-danger theme-muted"&gt;danger-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-warning theme-muted"&gt;warning-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-info theme-muted"&gt;info-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-inverse theme-muted"&gt;inverse-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-secondary theme-muted"&gt;secondary-muted&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;div theme="primary-muted" padding="2"&gt;.theme-primary .theme-muted&lt;/div&gt;
-&lt;div theme="accent-muted" padding="2"&gt;.theme-accent .theme-muted&lt;/div&gt;
-&lt;div theme="success-muted" padding="2"&gt;.theme-success .theme-muted&lt;/div&gt;
-&lt;div theme="danger-muted" padding="2"&gt;.theme-danger .theme-muted&lt;/div&gt;
-&lt;div theme="warning-muted" padding="2"&gt;.theme-warning .theme-muted&lt;/div&gt;
-&lt;div theme="info-muted" padding="2"&gt;.theme-info .theme-muted&lt;/div&gt;
-&lt;div theme="inverse-muted" padding="2"&gt;.theme-inverse .theme-muted&lt;/div&gt;
-&lt;div theme="secondary-muted" padding="2"&gt;.theme-secondary .theme-muted&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div theme="primary-muted" padding="2"&gt;primary-muted&lt;/div&gt;
+&lt;div theme="accent-muted" padding="2"&gt;accent-muted&lt;/div&gt;
+&lt;div theme="success-muted" padding="2"&gt;success-muted&lt;/div&gt;
+&lt;div theme="danger-muted" padding="2"&gt;danger-muted&lt;/div&gt;
+&lt;div theme="warning-muted" padding="2"&gt;warning-muted&lt;/div&gt;
+&lt;div theme="info-muted" padding="2"&gt;info-muted&lt;/div&gt;
+&lt;div theme="inverse-muted" padding="2"&gt;inverse-muted&lt;/div&gt;
+&lt;div theme="secondary-muted" padding="2"&gt;secondary-muted&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -279,33 +300,33 @@
     <example>
       <div outputclass="d-flex flex-column gap-2">
         <div outputclass="p-3 theme-primary theme-muted">Theme Primary with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-accent theme-muted">Theme Accent with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-success theme-muted">Theme Success with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-danger theme-muted">Theme Danger with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-warning theme-muted">Theme Warning with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-info theme-muted">Theme Info with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-inverse theme-muted">Theme Inverse with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
         <div outputclass="p-3 theme-secondary theme-muted">Theme Secondary with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">nested link</xref> inside.</div>
+          <xref href="#">nested link</xref> inside.</div>
       </div>
     </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;div outputclass="p-3 theme-primary theme-muted"&gt;Theme Primary with a
-  &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+  &lt;xref href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
         <codeblock>&lt;div theme="primary-muted" padding="3"&gt;Theme Primary with a
-  &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+  &lt;xref href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -317,67 +338,67 @@
     <example>
       <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 outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-primary theme-subtle p-3 flex-fill text-center rounded">Primary with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-primary theme-muted p-3 flex-fill text-center rounded">Primary with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
       </div>
       <div outputclass="d-flex gap-2 mb-2">
         <div outputclass="theme-accent theme-contrast p-3 flex-fill text-center rounded">Accent with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-accent theme-subtle p-3 flex-fill text-center rounded">Accent with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-accent theme-muted p-3 flex-fill text-center rounded">Accent with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
       </div>
       <div outputclass="d-flex gap-2 mb-2">
         <div outputclass="theme-success theme-contrast p-3 flex-fill text-center rounded">Success with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-success theme-subtle p-3 flex-fill text-center rounded">Success with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-success theme-muted p-3 flex-fill text-center rounded">Success with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
       </div>
       <div outputclass="d-flex gap-2 mb-2">
         <div outputclass="theme-danger theme-contrast p-3 flex-fill text-center rounded">Danger with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-danger theme-subtle p-3 flex-fill text-center rounded">Danger with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-danger theme-muted p-3 flex-fill text-center rounded">Danger with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
       </div>
       <div outputclass="d-flex gap-2 mb-2">
         <div outputclass="theme-warning theme-contrast p-3 flex-fill text-center rounded">Warning with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-warning theme-subtle p-3 flex-fill text-center rounded">Warning with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-warning theme-muted p-3 flex-fill text-center rounded">Warning with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
       </div>
       <div outputclass="d-flex gap-2 mb-2">
         <div outputclass="theme-info theme-contrast p-3 flex-fill text-center rounded">Info with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-info theme-subtle p-3 flex-fill text-center rounded">Info with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-info theme-muted p-3 flex-fill text-center rounded">Info with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
       </div>
       <div outputclass="d-flex gap-2 mb-2">
         <div outputclass="theme-inverse theme-contrast p-3 flex-fill text-center rounded">Inverse with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-inverse theme-subtle p-3 flex-fill text-center rounded">Inverse with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-inverse theme-muted p-3 flex-fill text-center rounded">Inverse with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
       </div>
       <div outputclass="d-flex gap-2 mb-2">
         <div outputclass="theme-secondary theme-contrast p-3 flex-fill text-center rounded">Secondary with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-secondary theme-subtle p-3 flex-fill text-center rounded">Secondary with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
         <div outputclass="theme-secondary theme-muted p-3 flex-fill text-center rounded">Secondary with a
-          <xref outputclass="underline-50 hover:underline-100" href="#">link</xref></div>
+          <xref href="#">link</xref></div>
       </div>
     </example>
     <bodydiv outputclass="nav-pills mt-3">
@@ -385,22 +406,22 @@
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;div outputclass="d-flex gap-2 mb-2"&gt;
   &lt;div outputclass="theme-primary theme-contrast p-3 flex-fill text-center rounded"&gt;Primary with a
-    &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+    &lt;xref href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
   &lt;div outputclass="theme-primary theme-subtle p-3 flex-fill text-center rounded"&gt;Primary with a
-    &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+    &lt;xref href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
   &lt;div outputclass="theme-primary theme-muted p-3 flex-fill text-center rounded"&gt;Primary with a
-    &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+    &lt;xref href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
 &lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
         <codeblock>&lt;div outputclass="d-flex gap-2" margin="b2"&gt;
   &lt;div theme="primary-contrast" padding="3" rounded="yes" outputclass="flex-fill text-center"&gt;Primary with a
-    &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+    &lt;xref href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
   &lt;div theme="primary-subtle" padding="3" rounded="yes" outputclass="flex-fill text-center"&gt;Primary with a
-    &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+    &lt;xref href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
   &lt;div theme="primary-muted" padding="3" rounded="yes" outputclass="flex-fill text-center"&gt;Primary with a
-    &lt;xref outputclass="underline-50 hover:underline-100" href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+    &lt;xref href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
 &lt;/div&gt;</codeblock>
       </section>
     </bodydiv>

From d24c6c93ac4360e489c00ffdb1606a1388e9baab Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Wed, 12 Aug 2026 22:00:47 +0200
Subject: [PATCH 86/87] Fix header

---
 .github/dita-ot/header.xml | 55 +++++++++++++++++++-------------------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml
index e0ae95a3..533ad99f 100644
--- a/.github/dita-ot/header.xml
+++ b/.github/dita-ot/header.xml
@@ -27,33 +27,34 @@
           class="ms-1 badge bg-subtle-primary fg-primary"
         >v6</span>
     </a>
-
-    <ul class="nav navbar-nav flex-row" data-bs-toggle="nav-overflow">
-      <li class="nav-item">
-        <a
-            class="nav-link"
-            href="https://www.dita-ot.org/plugins#!org.dita-bootstrap.html"
-          >Plugin</a>
-      </li>
-      <li class="nav-item">
-        <a
-            class="nav-link"
-            href="https://github.com/dita-bootstrap/dita-bootstrap.html/releases"
-          >Releases</a>
-      </li>
-      <li class="nav-item">
-        <a
-            class="nav-link"
-            href="https://github.com/dita-bootstrap/dita-bootstrap.html"
-          >Source</a>
-      </li>
-      <li class="nav-item">
-        <a
-            class="nav-link"
-            href="https://getbootstrap.com/docs/6.0"
-          >Bootstrap Docs</a>
-      </li>
-    </ul>
+    <div class="nav-overflow" data-bs-toggle="nav-overflow">
+      <ul class="nav navbar-nav flex-row">
+        <li class="nav-item">
+          <a
+              class="nav-link"
+              href="https://www.dita-ot.org/plugins#!org.dita-bootstrap.html"
+            >Plugin</a>
+        </li>
+        <li class="nav-item">
+          <a
+              class="nav-link"
+              href="https://github.com/dita-bootstrap/dita-bootstrap.html/releases"
+            >Releases</a>
+        </li>
+        <li class="nav-item">
+          <a
+              class="nav-link"
+              href="https://github.com/dita-bootstrap/dita-bootstrap.html"
+            >Source</a>
+        </li>
+        <li class="nav-item">
+          <a
+              class="nav-link"
+              href="https://getbootstrap.com/docs/6.0"
+            >Bootstrap Docs</a>
+        </li>
+      </ul>
+    </div>
     <ul class="nav navbar-nav flex-row d-none lg:d-flex ms-auto">
       <!--
         This is a lunr.js search box

From fec807edfe6651444a0db400068e872d6acdafbb Mon Sep 17 00:00:00 2001
From: Jason Fox <jason.fox@fiware.org>
Date: Wed, 12 Aug 2026 22:04:16 +0200
Subject: [PATCH 87/87] Tweak CSS

---
 css/collapsible-toc.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/collapsible-toc.css b/css/collapsible-toc.css
index efe02be5..c5eb0c97 100644
--- a/css/collapsible-toc.css
+++ b/css/collapsible-toc.css
@@ -8,7 +8,7 @@
  */
 
 .bd-links {
-  padding-left: none;
+  padding-left: 0;
   overflow: auto;
   font-weight: 600;
 }