@thebase/ui 1.1.6 → 1.2.0

package/dist/baseui.templates.xml

@@ -11,64 +11,64 @@
   </t>
   <t t-name="AlertDialog" t-call="baseui.AlertDialog"/>
   <t t-name="baseui.AlertDialogTrigger">
-    <Button variant="'outline'" attrs="attrs" className="'bu-alert-dialog-trigger'" style="props.style" onClick="() => this.onClick()">
+    <Button variant="'outline'" attrs="attrs" className="'b-alert-dialog-trigger'" style="props.style" onClick="() => this.onClick()">
       <t t-slot="default"/>
     </Button>
   </t>
   <t t-name="AlertDialogTrigger" t-call="baseui.AlertDialogTrigger"/>
   <t t-name="baseui.AlertDialogContent">
-    <div t-if="open" data-slot="alert-dialog-overlay" class="bu-dialog-backdrop" t-ref="root" role="alertdialog" aria-modal="true" tabindex="-1" t-on-keydown="onKeyDown">
-      <div data-slot="alert-dialog-content" t-att-data-size="size" t-att-class="'bu-dialog-panel bu-alert-dialog-panel' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <div t-if="open" data-slot="alert-dialog-overlay" class="b-dialog-backdrop" t-ref="root" role="alertdialog" aria-modal="true" tabindex="-1" t-on-keydown="onKeyDown">
+      <div data-slot="alert-dialog-content" t-att-data-size="size" t-att-class="'b-dialog-panel b-alert-dialog-panel' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
         <t t-slot="default"/>
       </div>
     </div>
   </t>
   <t t-name="AlertDialogContent" t-call="baseui.AlertDialogContent"/>
   <t t-name="baseui.AlertDialogHeader">
-    <div data-slot="alert-dialog-header" class="bu-dialog-header bu-alert-dialog-header" t-att-style="props.style">
+    <div data-slot="alert-dialog-header" class="b-dialog-header b-alert-dialog-header" t-att-style="props.style">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="AlertDialogHeader" t-call="baseui.AlertDialogHeader"/>
   <t t-name="baseui.AlertDialogFooter">
-    <div data-slot="alert-dialog-footer" class="bu-dialog-footer bu-alert-dialog-footer" t-att-style="props.style">
+    <div data-slot="alert-dialog-footer" class="b-dialog-footer b-alert-dialog-footer" t-att-style="props.style">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="AlertDialogFooter" t-call="baseui.AlertDialogFooter"/>
   <t t-name="baseui.AlertDialogMedia">
-    <div data-slot="alert-dialog-media" class="bu-alert-dialog-media" t-att-style="props.style">
+    <div data-slot="alert-dialog-media" class="b-alert-dialog-media" t-att-style="props.style">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="AlertDialogMedia" t-call="baseui.AlertDialogMedia"/>
   <t t-name="baseui.AlertDialogTitle">
-    <h2 data-slot="alert-dialog-title" class="bu-dialog-title bu-alert-dialog-title" t-att-style="props.style">
+    <h2 data-slot="alert-dialog-title" class="b-dialog-title b-alert-dialog-title" t-att-style="props.style">
       <t t-slot="default"/>
     </h2>
   </t>
   <t t-name="AlertDialogTitle" t-call="baseui.AlertDialogTitle"/>
   <t t-name="baseui.AlertDialogDescription">
-    <p data-slot="alert-dialog-description" class="bu-dialog-description bu-alert-dialog-description" t-att-style="props.style">
+    <p data-slot="alert-dialog-description" class="b-dialog-description b-alert-dialog-description" t-att-style="props.style">
       <t t-slot="default"/>
     </p>
   </t>
   <t t-name="AlertDialogDescription" t-call="baseui.AlertDialogDescription"/>
 
   <t t-name="baseui.AlertDialogCancel">
-    <Button variant="'outline'" attrs="attrs" className="'bu-alert-dialog-cancel'" style="props.style" onClick="() => this.onClick()">
+    <Button variant="'outline'" attrs="attrs" className="'b-alert-dialog-cancel'" style="props.style" onClick="() => this.onClick()">
       <t t-slot="default"/>
     </Button>
   </t>
   <t t-name="AlertDialogCancel" t-call="baseui.AlertDialogCancel"/>
   <t t-name="baseui.AlertDialogAction">
-    <Button attrs="attrs" className="'bu-alert-dialog-action'" style="props.style" onClick="() => this.onClick()">
+    <Button attrs="attrs" className="'b-alert-dialog-action'" style="props.style" onClick="() => this.onClick()">
       <t t-slot="default"/>
     </Button>
   </t>
   <t t-name="AlertDialogAction" t-call="baseui.AlertDialogAction"/>
 <t t-name="baseui.alert">
-    <div class="alert bu-alert bu-alert-default" role="alert"><t t-esc="props.message"/></div>
+    <div class="alert b-alert b-alert-default" role="alert"><t t-esc="props.message"/></div>
   </t>
   <t t-name="baseui.Alert">
     <div data-slot="alert" t-att-class="classNames" t-att-style="props.style" role="alert" t-ref="root">
@@ -78,15 +78,15 @@
   </t>
   <t t-name="Alert" t-call="baseui.Alert"/>
   <t t-name="baseui.AlertTitle">
-    <div data-slot="alert-title" t-att-class="'bu-alert-title' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
+    <div data-slot="alert-title" t-att-class="'b-alert-title' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="AlertTitle" t-call="baseui.AlertTitle"/>
   <t t-name="baseui.AlertDescription">
-    <div data-slot="alert-description" t-att-class="'bu-alert-description' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
+    <div data-slot="alert-description" t-att-class="'b-alert-description' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="AlertDescription" t-call="baseui.AlertDescription"/>
   <t t-name="baseui.AlertAction">
-    <div data-slot="alert-action" t-att-class="'bu-alert-action' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
+    <div data-slot="alert-action" t-att-class="'b-alert-action' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="AlertAction" t-call="baseui.AlertAction"/>
 <t t-name="baseui.ApiDoc">
@@ -543,27 +543,27 @@
     <div b-ui="accordion"><t t-slot="default"/></div>
   </t>
   <t t-name="baseui.Accordion">
-    <div data-slot="accordion" t-att-class="'bu-accordion' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="presentation">
+    <div data-slot="accordion" t-att-class="'accordion b-accordion' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="presentation">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="Accordion" t-call="baseui.Accordion"/>
   <t t-name="baseui.AccordionItem">
-    <div data-slot="accordion-item" class="bu-accordion-item" t-att-style="props.style"><t t-slot="default"/></div>
+    <div data-slot="accordion-item" class="accordion-item b-accordion-item" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="AccordionItem" t-call="baseui.AccordionItem"/>
   <t t-name="baseui.AccordionTrigger">
-    <div class="bu-accordion-header" t-att-style="props.style">
-      <Button unstyled="true" className="'bu-accordion-trigger'" attrs="triggerAttrs" onClick="() => this.onClick()">
+    <div class="accordion-header b-accordion-header" t-att-style="props.style">
+      <Button unstyled="true" className="'accordion-button b-accordion-trigger'" attrs="triggerAttrs" onClick="() => this.onClick()">
         <t t-slot="default"/>
-        <Icon name="'chevron-down'" className="'bu-accordion-trigger-icon'"/>
+        <Icon name="'chevron-down'" className="'b-accordion-trigger-icon'"/>
       </Button>
     </div>
   </t>
   <t t-name="AccordionTrigger" t-call="baseui.AccordionTrigger"/>
   <t t-name="baseui.AccordionContent">
-    <div t-ref="root" data-slot="accordion-content" t-att-class="'collapse bu-accordion-content' + (initialOpen ? ' show' : '')" t-att-style="props.style" t-att-aria-hidden="open ? undefined : 'true'">
-      <div class="bu-accordion-content-inner"><t t-slot="default"/></div>
+    <div t-ref="root" data-slot="accordion-content" t-att-class="'accordion-collapse collapse b-accordion-content' + (initialOpen ? ' show' : '')" t-att-style="props.style" t-att-aria-hidden="open ? undefined : 'true'">
+      <div class="accordion-body b-accordion-content-inner"><t t-slot="default"/></div>
     </div>
   </t>
   <t t-name="AccordionContent" t-call="baseui.AccordionContent"/>
@@ -575,7 +575,7 @@
   </t>
   <t t-name="AspectRatio" t-call="baseui.AspectRatio"/>
 <t t-name="baseui.attachment">
-    <div class="bu-attachment"/>
+    <div class="b-attachment"/>
   </t>
   <t t-name="baseui.Attachment">
     <div
@@ -594,16 +594,16 @@
     <div t-att-class="classNames" t-att-data-variant="variant" data-slot="attachment-media" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="baseui.AttachmentContent">
-    <div t-att-class="'bu-attachment-content' + (props.className ? ' ' + props.className : '')" data-slot="attachment-content" t-att-style="props.style"><t t-slot="default"/></div>
+    <div t-att-class="'b-attachment-content' + (props.className ? ' ' + props.className : '')" data-slot="attachment-content" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="baseui.AttachmentTitle">
-    <div t-att-class="'bu-attachment-title' + (props.className ? ' ' + props.className : '')" data-slot="attachment-title" t-att-style="props.style"><t t-slot="default"/></div>
+    <div t-att-class="'b-attachment-title' + (props.className ? ' ' + props.className : '')" data-slot="attachment-title" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="baseui.AttachmentDescription">
-    <div t-att-class="'bu-attachment-description' + (props.className ? ' ' + props.className : '')" data-slot="attachment-description" t-att-style="props.style"><t t-slot="default"/></div>
+    <div t-att-class="'b-attachment-description' + (props.className ? ' ' + props.className : '')" data-slot="attachment-description" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="baseui.AttachmentActions">
-    <div t-att-class="'bu-attachment-actions' + (props.className ? ' ' + props.className : '')" data-slot="attachment-actions" t-att-style="props.style"><t t-slot="default"/></div>
+    <div t-att-class="'b-attachment-actions' + (props.className ? ' ' + props.className : '')" data-slot="attachment-actions" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="baseui.AttachmentAction">
     <Button
@@ -655,7 +655,7 @@
       />
       <t t-if="hasContent" t-slot="default"/>
       <t t-else="">
-        <p class="bu-attachment-dropzone-hint">Drag and drop a file here, or click to browse.</p>
+        <p class="b-attachment-dropzone-hint">Drag and drop a file here, or click to browse.</p>
       </t>
     </div>
   </t>
@@ -670,10 +670,10 @@
   <t t-name="AttachmentGroup" t-call="baseui.AttachmentGroup"/>
   <t t-name="AttachmentDropzone" t-call="baseui.AttachmentDropzone"/>
 <t t-name="baseui.avatar">
-    <span class="bu-avatar"><t t-out="props.content"/></span>
+    <span class="b-avatar"><t t-out="props.content"/></span>
   </t>
   <t t-name="baseui.Avatar">
-    <span t-att-class="'bu-avatar' + (props.className ? ' ' + props.className : '')" t-att-title="props.title" t-att-style="props.style">
+    <span t-att-class="'b-avatar' + (props.className ? ' ' + props.className : '')" t-att-title="props.title" t-att-style="props.style">
       <img t-if="showImage" t-att-src="props.src" t-att-alt="props.alt" t-on-error="onError"/>
       <t t-if="!showImage" t-slot="fallback"/>
     </span>
@@ -688,19 +688,19 @@
   <t t-name="Badge" t-call="baseui.Badge"/>
 <t t-name="baseui.BlockViewer">
     <t t-if="state.embed">
-      <div class="bu-block-embed-root" t-ref="embedRoot"></div>
+      <div class="b-block-embed-root" t-ref="embedRoot"></div>
     </t>
     <t t-else="">
-      <div class="bu-block-viewer">
+      <div class="b-block-viewer">
         <t t-call="baseui.BlockViewerNav"/>
-        <div class="bu-block-viewer-shell">
-          <header class="bu-block-viewer-header">
-            <div class="bu-block-viewer-title">
-              <a href="/blocks" class="bu-block-muted">Blocks</a>
+        <div class="b-block-viewer-shell">
+          <header class="b-block-viewer-header">
+            <div class="b-block-viewer-title">
+              <a href="/blocks" class="b-block-muted">Blocks</a>
               <h1 t-esc="title"/>
               <p t-esc="description"/>
             </div>
-            <div class="bu-block-viewer-actions">
+            <div class="b-block-viewer-actions">
               <Button variant="'outline'" type="'button'" ariaPressed="state.mode === 'preview' ? 'true' : 'false'" onClick="() => this.setMode('preview')">
                 <Icon name="'eye'"/>
                 Preview
@@ -709,13 +709,13 @@
                 <Icon name="'code'"/>
                 Code
               </Button>
-              <Button variant="'ghost'" type="'button'" className="'bu-icon-button'" ariaLabel="'Desktop preview'" ariaPressed="state.viewport === 'desktop' ? 'true' : 'false'" onClick="() => this.setViewport('desktop')">
+              <Button variant="'ghost'" type="'button'" className="'b-icon-button'" ariaLabel="'Desktop preview'" ariaPressed="state.viewport === 'desktop' ? 'true' : 'false'" onClick="() => this.setViewport('desktop')">
                 <Icon name="'monitor'"/>
               </Button>
-              <Button variant="'ghost'" type="'button'" className="'bu-icon-button'" ariaLabel="'Tablet preview'" ariaPressed="state.viewport === 'tablet' ? 'true' : 'false'" onClick="() => this.setViewport('tablet')">
+              <Button variant="'ghost'" type="'button'" className="'b-icon-button'" ariaLabel="'Tablet preview'" ariaPressed="state.viewport === 'tablet' ? 'true' : 'false'" onClick="() => this.setViewport('tablet')">
                 <Icon name="'tablet'"/>
               </Button>
-              <Button variant="'ghost'" type="'button'" className="'bu-icon-button'" ariaLabel="'Mobile preview'" ariaPressed="state.viewport === 'mobile' ? 'true' : 'false'" onClick="() => this.setViewport('mobile')">
+              <Button variant="'ghost'" type="'button'" className="'b-icon-button'" ariaLabel="'Mobile preview'" ariaPressed="state.viewport === 'mobile' ? 'true' : 'false'" onClick="() => this.setViewport('mobile')">
                 <Icon name="'smartphone'"/>
               </Button>
               <Button variant="'outline'" type="'button'" onClick="() => this.copyCode()">
@@ -724,12 +724,12 @@
               </Button>
             </div>
           </header>
-          <main class="bu-block-viewer-main">
-            <section t-att-class="state.mode === 'code' ? 'bu-block-preview-panel is-hidden' : 'bu-block-preview-panel'">
-              <div class="bu-block-preview-frame" t-att-style="previewStyle" t-ref="previewFrame"></div>
+          <main class="b-block-viewer-main">
+            <section t-att-class="state.mode === 'code' ? 'b-block-preview-panel is-hidden' : 'b-block-preview-panel'">
+              <div class="b-block-preview-frame" t-att-style="previewStyle" t-ref="previewFrame"></div>
             </section>
-            <section t-att-class="state.mode === 'code' ? 'bu-block-code-panel is-active' : 'bu-block-code-panel'">
-              <div class="bu-block-code-toolbar" role="group" aria-label="Code source">
+            <section t-att-class="state.mode === 'code' ? 'b-block-code-panel is-active' : 'b-block-code-panel'">
+              <div class="b-block-code-toolbar" role="group" aria-label="Code source">
                 <Button variant="'ghost'" type="'button'" ariaPressed="state.codeVariant === 'owl' ? 'true' : 'false'" onClick="() => this.setCodeVariant('owl')">
                   Base Component
                 </Button>
@@ -737,7 +737,7 @@
                   Template
                 </Button>
               </div>
-              <pre class="bu-block-code" t-esc="activeCode"/>
+              <pre class="b-block-code" t-esc="activeCode"/>
             </section>
           </main>
         </div>
@@ -746,15 +746,15 @@
   </t>
 
   <t t-name="baseui.BlockViewerNav">
-    <header class="bu-example-header">
-      <nav class="container bu-example-nav" aria-label="BaseUI pages">
-        <a class="navbar-brand fw-semibold text-decoration-none bu-example-brand" href="/docs">BaseUI</a>
-        <div class="bu-example-nav-menu" aria-label="BaseUI pages">
+    <header class="b-example-header">
+      <nav class="container b-example-nav" aria-label="BaseUI pages">
+        <a class="navbar-brand fw-semibold text-decoration-none b-example-brand" href="/docs">BaseUI</a>
+        <div class="b-example-nav-menu" aria-label="BaseUI pages">
           <a t-foreach="navItems" t-as="item" t-key="item.key" t-att-href="item.href" t-att-class="item.key === 'blocks' ? 'is-active' : ''" t-att-aria-current="item.key === 'blocks' ? 'page' : undefined">
             <t t-esc="item.label"/>
           </a>
         </div>
-        <ThemeButton variant="'outline'" storageKey="'bu-example-theme'"/>
+        <ThemeButton variant="'outline'" storageKey="'b-example-theme'"/>
       </nav>
     </header>
   </t>
@@ -766,7 +766,7 @@
   <t t-name="baseui.Breadcrumb">
     <nav
       data-slot="breadcrumb"
-      t-att-class="'bu-breadcrumb' + (props.className ? ' ' + props.className : '')"
+      t-att-class="'b-breadcrumb' + (props.className ? ' ' + props.className : '')"
       aria-label="breadcrumb"
       t-att-style="props.style"
     >
@@ -777,7 +777,7 @@
   <t t-name="baseui.BreadcrumbList">
     <ol
       data-slot="breadcrumb-list"
-      t-att-class="'breadcrumb bu-breadcrumb-list' + (props.className ? ' ' + props.className : '')"
+      t-att-class="'breadcrumb b-breadcrumb-list' + (props.className ? ' ' + props.className : '')"
       t-att-style="props.style"
     >
       <t t-slot="default"/>
@@ -826,7 +826,7 @@
       t-att-style="props.style"
     >
       <t t-if="hasCustomContent" t-slot="default"/>
-      <Icon t-else="" name="'chevron-right'" className="'bu-breadcrumb-separator-icon'"/>
+      <Icon t-else="" name="'chevron-right'" className="'b-breadcrumb-separator-icon'"/>
     </li>
   </t>
   <t t-name="BreadcrumbSeparator" t-call="baseui.BreadcrumbSeparator"/>
@@ -839,7 +839,7 @@
       t-att-style="props.style"
     >
       <t t-if="hasCustomContent" t-slot="default"/>
-      <Icon t-else="" name="'ellipsis'" className="'bu-breadcrumb-ellipsis-icon'"/>
+      <Icon t-else="" name="'ellipsis'" className="'b-breadcrumb-ellipsis-icon'"/>
       <span class="visually-hidden">More</span>
     </span>
   </t>
@@ -925,15 +925,15 @@
   <t t-name="ButtonGroupSeparator" t-call="baseui.ButtonGroupSeparator"/>
   <t t-name="ButtonGroupText" t-call="baseui.ButtonGroupText"/>
 <t t-name="baseui.calendar">
-    <div class="bu-calendar"/>
+    <div class="b-calendar"/>
   </t>
   <t t-name="baseui.Calendar">
-    <div t-att-class="'bu-calendar' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
-      <div class="bu-calendar__header"><t t-esc="headerLabel"/></div>
-      <div class="bu-calendar__weekdays">
+    <div t-att-class="'b-calendar' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+      <div class="b-calendar__header"><t t-esc="headerLabel"/></div>
+      <div class="b-calendar__weekdays">
         <span t-foreach="weekdays" t-as="weekday" t-key="weekday" t-esc="weekday"/>
       </div>
-      <div class="bu-calendar__grid">
+      <div class="b-calendar__grid">
         <t t-foreach="days" t-as="cell" t-key="cell_index">
           <span t-if="!cell"/>
           <Button
@@ -950,7 +950,7 @@
   </t>
   <t t-name="Calendar" t-call="baseui.Calendar"/>
 <t t-name="baseui.Card">
-    <div t-tag="tag" t-att-class="'card bu-card' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <div t-tag="tag" t-att-class="'card b-card' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <t t-slot="default"/>
     </div>
   </t>
@@ -991,10 +991,10 @@
   </t>
   <t t-name="CardDescription" t-call="baseui.CardDescription"/>
 <t t-name="baseui.carousel">
-    <div class="bu-carousel"/>
+    <div class="b-carousel"/>
   </t>
   <t t-name="baseui.Carousel">
-    <div t-ref="root" t-att-class="'bu-carousel carousel slide' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <div t-ref="root" t-att-class="'b-carousel carousel slide' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <div class="carousel-inner">
         <t t-slot="default"/>
       </div>
@@ -1002,19 +1002,19 @@
   </t>
   <t t-name="Carousel" t-call="baseui.Carousel"/>
   <t t-name="baseui.CarouselSlide">
-    <div t-ref="root" t-att-class="'bu-carousel-slide carousel-item' + (initialActive ? ' active' : '')" t-att-style="props.style"><t t-slot="default"/></div>
+    <div t-ref="root" t-att-class="'b-carousel-slide carousel-item' + (initialActive ? ' active' : '')" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="CarouselSlide" t-call="baseui.CarouselSlide"/>
   <t t-name="baseui.CarouselPrevious">
-    <Button unstyled="true" className="'bu-carousel-prev'" style="props.style" onClick="() => this.onClick()"><t t-slot="default"/></Button>
+    <Button unstyled="true" className="'b-carousel-prev'" style="props.style" onClick="() => this.onClick()"><t t-slot="default"/></Button>
   </t>
   <t t-name="CarouselPrevious" t-call="baseui.CarouselPrevious"/>
   <t t-name="baseui.CarouselNext">
-    <Button unstyled="true" className="'bu-carousel-next'" style="props.style" onClick="() => this.onClick()"><t t-slot="default"/></Button>
+    <Button unstyled="true" className="'b-carousel-next'" style="props.style" onClick="() => this.onClick()"><t t-slot="default"/></Button>
   </t>
   <t t-name="CarouselNext" t-call="baseui.CarouselNext"/>
 <t t-name="baseui.chart">
-    <div class="bu-chart"/>
+    <div class="b-chart"/>
   </t>
   <t t-name="baseui.Chart">
     <div
@@ -1030,7 +1030,7 @@
     <label b-ui="checkbox"><input type="checkbox"/><t t-slot="default"/></label>
   </t>
   <t t-name="baseui.Checkbox">
-    <label t-att-class="'form-check bu-check ' + (props.className || '')" t-att-style="props.style">
+    <label t-att-class="'form-check b-check ' + (props.className || '')" t-att-style="props.style">
       <input
         type="checkbox"
         class="form-check-input"
@@ -1059,40 +1059,82 @@
     </Button>
   </t>
   <t t-name="ClipboardButton" t-call="baseui.ClipboardButton"/>
+<t t-name="baseui.CodeEditor">
+    <section t-att-class="classNames" t-att-style="props.style">
+      <div class="b-code-editor-header">
+        <div class="b-code-editor-heading">
+          <h3 t-if="props.title" class="fs-6 fw-semibold mb-0" t-esc="props.title"/>
+          <small t-if="globals.length or props.hint" class="text-body-secondary">
+            <t t-if="globals.length">Globals: <t t-foreach="globals" t-as="name" t-key="name"><code t-esc="name"/><t t-if="!name_last">, </t></t>. </t>
+            <t t-esc="props.hint"/>
+          </small>
+        </div>
+        <div class="b-code-editor-actions">
+          <Spinner t-if="state.loading" className="'spinner-border-sm'" label="'Loading'"/>
+          <Badge variant="'muted'" label="language.label"/>
+          <Badge variant="'secondary'" label="lineLabel"/>
+          <t t-if="props.upload">
+            <input type="file" class="d-none" t-ref="fileInput" t-on-change="onFileChange"/>
+            <Button variant="'outline'" size="'sm'" icon="'upload'" label="'Open file'" onClick="() => this.openPicker()"/>
+          </t>
+          <Button t-if="showFormat" variant="'outline'" size="'sm'" icon="'wand-sparkles'" label="'Format'" disabled="!code" onClick="() => this.format()"/>
+          <ClipboardButton variant="'outline'" size="'sm'" value="code" label="'Copy'" copiedLabel="'Copied'" disabled="!code"/>
+          <Button t-if="showToggle" variant="'outline'" size="'sm'" icon="isReadonly ? 'pencil' : 'eye'" label="isReadonly ? 'Edit' : 'View'" onClick="() => this.toggleEditing()"/>
+        </div>
+      </div>
+      <Alert t-if="state.error" variant="'destructive'"><AlertDescription t-esc="state.error"/></Alert>
+
+      <!-- One scroll container for gutter + code: the transparent textarea is stretched over the colouring pre, so both scroll together and no scroll-sync code is needed. -->
+      <div class="b-code-editor-box" t-att-class="{ 'is-readonly': isReadonly }">
+        <pre aria-hidden="true" class="b-code-editor-text b-code-editor-gutter" t-esc="lineNumbers"/>
+        <div class="b-code-editor-body">
+          <pre aria-hidden="true" class="b-code-editor-text"><t t-foreach="tokens" t-as="tok" t-key="tok_index"><span t-att-class="tok.className" t-esc="tok.text"/></t></pre>
+          <textarea t-if="!isReadonly" class="b-code-editor-text b-code-editor-input"
+                    wrap="off" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off"
+                    t-ref="input" t-att-id="props.id" t-att-aria-label="ariaLabel"
+                    t-on-input="onInput" t-on-keydown="onKeydown" t-on-click="(ev) => this.revealCaret(ev.target)"/>
+        </div>
+      </div>
+      <small t-if="!isReadonly" class="text-body-secondary">
+        <Kbd>Tab</Kbd> indents, <Kbd>Shift</Kbd>+<Kbd>Tab</Kbd> outdents, <Kbd>Esc</Kbd> then <Kbd>Tab</Kbd> leaves the editor.
+      </small>
+    </section>
+  </t>
+  <t t-name="CodeEditor" t-call="baseui.CodeEditor"/>
 <t t-name="baseui.collapsible">
     <div b-ui="collapsible"><t t-slot="default"/></div>
   </t>
   <t t-name="baseui.Collapsible">
-    <div t-att-class="'bu-collapsible' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <div t-att-class="'b-collapsible' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="Collapsible" t-call="baseui.Collapsible"/>
   <t t-name="baseui.CollapsibleTrigger">
-    <Button unstyled="true" className="'bu-collapsible-trigger'" style="props.style" attrs="attrs" onClick="() => this.onClick()">
+    <Button unstyled="true" className="'b-collapsible-trigger'" style="props.style" attrs="attrs" onClick="() => this.onClick()">
       <t t-slot="default"/>
     </Button>
   </t>
   <t t-name="CollapsibleTrigger" t-call="baseui.CollapsibleTrigger"/>
   <t t-name="baseui.CollapsibleContent">
-    <div t-ref="root" t-att-class="'collapse bu-collapsible-content' + (initialOpen ? ' show' : '')" t-att-style="props.style" t-att-aria-hidden="open ? undefined : 'true'">
+    <div t-ref="root" t-att-class="'collapse b-collapsible-content' + (initialOpen ? ' show' : '')" t-att-style="props.style" t-att-aria-hidden="open ? undefined : 'true'">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="CollapsibleContent" t-call="baseui.CollapsibleContent"/>
 <t t-name="baseui.combobox">
-    <div class="bu-combobox"/>
+    <div class="b-combobox"/>
   </t>
   <t t-name="baseui.Combobox">
-    <div t-att-class="'bu-combobox' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" t-ref="root">
+    <div t-att-class="'b-combobox' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" t-ref="root">
       <t t-call="baseui.Outlined"><t t-call="baseui.Combobox.field"/></t>
-      <div t-if="disclosure.open" class="bu-combobox-list" role="listbox">
+      <div t-if="disclosure.open" class="b-combobox-list" role="listbox">
         <div
           t-foreach="filteredOptions"
           t-as="option"
           t-key="option.value"
           role="option"
-          class="bu-combobox-option"
+          class="b-combobox-option"
           t-on-click="() => this.choose(option)"
         >
           <t t-esc="option.label"/>
@@ -1117,17 +1159,17 @@
   </t>
   <t t-name="Combobox" t-call="baseui.Combobox"/>
 <t t-name="baseui.command">
-    <div b-ui="command" class="bu-command"/>
+    <div b-ui="command" class="b-command"/>
   </t>
   <t t-name="baseui.Command">
-    <div t-att-class="'bu-command' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="dialog">
+    <div t-att-class="'b-command' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="dialog">
       <input class="form-control" t-att-placeholder="props.placeholder" t-on-input="onInput"/>
-      <div class="bu-command-list">
+      <div class="b-command-list">
         <div
           t-foreach="filteredItems"
           t-as="item"
           t-key="item.value"
-          class="bu-command-item"
+          class="b-command-item"
           t-on-click="() => this.select(item)"
         >
           <t t-esc="item.label"/>
@@ -1137,39 +1179,39 @@
   </t>
   <t t-name="Command" t-call="baseui.Command"/>
 <t t-name="baseui.context-menu">
-    <div class="bu-context-menu"/>
+    <div class="b-context-menu"/>
   </t>
   <t t-name="baseui.ContextMenu">
     <t t-slot="default"/>
   </t>
   <t t-name="ContextMenu" t-call="baseui.ContextMenu"/>
   <t t-name="baseui.ContextMenuTrigger">
-    <div class="bu-context-menu-trigger" t-on-contextmenu="onContextMenu">
+    <div class="b-context-menu-trigger" t-on-contextmenu="onContextMenu">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="ContextMenuTrigger" t-call="baseui.ContextMenuTrigger"/>
   <t t-name="baseui.ContextMenuContent">
-    <div t-if="open" class="bu-context-menu-content" role="menu" t-att-style="style" t-ref="root">
+    <div t-if="open" class="b-context-menu-content" role="menu" t-att-style="style" t-ref="root">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="ContextMenuContent" t-call="baseui.ContextMenuContent"/>
   <t t-name="baseui.ContextMenuItem">
-    <div class="bu-context-menu-item" role="menuitem" tabindex="0" t-on-click="onClick">
+    <div class="b-context-menu-item" role="menuitem" tabindex="0" t-on-click="onClick">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="ContextMenuItem" t-call="baseui.ContextMenuItem"/>
 <t t-name="baseui.data-table">
-    <div class="bu-data-table"/>
+    <div class="b-data-table"/>
   </t>
   <t t-name="baseui.DataTable.Table">
-    <div class="bu-data-table__viewport" t-att-style="viewportStyle">
-      <table class="table bu-data-table__table">
+    <div class="b-data-table__viewport" t-att-style="viewportStyle">
+      <table class="table b-data-table__table">
         <thead>
           <tr>
-            <th t-if="hasSelection" class="bu-data-table__selection-cell">
+            <th t-if="hasSelection" class="b-data-table__selection-cell">
               <input
                 type="checkbox"
                 class="form-check-input"
@@ -1188,20 +1230,20 @@
               <Button
                 t-if="isColumnSortable(column)"
                 unstyled="true"
-                className="'bu-data-table__header-button'"
+                className="'b-data-table__header-button'"
                 onClick="() => this.sortBy(column.key)"
               >
                 <span><t t-esc="columnLabel(column)"/></span>
-                <span class="bu-data-table__sort-icon" t-att-data-icon="sortIcon(column.key)" aria-hidden="true"></span>
+                <span class="b-data-table__sort-icon" t-att-data-icon="sortIcon(column.key)" aria-hidden="true"></span>
               </Button>
               <t t-else="" t-esc="columnLabel(column)"/>
             </th>
-            <th t-if="rowActions.length" class="bu-data-table__actions-cell"><span class="visually-hidden">Actions</span></th>
+            <th t-if="rowActions.length" class="b-data-table__actions-cell"><span class="visually-hidden">Actions</span></th>
           </tr>
         </thead>
         <tbody>
           <tr t-if="!pageRows.length">
-            <td t-att-colspan="visibleColumns.length + (hasSelection ? 1 : 0) + (rowActions.length ? 1 : 0)" class="bu-data-table__empty">
+            <td t-att-colspan="visibleColumns.length + (hasSelection ? 1 : 0) + (rowActions.length ? 1 : 0)" class="b-data-table__empty">
               <t t-esc="emptyLabel"/>
             </td>
           </tr>
@@ -1211,7 +1253,7 @@
             t-key="rowKey(row, row_index)"
             t-att-data-state="isSelected(row, row_index) ? 'selected' : undefined"
           >
-            <td t-if="hasSelection" class="bu-data-table__selection-cell">
+            <td t-if="hasSelection" class="b-data-table__selection-cell">
               <input
                 type="checkbox"
                 class="form-check-input"
@@ -1229,10 +1271,10 @@
               <t t-if="column.component">
                 <t t-component="column.component" t-props="cellComponentProps(row, column)"/>
               </t>
-              <span t-else="" t-att-class="column.format === 'currency' ? 'bu-data-table__money' : ''"><t t-esc="cellValue(row, column)"/></span>
+              <span t-else="" t-att-class="column.format === 'currency' ? 'b-data-table__money' : ''"><t t-esc="cellValue(row, column)"/></span>
             </td>
-            <td t-if="rowActions.length" class="bu-data-table__actions-cell">
-              <div class="bu-data-table__actions">
+            <td t-if="rowActions.length" class="b-data-table__actions-cell">
+              <div class="b-data-table__actions">
                 <Button variant="'ghost'" size="'icon'" icon="'ellipsis'" aria-label="'Open menu'" onClick="(event) => this.toggleRowActions(row, row_index, event)"/>
               </div>
             </td>
@@ -1243,25 +1285,25 @@
   </t>
   <t t-name="baseui.DataTable">
     <div t-att-class="classNames" t-att-style="props.style" data-slot="data-table">
-      <div class="bu-data-table__toolbar" t-if="hasSearch || hasColumnToggle || hasToolbarActions">
+      <div class="b-data-table__toolbar" t-if="hasSearch || hasColumnToggle || hasToolbarActions">
         <input
           t-if="hasSearch"
           type="search"
-          class="form-control bu-data-table__search"
+          class="form-control b-data-table__search"
           t-att-placeholder="filterPlaceholder"
           t-att-value="state.query"
           t-on-input="onSearchInput"
         />
-        <div t-if="hasColumnToggle || hasToolbarActions" class="bu-data-table__toolbar-end">
+        <div t-if="hasColumnToggle || hasToolbarActions" class="b-data-table__toolbar-end">
           <t t-if="hasToolbarActions" t-slot="toolbarActions"/>
-          <div t-if="hasColumnToggle" class="bu-data-table__columns">
+          <div t-if="hasColumnToggle" class="b-data-table__columns">
             <Button variant="'outline'" label="'Columns'" icon="'chevron-down'" iconPosition="'end'" aria-label="'Toggle columns'" onClick="() => this.toggleColumnsMenu()"/>
-            <div t-if="state.columnsOpen" class="bu-data-table__columns-menu" role="menu" data-state="open">
+            <div t-if="state.columnsOpen" class="b-data-table__columns-menu" role="menu" data-state="open">
               <label
                 t-foreach="columns.filter((column) => column.hideable !== false)"
                 t-as="column"
                 t-key="column.key"
-                class="bu-data-table__columns-item"
+                class="b-data-table__columns-item"
               >
                 <input
                   type="checkbox"
@@ -1277,29 +1319,29 @@
       </div>
       <t t-call="baseui.DataTable.Table"/>
       <t t-call="baseui.DataTable.Cards"/>
-      <div class="bu-data-table__pagination" t-if="hasPagination">
-        <div class="bu-data-table__selection-summary">
+      <div class="b-data-table__pagination" t-if="hasPagination">
+        <div class="b-data-table__selection-summary">
           <t t-esc="selectionLabel"/>
         </div>
-        <div class="bu-data-table__pager">
-          <div t-if="pageSizeOptions.length" class="bu-data-table__page-size">
+        <div class="b-data-table__pager">
+          <div t-if="pageSizeOptions.length" class="b-data-table__page-size">
             <span>Rows per page</span>
             <select class="form-select form-select-sm" t-on-change="(event) => this.setPageSize(event.target.value)">
               <option t-foreach="pageSizeOptions" t-as="option" t-key="option" t-att-value="optionValue(option)" t-att-selected="option === state.pageSize"><t t-esc="option"/></option>
             </select>
           </div>
-          <div class="bu-data-table__page-label"><t t-esc="pageLabel"/></div>
+          <div class="b-data-table__page-label"><t t-esc="pageLabel"/></div>
           <Button variant="'outline'" size="'sm'" label="'Previous'" aria-label="'Go to previous page'" disabled="!canPreviousPage" onClick="() => this.setPage(state.page - 1)"/>
           <Button variant="'outline'" size="'sm'" label="'Next'" aria-label="'Go to next page'" disabled="!canNextPage" onClick="() => this.setPage(state.page + 1)"/>
         </div>
       </div>
-      <div t-if="openRowAction" t-portal="'body'" class="bu-data-table__actions-menu" role="menu" data-state="open" t-att-style="state.actionMenuStyle" t-ref="actionsMenu">
+      <div t-if="openRowAction" t-portal="'body'" class="b-data-table__actions-menu" role="menu" data-state="open" t-att-style="state.actionMenuStyle" t-ref="actionsMenu">
         <Button
           t-foreach="rowActions"
           t-as="action"
           t-key="action.label"
           unstyled="true"
-          className="'bu-data-table__actions-item'"
+          className="'b-data-table__actions-item'"
           attrs="{ role: 'menuitem' }"
           onClick="() => this.onAction(action, openRowAction.row, openRowAction.index)"
         >
@@ -1310,18 +1352,18 @@
   </t>
   <t t-name="DataTable" t-call="baseui.DataTable"/>
 <t t-name="baseui.DataTable.Cards">
-    <div class="bu-data-table__cards">
-      <div t-if="!pageRows.length" class="bu-data-table__empty-card">
+    <div class="b-data-table__cards">
+      <div t-if="!pageRows.length" class="b-data-table__empty-card">
         <t t-esc="emptyLabel"/>
       </div>
       <div
         t-foreach="pageRows"
         t-as="row"
         t-key="rowKey(row, row_index)"
-        class="bu-data-table__card"
+        class="b-data-table__card"
         t-att-data-state="isSelected(row, row_index) ? 'selected' : undefined"
       >
-        <div class="bu-data-table__card-header" t-if="hasSelection || rowActions.length">
+        <div class="b-data-table__card-header" t-if="hasSelection || rowActions.length">
           <input
             t-if="hasSelection"
             type="checkbox"
@@ -1330,17 +1372,17 @@
             t-att-checked="isSelected(row, row_index)"
             t-on-change="(event) => this.toggleRow(row, row_index, event.target.checked)"
           />
-          <div t-if="rowActions.length" class="bu-data-table__actions">
+          <div t-if="rowActions.length" class="b-data-table__actions">
             <Button variant="'ghost'" size="'icon'" icon="'ellipsis'" aria-label="'Open menu'" onClick="(event) => this.toggleRowActions(row, row_index, event)"/>
           </div>
         </div>
-        <div class="bu-data-table__card-field" t-foreach="visibleColumns" t-as="column" t-key="column.key">
-          <span class="bu-data-table__card-label"><t t-esc="columnLabel(column)"/></span>
-          <span class="bu-data-table__card-value">
+        <div class="b-data-table__card-field" t-foreach="visibleColumns" t-as="column" t-key="column.key">
+          <span class="b-data-table__card-label"><t t-esc="columnLabel(column)"/></span>
+          <span class="b-data-table__card-value">
             <t t-if="column.component">
               <t t-component="column.component" t-props="cellComponentProps(row, column)"/>
             </t>
-            <span t-else="" t-att-class="column.format === 'currency' ? 'bu-data-table__money' : ''"><t t-esc="cellValue(row, column)"/></span>
+            <span t-else="" t-att-class="column.format === 'currency' ? 'b-data-table__money' : ''"><t t-esc="cellValue(row, column)"/></span>
           </span>
         </div>
       </div>
@@ -1373,22 +1415,22 @@
   <t t-name="Dialog" t-call="baseui.Dialog"/>
 
   <t t-name="baseui.DialogTrigger">
-    <span class="bu-dialog-trigger" data-slot="dialog-trigger" t-att-style="props.style" t-on-click="onClick">
+    <span class="b-dialog-trigger" data-slot="dialog-trigger" t-att-style="props.style" t-on-click="onClick">
       <t t-slot="default"/>
     </span>
   </t>
   <t t-name="DialogTrigger" t-call="baseui.DialogTrigger"/>
 
   <t t-name="baseui.DialogContent">
-    <div t-ref="root" class="modal fade bu-dialog-backdrop" data-slot="dialog-overlay" tabindex="-1" aria-hidden="true" t-att-style="props.style">
+    <div t-ref="root" class="modal fade b-dialog-backdrop" data-slot="dialog-overlay" tabindex="-1" aria-hidden="true" t-att-style="props.style">
       <div class="modal-dialog modal-dialog-centered">
-        <div t-att-class="'modal-content bu-dialog-panel' + (props.className ? ' ' + props.className : '')" data-slot="dialog-content">
+        <div t-att-class="'modal-content b-dialog-panel' + (props.className ? ' ' + props.className : '')" data-slot="dialog-content">
           <t t-slot="default"/>
           <Button
             t-if="showCloseButton"
             variant="'ghost'"
             size="'icon-sm'"
-            className="'bu-dialog-close bu-dialog-close-control'"
+            className="'b-dialog-close b-dialog-close-control'"
             aria-label="'Close'"
             icon="'x'"
             attrs="{'data-slot': 'dialog-close', 'data-bs-dismiss': 'modal'}"
@@ -1402,28 +1444,28 @@
   <t t-name="DialogContent" t-call="baseui.DialogContent"/>
 
   <t t-name="baseui.DialogHeader">
-    <div t-att-class="'bu-dialog-header' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-slot="dialog-header">
+    <div t-att-class="'b-dialog-header' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-slot="dialog-header">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="DialogHeader" t-call="baseui.DialogHeader"/>
 
   <t t-name="baseui.DialogFooter">
-    <div t-att-class="'bu-dialog-footer' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-slot="dialog-footer">
+    <div t-att-class="'b-dialog-footer' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-slot="dialog-footer">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="DialogFooter" t-call="baseui.DialogFooter"/>
 
   <t t-name="baseui.DialogTitle">
-    <h2 t-att-class="'bu-dialog-title' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-slot="dialog-title">
+    <h2 t-att-class="'b-dialog-title' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-slot="dialog-title">
       <t t-slot="default"/>
     </h2>
   </t>
   <t t-name="DialogTitle" t-call="baseui.DialogTitle"/>
 
   <t t-name="baseui.DialogDescription">
-    <p t-att-class="'bu-dialog-description' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-slot="dialog-description">
+    <p t-att-class="'b-dialog-description' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-slot="dialog-description">
       <t t-slot="default"/>
     </p>
   </t>
@@ -1432,7 +1474,7 @@
   <t t-name="baseui.DialogClose">
     <Button
       variant="'outline'"
-      className="'bu-dialog-close' + (props.className ? ' ' + props.className : '')"
+      className="'b-dialog-close' + (props.className ? ' ' + props.className : '')"
       style="props.style"
       attrs="{'data-slot': 'dialog-close', 'data-bs-dismiss': 'modal'}"
     >
@@ -1442,34 +1484,34 @@
   <t t-name="DialogClose" t-call="baseui.DialogClose"/>
 <t t-name="baseui.direction"><div b-ui="direction"><t t-esc="props.content"/></div></t>
   <t t-name="baseui.Direction">
-    <div t-att-class="'bu-direction' + (props.className ? ' ' + props.className : '')" t-att-dir="dir" t-att-style="props.style"><t t-slot="default"/></div>
+    <div t-att-class="'b-direction' + (props.className ? ' ' + props.className : '')" t-att-dir="dir" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="Direction" t-call="baseui.Direction"/>
 <t t-name="baseui.drawer"><div b-ui="drawer"><div b-drawer-panel=""><t t-esc="props.content"/></div></div></t>
   <t t-name="baseui.Drawer"><t t-slot="default"/></t>
   <t t-name="Drawer" t-call="baseui.Drawer"/>
   <t t-name="baseui.DrawerTrigger">
-    <Button variant="'outline'" className="'bu-drawer-trigger'" style="props.style" onClick="() => this.onClick()"><t t-slot="default"/></Button>
+    <Button variant="'outline'" className="'b-drawer-trigger'" style="props.style" onClick="() => this.onClick()"><t t-slot="default"/></Button>
   </t>
   <t t-name="DrawerTrigger" t-call="baseui.DrawerTrigger"/>
   <t t-name="baseui.DrawerContent">
-    <div t-ref="root" class="offcanvas offcanvas-bottom bu-drawer-overlay" tabindex="-1" t-att-style="props.style">
-      <div class="bu-drawer-panel">
+    <div t-ref="root" class="offcanvas offcanvas-bottom b-drawer-overlay" tabindex="-1" t-att-style="props.style">
+      <div class="b-drawer-panel">
         <t t-slot="default"/>
       </div>
     </div>
   </t>
   <t t-name="DrawerContent" t-call="baseui.DrawerContent"/>
-  <t t-name="baseui.DrawerHeader"><div class="bu-drawer-header" t-att-style="props.style"><t t-slot="default"/></div></t>
+  <t t-name="baseui.DrawerHeader"><div class="b-drawer-header" t-att-style="props.style"><t t-slot="default"/></div></t>
   <t t-name="DrawerHeader" t-call="baseui.DrawerHeader"/>
-  <t t-name="baseui.DrawerFooter"><div class="bu-drawer-footer" t-att-style="props.style"><t t-slot="default"/></div></t>
+  <t t-name="baseui.DrawerFooter"><div class="b-drawer-footer" t-att-style="props.style"><t t-slot="default"/></div></t>
   <t t-name="DrawerFooter" t-call="baseui.DrawerFooter"/>
-  <t t-name="baseui.DrawerTitle"><h2 class="bu-drawer-title" t-att-style="props.style"><t t-slot="default"/></h2></t>
+  <t t-name="baseui.DrawerTitle"><h2 class="b-drawer-title" t-att-style="props.style"><t t-slot="default"/></h2></t>
   <t t-name="DrawerTitle" t-call="baseui.DrawerTitle"/>
-  <t t-name="baseui.DrawerDescription"><p class="bu-drawer-description" t-att-style="props.style"><t t-slot="default"/></p></t>
+  <t t-name="baseui.DrawerDescription"><p class="b-drawer-description" t-att-style="props.style"><t t-slot="default"/></p></t>
   <t t-name="DrawerDescription" t-call="baseui.DrawerDescription"/>
   <t t-name="baseui.DrawerClose">
-    <Button variant="'outline'" attrs="attrs" className="'bu-drawer-close'" style="props.style"><t t-slot="default"/></Button>
+    <Button variant="'outline'" attrs="attrs" className="'b-drawer-close'" style="props.style"><t t-slot="default"/></Button>
   </t>
   <t t-name="DrawerClose" t-call="baseui.DrawerClose"/>
 <t t-name="baseui.dropdown-menu">
@@ -1479,7 +1521,7 @@
     </div>
   </t>
   <t t-name="baseui.DropdownMenu">
-    <div data-slot="dropdown-menu" t-att-class="'bu-dropdown-menu dropdown' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" t-ref="root">
+    <div data-slot="dropdown-menu" t-att-class="'b-dropdown-menu dropdown' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" t-ref="root">
       <t t-slot="default"/>
     </div>
   </t>
@@ -1503,20 +1545,20 @@
   </t>
   <t t-name="DropdownMenuGroup" t-call="baseui.DropdownMenuGroup"/>
   <t t-name="baseui.DropdownMenuLabel">
-    <div data-slot="dropdown-menu-label" t-att-data-inset="props.inset ? '' : undefined" t-att-class="'bu-dropdown-menu-label' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <div data-slot="dropdown-menu-label" t-att-data-inset="props.inset ? '' : undefined" t-att-class="'dropdown-header b-dropdown-menu-label' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="DropdownMenuLabel" t-call="baseui.DropdownMenuLabel"/>
   <t t-name="baseui.DropdownMenuItem">
-    <div data-slot="dropdown-menu-item" t-att-data-inset="props.inset ? '' : undefined" t-att-data-variant="variant" t-att-aria-disabled="props.disabled ? 'true' : undefined" t-att-class="'bu-dropdown-menu-item' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="menuitem" tabindex="0" t-on-click="onClick">
+    <div data-slot="dropdown-menu-item" t-att-data-inset="props.inset ? '' : undefined" t-att-data-variant="variant" t-att-aria-disabled="props.disabled ? 'true' : undefined" t-att-class="'dropdown-item b-dropdown-menu-item' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="menuitem" tabindex="0" t-on-click="onClick">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="DropdownMenuItem" t-call="baseui.DropdownMenuItem"/>
   <t t-name="baseui.DropdownMenuCheckboxItem">
-    <div data-slot="dropdown-menu-checkbox-item" t-att-data-inset="props.inset ? '' : undefined" t-att-data-checked="props.checked ? '' : undefined" t-att-aria-checked="props.checked ? 'true' : 'false'" t-att-aria-disabled="props.disabled ? 'true' : undefined" t-att-class="'bu-dropdown-menu-checkbox-item' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="menuitemcheckbox" tabindex="0" t-on-click="onClick">
-      <span data-slot="dropdown-menu-checkbox-item-indicator" class="bu-dropdown-menu-item-indicator">
+    <div data-slot="dropdown-menu-checkbox-item" t-att-data-inset="props.inset ? '' : undefined" t-att-data-checked="props.checked ? '' : undefined" t-att-aria-checked="props.checked ? 'true' : 'false'" t-att-aria-disabled="props.disabled ? 'true' : undefined" t-att-class="'dropdown-item b-dropdown-menu-checkbox-item' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="menuitemcheckbox" tabindex="0" t-on-click="onClick">
+      <span data-slot="dropdown-menu-checkbox-item-indicator" class="b-dropdown-menu-item-indicator">
         <Icon t-if="props.checked" name="'check'"/>
       </span>
       <t t-slot="default"/>
@@ -1530,8 +1572,8 @@
   </t>
   <t t-name="DropdownMenuRadioGroup" t-call="baseui.DropdownMenuRadioGroup"/>
   <t t-name="baseui.DropdownMenuRadioItem">
-    <div data-slot="dropdown-menu-radio-item" t-att-data-inset="props.inset ? '' : undefined" t-att-data-checked="checked ? '' : undefined" t-att-aria-checked="checked ? 'true' : 'false'" t-att-aria-disabled="props.disabled ? 'true' : undefined" t-att-class="'bu-dropdown-menu-radio-item' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="menuitemradio" tabindex="0" t-on-click="onClick">
-      <span data-slot="dropdown-menu-radio-item-indicator" class="bu-dropdown-menu-item-indicator">
+    <div data-slot="dropdown-menu-radio-item" t-att-data-inset="props.inset ? '' : undefined" t-att-data-checked="checked ? '' : undefined" t-att-aria-checked="checked ? 'true' : 'false'" t-att-aria-disabled="props.disabled ? 'true' : undefined" t-att-class="'dropdown-item b-dropdown-menu-radio-item' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="menuitemradio" tabindex="0" t-on-click="onClick">
+      <span data-slot="dropdown-menu-radio-item-indicator" class="b-dropdown-menu-item-indicator">
         <Icon t-if="checked" name="'check'"/>
       </span>
       <t t-slot="default"/>
@@ -1539,30 +1581,30 @@
   </t>
   <t t-name="DropdownMenuRadioItem" t-call="baseui.DropdownMenuRadioItem"/>
   <t t-name="baseui.DropdownMenuSeparator">
-    <div data-slot="dropdown-menu-separator" class="bu-dropdown-menu-separator" t-att-style="props.style" role="separator"/>
+    <div data-slot="dropdown-menu-separator" class="dropdown-divider b-dropdown-menu-separator" t-att-style="props.style" role="separator"/>
   </t>
   <t t-name="DropdownMenuSeparator" t-call="baseui.DropdownMenuSeparator"/>
   <t t-name="baseui.DropdownMenuShortcut">
-    <span data-slot="dropdown-menu-shortcut" t-att-class="'bu-dropdown-menu-shortcut' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <span data-slot="dropdown-menu-shortcut" t-att-class="'b-dropdown-menu-shortcut' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <t t-slot="default"/>
     </span>
   </t>
   <t t-name="DropdownMenuShortcut" t-call="baseui.DropdownMenuShortcut"/>
   <t t-name="baseui.DropdownMenuSub">
-    <div data-slot="dropdown-menu-sub" class="bu-dropdown-menu-sub" t-att-style="props.style" t-ref="root" t-on-mouseleave="env.dropdownSubClose">
+    <div data-slot="dropdown-menu-sub" class="b-dropdown-menu-sub" t-att-style="props.style" t-ref="root" t-on-mouseleave="env.dropdownSubClose">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="DropdownMenuSub" t-call="baseui.DropdownMenuSub"/>
   <t t-name="baseui.DropdownMenuSubTrigger">
-    <div data-slot="dropdown-menu-sub-trigger" t-att-data-inset="props.inset ? '' : undefined" t-att-data-state="env.dropdownSub.open ? 'open' : 'closed'" t-att-aria-expanded="env.dropdownSub.open ? 'true' : 'false'" t-att-aria-disabled="props.disabled ? 'true' : undefined" t-att-class="'bu-dropdown-menu-sub-trigger' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="menuitem" tabindex="0" aria-haspopup="menu" t-on-mouseenter="onMouseEnter" t-on-focus="onMouseEnter" t-on-click="onClick">
+    <div data-slot="dropdown-menu-sub-trigger" t-att-data-inset="props.inset ? '' : undefined" t-att-data-state="env.dropdownSub.open ? 'open' : 'closed'" t-att-aria-expanded="env.dropdownSub.open ? 'true' : 'false'" t-att-aria-disabled="props.disabled ? 'true' : undefined" t-att-class="'b-dropdown-menu-sub-trigger' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="menuitem" tabindex="0" aria-haspopup="menu" t-on-mouseenter="onMouseEnter" t-on-focus="onMouseEnter" t-on-click="onClick">
       <t t-slot="default"/>
-      <Icon name="'chevron-right'" className="'bu-dropdown-menu-sub-trigger-icon'"/>
+      <Icon name="'chevron-right'" className="'b-dropdown-menu-sub-trigger-icon'"/>
     </div>
   </t>
   <t t-name="DropdownMenuSubTrigger" t-call="baseui.DropdownMenuSubTrigger"/>
   <t t-name="baseui.DropdownMenuSubContent">
-    <div t-if="open" data-slot="dropdown-menu-sub-content" t-att-class="'bu-dropdown-menu-sub-content' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="menu" data-state="open" data-side="right" tabindex="-1">
+    <div t-if="open" data-slot="dropdown-menu-sub-content" t-att-class="'b-dropdown-menu-sub-content' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="menu" data-state="open" data-side="right" tabindex="-1">
       <t t-slot="default"/>
     </div>
   </t>
@@ -1574,19 +1616,19 @@
     <div t-att-class="classNames" t-att-style="props.style" role="status"><t t-slot="default"/></div>
   </t>
   <t t-name="baseui.EmptyHeader">
-    <div t-att-class="'bu-empty-header' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
+    <div t-att-class="'b-empty-header' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="baseui.EmptyMedia">
     <div t-att-class="classNames" t-att-data-variant="variant" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="baseui.EmptyTitle">
-    <div t-att-class="'bu-empty-title' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
+    <div t-att-class="'b-empty-title' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="baseui.EmptyDescription">
-    <div t-att-class="'bu-empty-description' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
+    <div t-att-class="'b-empty-description' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="baseui.EmptyContent">
-    <div t-att-class="'bu-empty-content' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
+    <div t-att-class="'b-empty-content' + (props.className ? ' ' + props.className : '')" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="Empty" t-call="baseui.Empty"/>
   <t t-name="EmptyHeader" t-call="baseui.EmptyHeader"/>
@@ -1595,7 +1637,7 @@
   <t t-name="EmptyDescription" t-call="baseui.EmptyDescription"/>
   <t t-name="EmptyContent" t-call="baseui.EmptyContent"/>
 <t t-name="baseui.field">
-    <div b-ui="field" class="bu-field" role="group"><t t-slot="default"/></div>
+    <div b-ui="field" class="b-field" role="group"><t t-slot="default"/></div>
   </t>
   <t t-name="baseui.FieldSet">
     <fieldset t-att-class="classNames" t-att-style="props.style" data-slot="field-set">
@@ -1662,8 +1704,8 @@
 
   <t t-name="baseui.FieldSeparator">
     <div t-att-class="classNames" t-att-style="props.style" data-slot="field-separator" t-att-data-content="hasContent ? 'true' : 'false'">
-      <span class="bu-field-separator-line" aria-hidden="true"></span>
-      <span t-if="hasContent" class="bu-field-separator-content" data-slot="field-separator-content">
+      <span class="b-field-separator-line" aria-hidden="true"></span>
+      <span t-if="hasContent" class="b-field-separator-content" data-slot="field-separator-content">
         <t t-slot="default"/>
       </span>
     </div>
@@ -1679,18 +1721,18 @@
   <t t-name="FieldError" t-call="baseui.FieldError"/>
 <t t-name="baseui.Form">
     <form t-att-class="classNames" t-att-style="props.style" data-slot="form" novalidate="novalidate" t-on-submit="submit">
-      <div class="bu-form-header">
-        <h3 class="bu-form-title">Bug Report</h3>
-        <p class="bu-form-description">Help us improve by reporting bugs you encounter.</p>
+      <div class="b-form-header">
+        <h3 class="b-form-title">Bug Report</h3>
+        <p class="b-form-description">Help us improve by reporting bugs you encounter.</p>
       </div>
 
-      <FieldGroup className="'bu-form-fields'">
+      <FieldGroup className="'b-form-fields'">
         <Field invalid="titleInvalid">
-          <FieldLabel for="'bu-form-title'">Bug Title</FieldLabel>
+          <FieldLabel for="'b-form-title'">Bug Title</FieldLabel>
           <input
-            id="bu-form-title"
+            id="b-form-title"
             name="title"
-            class="form-control bu-form-control"
+            class="form-control b-form-control"
             type="text"
             t-att-placeholder="titlePlaceholder"
             t-model="state.title"
@@ -1701,20 +1743,20 @@
         </Field>
 
         <Field invalid="descriptionInvalid">
-          <FieldLabel for="'bu-form-description'">Description</FieldLabel>
-          <div class="bu-form-input-group" data-slot="input-group" role="group">
+          <FieldLabel for="'b-form-description'">Description</FieldLabel>
+          <div class="b-form-input-group" data-slot="input-group" role="group">
             <textarea
-              id="bu-form-description"
+              id="b-form-description"
               name="description"
-              class="form-control bu-form-textarea"
+              class="form-control b-form-textarea"
               rows="6"
               t-att-placeholder="descriptionPlaceholder"
               t-att-maxlength="maxDescriptionLength"
               t-model="state.description"
               t-att-aria-invalid="descriptionInvalid ? 'true' : undefined"
             ></textarea>
-            <div class="bu-form-counter" data-slot="input-group-addon" data-align="block-end">
-              <span class="bu-form-counter-text">
+            <div class="b-form-counter" data-slot="input-group-addon" data-align="block-end">
+              <span class="b-form-counter-text">
                 <t t-esc="descriptionLength"/>/<t t-esc="maxDescriptionLength"/> characters
               </span>
             </div>
@@ -1724,7 +1766,7 @@
         </Field>
       </FieldGroup>
 
-      <Field orientation="'horizontal'" className="'bu-form-actions'">
+      <Field orientation="'horizontal'" className="'b-form-actions'">
         <Button type="'button'" variant="'outline'" onClick="() => this.reset()">Reset</Button>
         <Button type="'submit'">Submit</Button>
       </Field>
@@ -1734,7 +1776,7 @@
 <t t-name="baseui.hover-card"><span b-ui="hover-card"><t t-esc="props.content"/></span></t>
   <t t-name="baseui.HoverCard">
     <span
-      t-att-class="'bu-hover-card' + (props.className ? ' ' + props.className : '')"
+      t-att-class="'b-hover-card' + (props.className ? ' ' + props.className : '')"
       t-att-style="props.style"
       t-on-mouseenter="() => this.open()"
       t-on-mouseleave="() => this.close()"
@@ -1747,11 +1789,11 @@
   </t>
   <t t-name="HoverCard" t-call="baseui.HoverCard"/>
   <t t-name="baseui.HoverCardTrigger">
-    <span class="bu-hover-card-trigger" t-att-style="props.style" aria-haspopup="dialog"><t t-slot="default"/></span>
+    <span class="b-hover-card-trigger" t-att-style="props.style" aria-haspopup="dialog"><t t-slot="default"/></span>
   </t>
   <t t-name="HoverCardTrigger" t-call="baseui.HoverCardTrigger"/>
   <t t-name="baseui.HoverCardContent">
-    <span t-if="open" t-att-class="'bu-hover-card-content' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="dialog"><t t-slot="default"/></span>
+    <span t-if="open" t-att-class="'b-hover-card-content' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" role="dialog"><t t-slot="default"/></span>
   </t>
   <t t-name="HoverCardContent" t-call="baseui.HoverCardContent"/>
 <t t-name="baseui.Icon">
@@ -1766,18 +1808,26 @@
     ></span>
   </t>
   <t t-name="Icon" t-call="baseui.Icon"/>
-<t t-name="baseui.Outlined">
+<t t-name="baseui.Outlined.label">
+    <div t-if="label" class="b-input-label">
+      <span class="b-input-label-text" t-esc="label"/>
+      <Tooltip t-if="tipText" content="tipText" className="'b-input-tip'"><t t-set-slot="trigger"><IconCircleQuestionMark/></t></Tooltip>
+    </div>
+  </t>
+  <t t-name="baseui.Outlined">
     <div t-if="isOutlined" t-att-class="outlinedClassNames" t-att-style="labelStyle">
-      <div class="bu-input-box">
-        <Icon t-if="leadingIcon" name="leadingIcon" className="'bu-input-icon bu-input-leading'"/>
+      <div class="b-input-box" t-ref="box">
+        <Icon t-if="leadingIcon" name="leadingIcon" className="'b-input-icon b-input-leading'"/>
         <t t-out="0"/>
-        <span class="bu-input-label" t-esc="label"/>
-        <Icon t-if="trailingIcon" name="trailingIcon" className="'bu-input-icon bu-input-trailing'"/>
-        <Tooltip t-if="tipText" content="tipText" className="'bu-input-tip'"><t t-set-slot="trigger"><Icon name="'info'"/></t></Tooltip>
+        <t t-call="baseui.Outlined.label"/>
+        <Icon t-if="trailingIcon" name="trailingIcon" className="'b-input-icon b-input-trailing'"/>
+        <div t-if="hasStart" class="b-input-slot b-input-slot-start" t-ref="start"><t t-slot="start"/></div>
+        <div t-if="hasEnd" class="b-input-slot b-input-slot-end" t-ref="end"><t t-slot="end"/></div>
+        <div t-if="hasFooter" class="b-input-slot b-input-slot-footer" t-ref="footer"><t t-slot="footer"/></div>
       </div>
-      <div t-if="supportingText or props.maxLength" class="bu-input-support">
+      <div t-if="supportingText or props.maxLength" class="b-input-support">
         <span t-att-id="supportId" t-esc="supportingText"/>
-        <span t-if="props.maxLength" class="bu-input-counter" t-esc="counter"/>
+        <span t-if="props.maxLength" class="b-input-counter" t-esc="counter"/>
       </div>
     </div>
     <t t-else="" t-out="0"/>
@@ -1809,80 +1859,8 @@
     />
   </t>
   <t t-name="Input" t-call="baseui.Input"/>
-<t t-name="baseui.input-group"><div b-ui="input-group"><t t-esc="props.content"/></div></t>
-  <t t-name="baseui.InputGroup">
-    <t t-call="baseui.Outlined"><t t-call="baseui.InputGroup.box"/></t>
-  </t>
-  <t t-name="baseui.InputGroup.box">
-    <div t-att-class="classNames" t-att-style="props.style" data-slot="input-group" role="group"
-         t-att-aria-describedby="describedBy"><t t-slot="default"/></div>
-  </t>
-  <t t-name="baseui.InputGroupAddon">
-    <div
-      t-att-class="classNames"
-      t-att-style="props.style"
-      t-att-data-align="align"
-      data-slot="input-group-addon"
-      role="group"
-      t-on-click="onClick"
-    ><t t-slot="default"/></div>
-  </t>
-  <t t-name="baseui.InputGroupButton">
-    <Button
-      unstyled="true"
-      className="classNames"
-      style="props.style"
-      type="props.type"
-      disabled="props.disabled"
-      label="props.label"
-      attrs="buttonAttrs"
-      onClick="(event) => this.onClick(event)"
-    ><t t-slot="default"/></Button>
-  </t>
-  <t t-name="baseui.InputGroupText">
-    <span t-att-class="classNames" t-att-style="props.style" data-slot="input-group-text"><t t-slot="default"/></span>
-  </t>
-  <t t-name="baseui.InputGroupInput">
-    <input
-      t-att-id="props.id"
-      t-att-name="props.name"
-      t-att-autocomplete="props.autocomplete"
-      t-att-class="classNames"
-      t-att-style="props.style"
-      t-att-type="props.type || 'text'"
-      t-att-placeholder="fieldPlaceholder"
-      t-att-value="props.value"
-      t-att-disabled="props.disabled"
-      t-att-readonly="props.readonly"
-      t-att-aria-invalid="props.invalid ? 'true' : undefined"
-      data-slot="input-group-control"
-      t-on-input="onInput"
-      t-on-change="onChange"
-    />
-  </t>
-  <t t-name="baseui.InputGroupTextarea">
-    <textarea
-      t-att-class="classNames"
-      t-att-style="props.style"
-      t-att-placeholder="fieldPlaceholder"
-      t-att-rows="props.rows"
-      t-att-disabled="props.disabled"
-      t-att-readonly="props.readonly"
-      t-att-value="props.value"
-      t-att-aria-invalid="props.invalid ? 'true' : undefined"
-      data-slot="input-group-control"
-      t-on-input="onInput"
-      t-on-change="onChange"
-    ></textarea>
-  </t>
-  <t t-name="InputGroup" t-call="baseui.InputGroup"/>
-  <t t-name="InputGroupAddon" t-call="baseui.InputGroupAddon"/>
-  <t t-name="InputGroupButton" t-call="baseui.InputGroupButton"/>
-  <t t-name="InputGroupText" t-call="baseui.InputGroupText"/>
-  <t t-name="InputGroupInput" t-call="baseui.InputGroupInput"/>
-  <t t-name="InputGroupTextarea" t-call="baseui.InputGroupTextarea"/>
 <t t-name="baseui.input-otp">
-    <div class="bu-input-otp"/>
+    <div class="b-input-otp"/>
   </t>
   <t t-name="baseui.InputOtp">
     <div t-att-class="classNames" t-att-style="props.style" t-ref="root" t-on-paste="onPaste">
@@ -1921,28 +1899,28 @@
   <t t-name="baseui.Marker"><span t-att-class="classNames" t-att-data-variant="variant" t-att-style="props.style"><t t-slot="default"/></span></t>
   <t t-name="Marker" t-call="baseui.Marker"/>
 <t t-name="baseui.markdown">
-    <div class="bu-markdown"/>
+    <div class="b-markdown"/>
   </t>
   <t t-name="baseui.Markdown">
     <div t-ref="root" t-att-class="classNames" t-att-style="props.style" data-slot="markdown" t-att-data-status="state.status">
-      <div t-if="state.status === 'loading'" class="bu-markdown-loading" role="status">Loading…</div>
-      <div t-elif="state.status === 'error'" class="bu-markdown-error" role="alert">
+      <div t-if="state.status === 'loading'" class="b-markdown-loading" role="status">Loading…</div>
+      <div t-elif="state.status === 'error'" class="b-markdown-error" role="alert">
         <t t-esc="state.error"/>
       </div>
       <div
         t-elif="props.editable"
         t-ref="editor"
-        class="bu-markdown-editor"
+        class="b-markdown-editor"
         data-slot="markdown-editor"
         role="group"
         t-att-aria-label="editorLabel"
       />
       <t t-else="">
-        <div t-if="hasFrontmatterMeta" class="bu-markdown-meta">
-          <div t-if="state.frontmatter.authors and state.frontmatter.authors.length" class="bu-markdown-meta-authors">
+        <div t-if="hasFrontmatterMeta" class="b-markdown-meta">
+          <div t-if="state.frontmatter.authors and state.frontmatter.authors.length" class="b-markdown-meta-authors">
             By <t t-esc="state.frontmatter.authors.join(', ')"/>
           </div>
-          <div t-if="state.frontmatter.tags and state.frontmatter.tags.length" class="bu-markdown-meta-tags">
+          <div t-if="state.frontmatter.tags and state.frontmatter.tags.length" class="b-markdown-meta-tags">
             <Badge t-foreach="state.frontmatter.tags" t-as="tag" t-key="tag" variant="'secondary'" pill="true"><t t-esc="tag"/></Badge>
           </div>
         </div>
@@ -1953,9 +1931,9 @@
   <t t-name="Markdown" t-call="baseui.Markdown"/>
 
   <t t-name="baseui.MarkdownTree">
-    <div t-att-class="'bu-markdown-tree' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-slot="markdown-tree">
-      <div t-if="state.status === 'loading'" class="bu-markdown-tree-loading" role="status">Loading…</div>
-      <div t-elif="state.status === 'error'" class="bu-markdown-tree-error" role="alert">
+    <div t-att-class="'b-markdown-tree' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-slot="markdown-tree">
+      <div t-if="state.status === 'loading'" class="b-markdown-tree-loading" role="status">Loading…</div>
+      <div t-elif="state.status === 'error'" class="b-markdown-tree-error" role="alert">
         <t t-esc="state.error"/>
       </div>
       <SidebarGroup t-else="">
@@ -1998,7 +1976,7 @@
       <t t-else="">
         <SidebarMenuItem>
           <DropdownMenu>
-            <DropdownMenuTrigger className="'bu-sidebar-menu-button bu-markdown-tree-folder-trigger'"><Icon name="'folder'" className="'bu-sidebar-menu-icon'"/><span class="bu-sidebar-menu-label"><t t-esc="label"/></span><Icon name="'chevron-right'" className="'bu-markdown-tree-folder-trigger-icon'"/></DropdownMenuTrigger>
+            <DropdownMenuTrigger className="'b-sidebar-menu-button b-markdown-tree-folder-trigger'"><Icon name="'folder'" className="'b-sidebar-menu-icon'"/><span class="b-sidebar-menu-label"><t t-esc="label"/></span><Icon name="'chevron-right'" className="'b-markdown-tree-folder-trigger-icon'"/></DropdownMenuTrigger>
             <DropdownMenuContent>
               <t t-foreach="props.node.children" t-as="child" t-key="child.path || child.name">
                 <MarkdownTreeNode node="child" activePath="props.activePath" onSelect="props.onSelect" nested="true"/>
@@ -2020,7 +1998,7 @@
         </DropdownMenuSub>
       </t>
       <t t-else="">
-        <div class="bu-markdown-tree-group">
+        <div class="b-markdown-tree-group">
           <SidebarGroupLabel><t t-esc="label"/></SidebarGroupLabel>
           <SidebarMenu>
             <t t-foreach="props.node.children" t-as="child" t-key="child.path || child.name">
@@ -2033,7 +2011,7 @@
   </t>
   <t t-name="MarkdownTreeNode" t-call="baseui.MarkdownTreeNode"/>
 <t t-name="baseui.message">
-    <article class="bu-message"/>
+    <article class="b-message"/>
   </t>
   <t t-name="baseui.Message">
     <article t-att-class="classNames" t-att-data-side="side" role="listitem" t-att-style="props.style">
@@ -2042,10 +2020,10 @@
   </t>
   <t t-name="Message" t-call="baseui.Message"/>
 <t t-name="baseui.message-scroller">
-    <div class="bu-message-scroller"/>
+    <div class="b-message-scroller"/>
   </t>
   <t t-name="baseui.MessageScroller">
-    <div t-att-class="'bu-message-scroller' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" t-ref="root">
+    <div t-att-class="'b-message-scroller' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" t-ref="root">
       <t t-slot="default"/>
     </div>
   </t>
@@ -2073,7 +2051,7 @@
   </t>
   <t t-name="baseui.NavigationMenu">
     <nav
-      t-att-class="'bu-navigation-menu' + (props.className ? ' ' + props.className : '')"
+      t-att-class="'nav b-navigation-menu' + (props.className ? ' ' + props.className : '')"
       role="menubar"
       t-ref="root"
       t-att-style="props.style"
@@ -2084,7 +2062,7 @@
   </t>
   <t t-name="NavigationMenu" t-call="baseui.NavigationMenu"/>
   <t t-name="baseui.NavigationMenuItem">
-    <a t-att-href="props.href || '#'" role="menuitem" t-att-class="props.className" t-att-style="props.style">
+    <a t-att-href="props.href || '#'" role="menuitem" t-att-class="'nav-link' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <t t-slot="default"/>
     </a>
   </t>
@@ -2111,13 +2089,13 @@
     </span>
   </t>
   <t t-name="baseui.Popover">
-    <span t-att-class="'bu-popover' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <span t-att-class="'b-popover' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <t t-slot="default"/>
     </span>
   </t>
   <t t-name="Popover" t-call="baseui.Popover"/>
   <t t-name="baseui.PopoverTrigger">
-    <Button unstyled="true" getRef="getRef" className="'btn bu-button btn-outline-secondary bu-popover-trigger'" attrs="attrs" style="props.style" onClick="() => this.onClick()">
+    <Button unstyled="true" getRef="getRef" className="'btn b-button btn-outline-secondary b-popover-trigger'" attrs="attrs" style="props.style" onClick="() => this.onClick()">
       <t t-slot="default"/>
     </Button>
   </t>
@@ -2127,7 +2105,7 @@
        popover.component.js). Bootstrap renders the actual visible popup
        itself, appended to document.body. -->
   <t t-name="baseui.PopoverContent">
-    <span t-ref="buffer" class="bu-popover-content" t-att-style="style" aria-hidden="true">
+    <span t-ref="buffer" class="b-popover-content" t-att-style="style" aria-hidden="true">
       <t t-if="props.content" t-esc="props.content"/>
       <t t-else="" t-slot="default"/>
     </span>
@@ -2143,7 +2121,7 @@
       t-att-aria-valuenow="value"
       t-att-style="style"
     >
-      <span class="bu-progress-indicator"></span>
+      <span class="progress-bar b-progress-indicator"></span>
     </div>
   </t>
   <t t-name="Progress" t-call="baseui.Progress"/>
@@ -2157,70 +2135,70 @@
   <t t-name="baseui.Pwa"><t t-slot="default"/></t>
   <t t-name="Pwa" t-call="baseui.Pwa"/>
   <t t-name="baseui.PwaTrigger">
-    <Button variant="'default'" className="'bu-pwa-trigger'" style="props.style" onClick="() => this.onClick()"><t t-slot="default"/></Button>
+    <Button variant="'default'" className="'b-pwa-trigger'" style="props.style" onClick="() => this.onClick()"><t t-slot="default"/></Button>
   </t>
   <t t-name="PwaTrigger" t-call="baseui.PwaTrigger"/>
   <t t-name="baseui.PwaContent">
     <div
       t-if="open"
-      class="bu-pwa-overlay"
+      class="b-pwa-overlay"
       t-ref="root"
       t-att-style="props.style"
       t-on-keydown="onKeyDown"
       t-on-click="onBackdropClick"
     >
-      <div class="bu-pwa-panel" role="dialog" aria-modal="true">
+      <div class="b-pwa-panel" role="dialog" aria-modal="true">
         <t t-slot="default"/>
       </div>
     </div>
   </t>
   <t t-name="PwaContent" t-call="baseui.PwaContent"/>
-  <t t-name="baseui.PwaHeader"><div class="bu-pwa-header" t-att-style="props.style"><t t-slot="default"/></div></t>
+  <t t-name="baseui.PwaHeader"><div class="b-pwa-header" t-att-style="props.style"><t t-slot="default"/></div></t>
   <t t-name="PwaHeader" t-call="baseui.PwaHeader"/>
-  <t t-name="baseui.PwaTitle"><h2 class="bu-pwa-title" t-att-style="props.style"><t t-slot="default"/></h2></t>
+  <t t-name="baseui.PwaTitle"><h2 class="b-pwa-title" t-att-style="props.style"><t t-slot="default"/></h2></t>
   <t t-name="PwaTitle" t-call="baseui.PwaTitle"/>
-  <t t-name="baseui.PwaDescription"><p class="bu-pwa-description" t-att-style="props.style"><t t-slot="default"/></p></t>
+  <t t-name="baseui.PwaDescription"><p class="b-pwa-description" t-att-style="props.style"><t t-slot="default"/></p></t>
   <t t-name="PwaDescription" t-call="baseui.PwaDescription"/>
-  <t t-name="baseui.PwaBody"><div class="bu-pwa-body" t-att-style="props.style"><t t-slot="default"/></div></t>
+  <t t-name="baseui.PwaBody"><div class="b-pwa-body" t-att-style="props.style"><t t-slot="default"/></div></t>
   <t t-name="PwaBody" t-call="baseui.PwaBody"/>
   <t t-name="baseui.PwaSteps">
-    <ol class="bu-pwa-steps" t-att-style="props.style">
+    <ol class="b-pwa-steps" t-att-style="props.style">
       <t t-foreach="steps" t-as="step" t-key="step_index">
         <li>
-          <span class="bu-pwa-step-index" t-esc="step_index + 1"/>
+          <span class="b-pwa-step-index" t-esc="step_index + 1"/>
           <span t-esc="step"/>
         </li>
       </t>
     </ol>
   </t>
   <t t-name="PwaSteps" t-call="baseui.PwaSteps"/>
-  <t t-name="baseui.PwaFooter"><div class="bu-pwa-footer" t-att-style="props.style"><t t-slot="default"/></div></t>
+  <t t-name="baseui.PwaFooter"><div class="b-pwa-footer" t-att-style="props.style"><t t-slot="default"/></div></t>
   <t t-name="PwaFooter" t-call="baseui.PwaFooter"/>
   <t t-name="baseui.PwaClose">
-    <Button variant="'outline'" className="'bu-pwa-close'" style="props.style" onClick="() => this.onClick()"><t t-slot="default"/></Button>
+    <Button variant="'outline'" className="'b-pwa-close'" style="props.style" onClick="() => this.onClick()"><t t-slot="default"/></Button>
   </t>
   <t t-name="PwaClose" t-call="baseui.PwaClose"/>
 <t t-name="baseui.questionnaire">
-    <form class="bu-questionnaire"/>
+    <form class="b-questionnaire"/>
   </t>
   <t t-name="baseui.Questionnaire">
-    <form t-att-class="'bu-questionnaire' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" t-on-submit.prevent="">
+    <form t-att-class="'b-questionnaire' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" t-on-submit.prevent="">
       <t t-slot="default"/>
     </form>
   </t>
   <t t-name="Questionnaire" t-call="baseui.Questionnaire"/>
   <t t-name="baseui.QuestionnaireStep">
-    <div t-if="active" class="bu-questionnaire-step" t-att-style="props.style"><t t-slot="default"/></div>
+    <div t-if="active" class="b-questionnaire-step" t-att-style="props.style"><t t-slot="default"/></div>
   </t>
   <t t-name="QuestionnaireStep" t-call="baseui.QuestionnaireStep"/>
   <t t-name="baseui.QuestionnairePrevious">
-    <Button unstyled="true" className="'bu-questionnaire-prev'" style="props.style" disabled="disabled" onClick="() => this.onClick()">
+    <Button unstyled="true" className="'b-questionnaire-prev'" style="props.style" disabled="disabled" onClick="() => this.onClick()">
       <t t-slot="default"/>
     </Button>
   </t>
   <t t-name="QuestionnairePrevious" t-call="baseui.QuestionnairePrevious"/>
   <t t-name="baseui.QuestionnaireNext">
-    <Button unstyled="true" className="'bu-questionnaire-next'" style="props.style" onClick="() => this.onClick()">
+    <Button unstyled="true" className="'b-questionnaire-next'" style="props.style" onClick="() => this.onClick()">
       <t t-slot="default"/>
     </Button>
   </t>
@@ -2233,7 +2211,7 @@
   </t>
   <t t-name="RadioGroup" t-call="baseui.RadioGroup"/>
   <t t-name="baseui.RadioGroupItem">
-    <label t-att-class="'form-check bu-check ' + (props.className || '')" t-att-style="props.style">
+    <label t-att-class="'form-check b-check ' + (props.className || '')" t-att-style="props.style">
       <input
         type="radio"
         class="form-check-input"
@@ -2247,19 +2225,19 @@
   </t>
   <t t-name="RadioGroupItem" t-call="baseui.RadioGroupItem"/>
 <t t-name="baseui.resizable">
-    <div class="bu-resizable"/>
+    <div class="b-resizable"/>
   </t>
   <t t-name="baseui.Resizable">
-    <div t-att-class="'bu-resizable' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
-      <div class="bu-resizable-panel" t-ref="panel" t-att-style="panelStyle">
+    <div t-att-class="'b-resizable' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+      <div class="b-resizable-panel" t-ref="panel" t-att-style="panelStyle">
         <t t-slot="default"/>
       </div>
-      <div class="bu-resizable-handle" t-on-pointerdown="onPointerDown"></div>
+      <div class="b-resizable-handle" t-on-pointerdown="onPointerDown"></div>
     </div>
   </t>
   <t t-name="Resizable" t-call="baseui.Resizable"/>
 <t t-name="baseui.scroll-area">
-    <div class="bu-scroll-area"/>
+    <div class="b-scroll-area"/>
   </t>
   <t t-name="baseui.ScrollArea">
     <div t-att-class="classNames" t-att-style="props.style" role="region" tabindex="0"><t t-slot="default"/></div>
@@ -2276,9 +2254,8 @@
   <t t-name="baseui.Select">
     <div t-att-class="classNames" t-att-style="rootStyle" t-ref="root">
       <t t-slot="default"/>
-      <span t-if="isOutlined" class="bu-input-label" t-esc="label"/>
-      <Tooltip t-if="isOutlined and tipText" content="tipText" className="'bu-input-tip'"><t t-set-slot="trigger"><Icon name="'info'"/></t></Tooltip>
-      <div t-if="isOutlined and supportingText" class="bu-input-support">
+      <t t-if="isOutlined" t-call="baseui.Outlined.label"/>
+      <div t-if="isOutlined and supportingText" class="b-input-support">
         <span t-att-id="supportId" t-esc="supportingText"/>
       </div>
     </div>
@@ -2287,7 +2264,7 @@
   <t t-name="baseui.SelectTrigger">
     <Button
       unstyled="true"
-      className="'bu-select-trigger'"
+      className="'b-select-trigger'"
       attrs="attrs"
       style="props.style"
       onClick="() => this.onClick()"
@@ -2297,14 +2274,14 @@
   </t>
   <t t-name="SelectTrigger" t-call="baseui.SelectTrigger"/>
   <t t-name="baseui.SelectContent">
-    <div t-if="open" class="bu-select-content" t-att-style="props.style" role="listbox">
+    <div t-if="open" class="b-select-content" t-att-style="props.style" role="listbox">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="SelectContent" t-call="baseui.SelectContent"/>
   <t t-name="baseui.SelectItem">
     <div
-      class="bu-select-item"
+      class="b-select-item"
       role="option"
       t-att-aria-selected="selected ? 'true' : 'false'"
       t-att-style="props.style"
@@ -2319,7 +2296,7 @@
   </t>
 
   <t t-name="baseui.Shell">
-    <div t-att-class="'bu-shell' + (props.className ? ' ' + props.className : '')"
+    <div t-att-class="'b-shell' + (props.className ? ' ' + props.className : '')"
          t-att-style="props.style"
          t-att-b-att-collapsed="state.collapsed ? 'true' : 'false'">
       <Sidebar open="props.open" defaultOpen="props.defaultOpen" onOpenChange="props.onOpenChange">
@@ -2329,7 +2306,7 @@
       <t t-if="props.toast">
         <Toast open="!!props.toast" variant="props.toast.variant or 'info'"
                delay="props.toast.persistent ? 0 : (props.toast.delay or 4000)"
-               className="'bu-shell-toast' + (props.toast.className ? ' ' + props.toast.className : '')"
+               className="'b-shell-toast' + (props.toast.className ? ' ' + props.toast.className : '')"
                onOpenChange="(open) => !open and this.dismissToast()">
           <div t-esc="props.toast.message"/>
           <t t-if="props.toast.actionLabel">
@@ -2360,41 +2337,41 @@
   <t t-name="ShellSidebar" t-call="baseui.ShellSidebar"/>
 
   <t t-name="baseui.ShellSidebarHeader">
-    <div t-att-class="'bu-shell-sidebar-header' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <div t-att-class="'b-shell-sidebar-header' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="ShellSidebarHeader" t-call="baseui.ShellSidebarHeader"/>
 
   <t t-name="baseui.ShellNav">
-    <nav t-att-class="'bu-shell-nav' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <nav t-att-class="'b-shell-nav' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <t t-slot="default"/>
     </nav>
   </t>
   <t t-name="ShellNav" t-call="baseui.ShellNav"/>
 
   <t t-name="baseui.ShellMain">
-    <div t-att-class="'bu-shell-main' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <div t-att-class="'b-shell-main' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="ShellMain" t-call="baseui.ShellMain"/>
 
   <t t-name="baseui.ShellHeader">
-    <header t-att-class="'bu-shell-header' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <header t-att-class="'b-shell-header' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <t t-slot="default"/>
     </header>
   </t>
   <t t-name="ShellHeader" t-call="baseui.ShellHeader"/>
 
   <t t-name="baseui.ShellContent">
-    <main t-att-class="'bu-shell-content' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <main t-att-class="'b-shell-content' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <t t-if="props.loading">
-        <div class="bu-shell-content-skeleton" aria-busy="true" aria-live="polite">
-          <Skeleton className="'bu-shell-content-skeleton-bar bu-shell-content-skeleton-title'"/>
-          <Skeleton className="'bu-shell-content-skeleton-bar'"/>
-          <Skeleton className="'bu-shell-content-skeleton-bar'"/>
-          <Skeleton className="'bu-shell-content-skeleton-bar bu-shell-content-skeleton-short'"/>
+        <div class="b-shell-content-skeleton" aria-busy="true" aria-live="polite">
+          <Skeleton className="'b-shell-content-skeleton-bar b-shell-content-skeleton-title'"/>
+          <Skeleton className="'b-shell-content-skeleton-bar'"/>
+          <Skeleton className="'b-shell-content-skeleton-bar'"/>
+          <Skeleton className="'b-shell-content-skeleton-bar b-shell-content-skeleton-short'"/>
         </div>
       </t>
       <t t-else="">
@@ -2405,9 +2382,9 @@
   <t t-name="ShellContent" t-call="baseui.ShellContent"/>
 
   <t t-name="baseui.ShellUserMenu">
-    <div t-if="authState" t-att-class="'bu-shell-user' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <div t-if="authState" t-att-class="'b-shell-user' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <t t-slot="default">
-        <span class="bu-shell-user-name" t-esc="authState.username"/>
+        <span class="b-shell-user-name" t-esc="authState.username"/>
         <Button variant="'outline'" size="'sm'" label="'Logout'" onClick="() => this.logout()"/>
       </t>
     </div>
@@ -2430,27 +2407,27 @@
   <t t-name="baseui.Sheet"><t t-slot="default"/></t>
   <t t-name="Sheet" t-call="baseui.Sheet"/>
   <t t-name="baseui.SheetTrigger">
-    <Button variant="'outline'" className="'bu-sheet-trigger'" style="props.style" onClick="() => this.onClick()"><t t-slot="default"/></Button>
+    <Button variant="'outline'" className="'b-sheet-trigger'" style="props.style" onClick="() => this.onClick()"><t t-slot="default"/></Button>
   </t>
   <t t-name="SheetTrigger" t-call="baseui.SheetTrigger"/>
   <t t-name="baseui.SheetContent">
-    <div t-ref="root" t-att-class="'offcanvas ' + placementClass + ' bu-sheet-overlay'" t-att-style="props.style" tabindex="-1">
-      <aside class="bu-sheet-panel">
+    <div t-ref="root" t-att-class="'offcanvas ' + placementClass + ' b-sheet-overlay'" t-att-style="props.style" tabindex="-1">
+      <aside class="b-sheet-panel">
         <t t-slot="default"/>
       </aside>
     </div>
   </t>
   <t t-name="SheetContent" t-call="baseui.SheetContent"/>
-  <t t-name="baseui.SheetHeader"><div class="bu-sheet-header" t-att-style="props.style"><t t-slot="default"/></div></t>
+  <t t-name="baseui.SheetHeader"><div class="b-sheet-header" t-att-style="props.style"><t t-slot="default"/></div></t>
   <t t-name="SheetHeader" t-call="baseui.SheetHeader"/>
-  <t t-name="baseui.SheetFooter"><div class="bu-sheet-footer" t-att-style="props.style"><t t-slot="default"/></div></t>
+  <t t-name="baseui.SheetFooter"><div class="b-sheet-footer" t-att-style="props.style"><t t-slot="default"/></div></t>
   <t t-name="SheetFooter" t-call="baseui.SheetFooter"/>
-  <t t-name="baseui.SheetTitle"><h2 class="bu-sheet-title" t-att-style="props.style"><t t-slot="default"/></h2></t>
+  <t t-name="baseui.SheetTitle"><h2 class="b-sheet-title" t-att-style="props.style"><t t-slot="default"/></h2></t>
   <t t-name="SheetTitle" t-call="baseui.SheetTitle"/>
-  <t t-name="baseui.SheetDescription"><p class="bu-sheet-description" t-att-style="props.style"><t t-slot="default"/></p></t>
+  <t t-name="baseui.SheetDescription"><p class="b-sheet-description" t-att-style="props.style"><t t-slot="default"/></p></t>
   <t t-name="SheetDescription" t-call="baseui.SheetDescription"/>
   <t t-name="baseui.SheetClose">
-    <Button variant="'outline'" className="'bu-sheet-close'" style="props.style" attrs="{'data-bs-dismiss': 'offcanvas'}"><t t-slot="default"/></Button>
+    <Button variant="'outline'" className="'b-sheet-close'" style="props.style" attrs="{'data-bs-dismiss': 'offcanvas'}"><t t-slot="default"/></Button>
   </t>
   <t t-name="SheetClose" t-call="baseui.SheetClose"/>
 <t t-name="baseui.sidebar">
@@ -2465,14 +2442,14 @@
          t-att-data-variant="variant"
          t-att-data-side="side"
          t-on-keydown="onKeyDown">
-      <div t-if="state.open" class="bu-sidebar-backdrop" data-slot="sidebar-backdrop" t-on-click="() => this.setOpen(false)"></div>
+      <div t-if="state.open" class="b-sidebar-backdrop" data-slot="sidebar-backdrop" t-on-click="() => this.setOpen(false)"></div>
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="Sidebar" t-call="baseui.Sidebar"/>
   <t t-name="SidebarProvider" t-call="baseui.Sidebar"/>
   <t t-name="baseui.SidebarContent">
-    <aside t-att-class="'bu-sidebar' + (open ? ' is-open' : '') + (props.className ? ' ' + props.className : '')"
+    <aside t-att-class="'b-sidebar' + (open ? ' is-open' : '') + (props.className ? ' ' + props.className : '')"
            t-att-style="props.style"
            data-sidebar="sidebar"
            data-slot="sidebar"
@@ -2482,26 +2459,26 @@
   </t>
   <t t-name="SidebarContent" t-call="baseui.SidebarContent"/>
   <t t-name="baseui.SidebarHeader">
-    <div t-att-class="'bu-sidebar-header' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="header" data-slot="sidebar-header">
+    <div t-att-class="'b-sidebar-header' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="header" data-slot="sidebar-header">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="SidebarHeader" t-call="baseui.SidebarHeader"/>
   <t t-name="baseui.SidebarFooter">
-    <div t-att-class="'bu-sidebar-footer' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="footer" data-slot="sidebar-footer">
+    <div t-att-class="'b-sidebar-footer' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="footer" data-slot="sidebar-footer">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="SidebarFooter" t-call="baseui.SidebarFooter"/>
   <t t-name="baseui.SidebarInset">
-    <main t-att-class="'bu-sidebar-inset' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-slot="sidebar-inset">
+    <main t-att-class="'b-sidebar-inset' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-slot="sidebar-inset">
       <t t-slot="default"/>
     </main>
   </t>
   <t t-name="SidebarInset" t-call="baseui.SidebarInset"/>
   <t t-name="baseui.SidebarRail">
     <Button type="'button'" unstyled="true"
-            className="'bu-sidebar-rail' + (props.className ? ' ' + props.className : '')"
+            className="'b-sidebar-rail' + (props.className ? ' ' + props.className : '')"
             style="props.style"
             attrs="{ 'data-sidebar': 'rail', 'data-slot': 'sidebar-rail', tabindex: '-1' }"
             ariaLabel="'Toggle Sidebar'"
@@ -2510,7 +2487,7 @@
   </t>
   <t t-name="SidebarRail" t-call="baseui.SidebarRail"/>
   <t t-name="baseui.SidebarInput">
-    <input t-att-class="'bu-sidebar-input' + (props.className ? ' ' + props.className : '')"
+    <input t-att-class="'b-sidebar-input' + (props.className ? ' ' + props.className : '')"
            t-att-style="props.style"
            data-sidebar="input"
            data-slot="sidebar-input"
@@ -2520,17 +2497,17 @@
   </t>
   <t t-name="SidebarInput" t-call="baseui.SidebarInput"/>
   <t t-name="baseui.SidebarSeparator">
-    <div t-att-class="'bu-sidebar-separator' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="separator" data-slot="sidebar-separator"/>
+    <div t-att-class="'b-sidebar-separator' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="separator" data-slot="sidebar-separator"/>
   </t>
   <t t-name="SidebarSeparator" t-call="baseui.SidebarSeparator"/>
   <t t-name="baseui.SidebarClose">
     <Button type="'button'" unstyled="true"
-            className="'bu-sidebar-close' + (props.className ? ' ' + props.className : '')"
+            className="'b-sidebar-close' + (props.className ? ' ' + props.className : '')"
             style="props.style"
             attrs="{ 'data-sidebar': 'close', 'data-slot': 'sidebar-close' }"
             ariaLabel="props.label || 'Close Sidebar'"
             onClick="() => this.onClick()">
-      <Icon name="props.icon || 'x'" className="'bu-sidebar-close-icon'"/>
+      <Icon name="props.icon || 'x'" className="'b-sidebar-close-icon'"/>
       <span t-if="props.label"><t t-esc="props.label"/></span>
       <span t-else="" class="visually-hidden">Close Sidebar</span>
       <t t-slot="default"/>
@@ -2538,23 +2515,23 @@
   </t>
   <t t-name="SidebarClose" t-call="baseui.SidebarClose"/>
   <t t-name="baseui.SidebarGroup">
-    <div t-att-class="'bu-sidebar-group' + (props.muted ? ' is-muted' : '') + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="group" data-slot="sidebar-group">
+    <div t-att-class="'b-sidebar-group' + (props.muted ? ' is-muted' : '') + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="group" data-slot="sidebar-group">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="SidebarGroup" t-call="baseui.SidebarGroup"/>
   <t t-name="baseui.SidebarGroupLabel">
-    <a t-if="props.href" t-att-href="props.href" t-att-class="'bu-sidebar-group-label' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="group-label" data-slot="sidebar-group-label">
+    <a t-if="props.href" t-att-href="props.href" t-att-class="'b-sidebar-group-label' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="group-label" data-slot="sidebar-group-label">
       <t t-slot="default"/>
     </a>
-    <div t-else="" t-att-class="'bu-sidebar-group-label' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="group-label" data-slot="sidebar-group-label">
+    <div t-else="" t-att-class="'b-sidebar-group-label' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="group-label" data-slot="sidebar-group-label">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="SidebarGroupLabel" t-call="baseui.SidebarGroupLabel"/>
   <t t-name="baseui.SidebarGroupAction">
     <Button type="'button'" unstyled="true"
-            className="'bu-sidebar-group-action' + (props.className ? ' ' + props.className : '')"
+            className="'b-sidebar-group-action' + (props.className ? ' ' + props.className : '')"
             style="props.style"
             attrs="{ 'data-sidebar': 'group-action', 'data-slot': 'sidebar-group-action' }"
             ariaLabel="ariaLabel"
@@ -2565,34 +2542,34 @@
   </t>
   <t t-name="SidebarGroupAction" t-call="baseui.SidebarGroupAction"/>
   <t t-name="baseui.SidebarGroupContent">
-    <div t-att-class="'bu-sidebar-group-content' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="group-content" data-slot="sidebar-group-content">
+    <div t-att-class="'b-sidebar-group-content' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="group-content" data-slot="sidebar-group-content">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="SidebarGroupContent" t-call="baseui.SidebarGroupContent"/>
   <t t-name="baseui.SidebarGroupCollapsible">
-    <div t-att-class="'bu-sidebar-group' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <div t-att-class="'b-sidebar-group' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <Button type="'button'" unstyled="true"
-              className="'bu-sidebar-group-trigger'"
+              className="'b-sidebar-group-trigger'"
               attrs="{ 'data-sidebar': 'group-label', 'data-slot': 'sidebar-group-label', 'aria-expanded': open ? 'true' : 'false' }"
               onClick="() => this.toggle()">
         <t t-esc="props.label"/>
-        <Icon name="'chevron-down'" className="'bu-sidebar-group-chevron' + (open ? ' is-open' : '')"/>
+        <Icon name="'chevron-down'" className="'b-sidebar-group-chevron' + (open ? ' is-open' : '')"/>
       </Button>
-      <div t-if="open" class="bu-sidebar-group-content">
+      <div t-if="open" class="b-sidebar-group-content">
         <t t-slot="default"/>
       </div>
     </div>
   </t>
   <t t-name="SidebarGroupCollapsible" t-call="baseui.SidebarGroupCollapsible"/>
   <t t-name="baseui.SidebarMenu">
-    <ul t-att-class="'bu-sidebar-menu' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="menu" data-slot="sidebar-menu">
+    <ul t-att-class="'b-sidebar-menu' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="menu" data-slot="sidebar-menu">
       <t t-slot="default"/>
     </ul>
   </t>
   <t t-name="SidebarMenu" t-call="baseui.SidebarMenu"/>
   <t t-name="baseui.SidebarMenuItem">
-    <li t-att-class="'bu-sidebar-menu-item' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="menu-item" data-slot="sidebar-menu-item">
+    <li t-att-class="'b-sidebar-menu-item' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="menu-item" data-slot="sidebar-menu-item">
       <t t-slot="default"/>
     </li>
   </t>
@@ -2604,14 +2581,14 @@
             attrs="{ 'data-sidebar': 'menu-button', 'data-slot': 'sidebar-menu-button', 'data-active': isActive ? 'true' : undefined, 'data-size': props.size || 'default', 'aria-current': isActive ? 'page' : undefined }"
             disabled="props.disabled"
             onClick="(event) => this.onClick(event)">
-      <Icon t-if="props.icon" name="props.icon" className="'bu-sidebar-menu-icon'"/>
-      <span class="bu-sidebar-menu-label"><t t-slot="default"/></span>
+      <Icon t-if="props.icon" name="props.icon" className="'b-sidebar-menu-icon'"/>
+      <span class="b-sidebar-menu-label"><t t-slot="default"/></span>
     </Button>
   </t>
   <t t-name="SidebarMenuButton" t-call="baseui.SidebarMenuButton"/>
   <t t-name="baseui.SidebarMenuAction">
     <Button type="'button'" unstyled="true"
-            className="'bu-sidebar-menu-action' + (props.showOnHover ? ' show-on-hover' : '') + (props.className ? ' ' + props.className : '')"
+            className="'b-sidebar-menu-action' + (props.showOnHover ? ' show-on-hover' : '') + (props.className ? ' ' + props.className : '')"
             style="props.style"
             attrs="{ 'data-sidebar': 'menu-action', 'data-slot': 'sidebar-menu-action' }"
             ariaLabel="ariaLabel"
@@ -2622,26 +2599,26 @@
   </t>
   <t t-name="SidebarMenuAction" t-call="baseui.SidebarMenuAction"/>
   <t t-name="baseui.SidebarMenuSub">
-    <ul t-att-class="'bu-sidebar-menu-sub' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="menu-sub" data-slot="sidebar-menu-sub">
+    <ul t-att-class="'b-sidebar-menu-sub' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="menu-sub" data-slot="sidebar-menu-sub">
       <t t-slot="default"/>
     </ul>
   </t>
   <t t-name="SidebarMenuSub" t-call="baseui.SidebarMenuSub"/>
   <t t-name="baseui.SidebarMenuBadge">
-    <div t-att-class="'bu-sidebar-menu-badge' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="menu-badge" data-slot="sidebar-menu-badge">
+    <div t-att-class="'b-sidebar-menu-badge' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="menu-badge" data-slot="sidebar-menu-badge">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="SidebarMenuBadge" t-call="baseui.SidebarMenuBadge"/>
   <t t-name="baseui.SidebarMenuSkeleton">
-    <div t-att-class="'bu-sidebar-menu-skeleton' + (props.className ? ' ' + props.className : '')" t-att-style="style" data-sidebar="menu-skeleton" data-slot="sidebar-menu-skeleton">
-      <span t-if="props.showIcon" class="bu-sidebar-menu-skeleton-icon" data-sidebar="menu-skeleton-icon"></span>
-      <span class="bu-sidebar-menu-skeleton-text" data-sidebar="menu-skeleton-text"></span>
+    <div t-att-class="'b-sidebar-menu-skeleton' + (props.className ? ' ' + props.className : '')" t-att-style="style" data-sidebar="menu-skeleton" data-slot="sidebar-menu-skeleton">
+      <span t-if="props.showIcon" class="b-sidebar-menu-skeleton-icon" data-sidebar="menu-skeleton-icon"></span>
+      <span class="b-sidebar-menu-skeleton-text" data-sidebar="menu-skeleton-text"></span>
     </div>
   </t>
   <t t-name="SidebarMenuSkeleton" t-call="baseui.SidebarMenuSkeleton"/>
   <t t-name="baseui.SidebarMenuSubItem">
-    <li t-att-class="'bu-sidebar-menu-sub-item' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="menu-sub-item" data-slot="sidebar-menu-sub-item">
+    <li t-att-class="'b-sidebar-menu-sub-item' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-sidebar="menu-sub-item" data-slot="sidebar-menu-sub-item">
       <t t-slot="default"/>
     </li>
   </t>
@@ -2658,12 +2635,12 @@
   <t t-name="SidebarMenuSubButton" t-call="baseui.SidebarMenuSubButton"/>
 <t t-name="baseui.SidebarTrigger">
     <Button type="'button'" unstyled="true"
-            className="'bu-sidebar-trigger' + (props.className ? ' ' + props.className : '')"
+            className="'b-sidebar-trigger' + (props.className ? ' ' + props.className : '')"
             style="props.style"
             attrs="{ 'data-sidebar': 'trigger', 'data-slot': 'sidebar-trigger' }"
             ariaLabel="'Toggle Sidebar'"
             onClick="() => this.onClick()">
-      <Icon name="props.icon || 'panel-left'" className="'bu-sidebar-trigger-icon'"/>
+      <Icon name="props.icon || 'panel-left'" className="'b-sidebar-trigger-icon'"/>
       <span t-if="props.label"><t t-esc="props.label"/></span>
       <span t-else="" class="visually-hidden">Toggle Sidebar</span>
       <t t-slot="default"/>
@@ -2698,7 +2675,7 @@
     <label b-ui="switch"><input type="checkbox" role="switch"/><t t-slot="default"/></label>
   </t>
   <t t-name="baseui.Switch">
-    <label t-att-class="'form-check form-switch bu-switch ' + (props.className || '')" t-att-style="props.style">
+    <label t-att-class="'form-check form-switch b-switch ' + (props.className || '')" t-att-style="props.style">
       <input
         type="checkbox"
         role="switch"
@@ -2707,7 +2684,13 @@
         t-att-disabled="props.disabled"
         t-on-change="onChange"
       />
-      <t t-slot="default"/>
+      <span class="b-switch-label">
+        <t t-slot="default"/>
+        <span t-if="tipText" class="b-switch-tip" t-on-click.prevent.stop="">
+          <Tooltip content="tipText" className="'b-input-tip'"><t t-set-slot="trigger"><IconCircleQuestionMark/></t></Tooltip>
+        </span>
+      </span>
+      <small t-if="supportingText" class="b-switch-support" t-esc="supportingText"/>
     </label>
   </t>
   <t t-name="Switch" t-call="baseui.Switch"/>
@@ -2741,14 +2724,14 @@
   <t t-name="TabTrigger" t-call="baseui.TabTrigger"/>
 
   <t t-name="baseui.TabsContainer">
-    <div t-att-class="'tab-content bu-tabs-contents' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <div t-att-class="'tab-content b-tabs-contents' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="TabsContainer" t-call="baseui.TabsContainer"/>
 
   <t t-name="baseui.TabContent">
-    <div t-att-id="panelId" role="tabpanel" t-att-class="'tab-pane fade bu-tabs-panel' + (initialActive ? ' show active' : '') + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <div t-att-id="panelId" role="tabpanel" t-att-class="'tab-pane fade b-tabs-panel' + (initialActive ? ' show active' : '') + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
       <t t-slot="default"/>
     </div>
   </t>
@@ -2778,18 +2761,18 @@
   </t>
   <t t-name="Textarea" t-call="baseui.Textarea"/>
 <t t-name="baseui.text-editor">
-    <div class="bu-text-editor"/>
+    <div class="b-text-editor"/>
   </t>
   <t t-name="baseui.TextEditor">
     <div t-att-class="classNames" t-att-style="props.style" data-slot="text-editor" t-att-data-status="state.status">
-      <div t-if="state.status === 'loading'" class="bu-text-editor-loading" role="status">Loading…</div>
-      <div t-elif="state.status === 'error'" class="bu-text-editor-error" role="alert">
+      <div t-if="state.status === 'loading'" class="b-text-editor-loading" role="status">Loading…</div>
+      <div t-elif="state.status === 'error'" class="b-text-editor-error" role="alert">
         <t t-esc="state.error"/>
       </div>
       <div
         t-else=""
         t-ref="editor"
-        class="bu-text-editor-shell"
+        class="b-text-editor-shell"
         data-slot="text-editor-shell"
         role="group"
         t-att-aria-label="editorLabel"
@@ -2818,10 +2801,10 @@
   </t>
   <t t-name="baseui.Toast">
     <div t-ref="root" t-att-class="classNames" t-att-style="props.style" t-att-role="role">
-      <div class="bu-toast-content"><t t-slot="default"/></div>
-      <div class="bu-toast-actions">
+      <div class="b-toast-content"><t t-slot="default"/></div>
+      <div class="b-toast-actions">
         <t t-if="hasActionSlot" t-slot="action"/>
-        <Button variant="'ghost'" size="'icon-sm'" className="'bu-toast-close'" aria-label="'Close'" onClick="() => this.close()">x</Button>
+        <Button variant="'ghost'" size="'icon-sm'" className="'b-toast-close'" aria-label="'Close'" onClick="() => this.close()">x</Button>
       </div>
     </div>
   </t>
@@ -2833,8 +2816,8 @@
     </span>
   </t>
   <t t-name="baseui.Tooltip">
-    <span t-att-class="'bu-tooltip' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
-      <span t-ref="trigger" class="bu-tooltip-trigger">
+    <span t-att-class="'b-tooltip' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+      <span t-ref="trigger" class="b-tooltip-trigger">
         <t t-slot="trigger"/>
       </span>
       <!-- Rendered but never shown: Owl keeps this reactive so the component
@@ -2862,7 +2845,7 @@
   </t>
   <t t-name="baseui.ToggleGroup">
     <div
-      t-att-class="'btn-group bu-toggle-group' + (props.className ? ' ' + props.className : '')"
+      t-att-class="'btn-group b-toggle-group' + (props.className ? ' ' + props.className : '')"
       t-att-style="props.style"
       t-att-role="props.multiple ? 'group' : 'radiogroup'"
     >
@@ -2886,7 +2869,7 @@
     <p b-ui="typography"><t t-slot="default"/></p>
   </t>
   <t t-name="baseui.Typography">
-    <p t-att-class="classNames" t-att-style="props.style"><t t-slot="default"/></p>
+    <p t-tag="tag" t-att-class="classNames" t-att-style="props.style"><t t-slot="default"/></p>
   </t>
   <t t-name="Typography" t-call="baseui.Typography"/>
 </templates>