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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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/38] 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 {