@thebase/ui 0.0.11 → 0.0.12

package/dist/baseui.templates.xml

@@ -11,9 +11,9 @@
   </t>
   <t t-name="AlertDialog" t-call="baseui.AlertDialog"/>
   <t t-name="baseui.AlertDialogTrigger">
-    <button type="button" data-slot="alert-dialog-trigger" class="btn bu-button btn-outline-secondary bu-alert-dialog-trigger" t-att-style="props.style" t-on-click="onClick">
+    <Button variant="'outline'" attrs="attrs" className="'bu-alert-dialog-trigger'" style="props.style" onClick="() => this.onClick()">
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="AlertDialogTrigger" t-call="baseui.AlertDialogTrigger"/>
   <t t-name="baseui.AlertDialogContent">
@@ -56,15 +56,15 @@
   <t t-name="AlertDialogDescription" t-call="baseui.AlertDialogDescription"/>
 
   <t t-name="baseui.AlertDialogCancel">
-    <button type="button" data-slot="alert-dialog-cancel" class="btn bu-button btn-outline-secondary bu-alert-dialog-cancel" t-att-style="props.style" t-on-click="onClick">
+    <Button variant="'outline'" attrs="attrs" className="'bu-alert-dialog-cancel'" style="props.style" onClick="() => this.onClick()">
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="AlertDialogCancel" t-call="baseui.AlertDialogCancel"/>
   <t t-name="baseui.AlertDialogAction">
-    <button type="button" data-slot="alert-dialog-action" class="btn bu-button btn-primary bu-alert-dialog-action" t-att-style="props.style" t-on-click="onClick">
+    <Button attrs="attrs" className="'bu-alert-dialog-action'" style="props.style" onClick="() => this.onClick()">
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="AlertDialogAction" t-call="baseui.AlertDialogAction"/>
 <t t-name="baseui.alert">
@@ -73,7 +73,7 @@
   <t t-name="baseui.Alert">
     <div data-slot="alert" t-att-class="classNames" t-att-style="props.style" role="alert" t-ref="root">
       <t t-slot="default"/>
-      <button t-if="props.dismissible" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"/>
+      <Button t-if="props.dismissible" unstyled="true" className="'btn-close'" attrs="{ 'data-bs-dismiss': 'alert', 'aria-label': 'Close' }"/>
     </div>
   </t>
   <t t-name="Alert" t-call="baseui.Alert"/>
@@ -104,10 +104,10 @@
   <t t-name="AccordionItem" t-call="baseui.AccordionItem"/>
   <t t-name="baseui.AccordionTrigger">
     <div class="bu-accordion-header" t-att-style="props.style">
-      <button type="button" data-slot="accordion-trigger" class="bu-accordion-trigger" t-att-aria-expanded="open ? 'true' : 'false'" t-on-click="onClick">
+      <Button unstyled="true" className="'bu-accordion-trigger'" attrs="triggerAttrs" onClick="() => this.onClick()">
         <t t-slot="default"/>
         <Icon name="'chevron-down'" className="'bu-accordion-trigger-icon'"/>
-      </button>
+      </Button>
     </div>
   </t>
   <t t-name="AccordionTrigger" t-call="baseui.AccordionTrigger"/>
@@ -156,37 +156,30 @@
     <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>
   </t>
   <t t-name="baseui.AttachmentAction">
-    <button
-      t-att-class="classNames"
-      t-att-type="props.type || 'button'"
-      t-att-disabled="props.disabled"
-      t-att-aria-label="ariaLabel"
-      data-slot="attachment-action"
-      t-att-style="props.style"
-      t-on-click="onClick"
-    ><t t-if="props.label" t-esc="props.label"/><t t-else="" t-slot="default"/></button>
+    <Button
+      variant="variant"
+      size="size"
+      type="props.type || 'button'"
+      disabled="props.disabled"
+      label="props.label"
+      className="className"
+      aria-label="ariaLabel"
+      style="props.style"
+      attrs="{'data-slot': 'attachment-action'}"
+      onClick="(event) => this.onClick(event)"
+    ><t t-slot="default"/></Button>
   </t>
   <t t-name="baseui.AttachmentTrigger">
-    <a
-      t-if="props.href"
-      t-att-class="classNames"
-      t-att-href="props.href"
-      t-att-target="props.target"
-      t-att-rel="props.rel || (props.target === '_blank' ? 'noreferrer' : undefined)"
-      t-att-aria-label="ariaLabel"
-      data-slot="attachment-trigger"
-      t-att-style="props.style"
-      t-on-click="onClick"
-    ></a>
-    <button
-      t-else=""
-      t-att-class="classNames"
-      t-att-type="props.type || 'button'"
-      t-att-aria-label="ariaLabel"
-      data-slot="attachment-trigger"
-      t-att-style="props.style"
-      t-on-click="onClick"
-    ></button>
+    <Button
+      unstyled="true"
+      href="props.href"
+      type="props.type || 'button'"
+      className="classNames"
+      aria-label="ariaLabel"
+      style="props.style"
+      attrs="{'data-slot': 'attachment-trigger', 'target': props.target, 'rel': props.rel || (props.target === '_blank' ? 'noreferrer' : undefined)}"
+      onClick="(event) => this.onClick(event)"
+    />
   </t>
   <t t-name="baseui.AttachmentGroup">
     <div t-att-class="classNames" data-slot="attachment-group" t-att-style="props.style"><t t-slot="default"/></div>
@@ -409,6 +402,7 @@
 <t t-name="baseui.Button">
     <a
       t-if="props.href"
+      t-ref="root"
       t-att-class="classNames"
       t-att-href="props.href"
       data-slot="button"
@@ -421,6 +415,7 @@
       t-att-data-icon-only="isIconOnly ? 'true' : undefined"
       t-att-data-icon="props.icon ? 'inline-' + iconPosition : undefined"
       t-att-style="props.style"
+      t-att="props.attrs || {}"
       t-on-click="onClick"
     >
       <Icon t-if="props.icon &amp;&amp; iconPosition !== 'end'" name="props.icon"/>
@@ -430,6 +425,7 @@
     </a>
     <button
       t-else=""
+      t-ref="root"
       t-att-class="classNames"
       t-att-type="props.type || 'button'"
       data-slot="button"
@@ -442,6 +438,7 @@
       t-att-data-icon-only="isIconOnly ? 'true' : undefined"
       t-att-data-icon="props.icon ? 'inline-' + iconPosition : undefined"
       t-att-style="props.style"
+      t-att="props.attrs || {}"
       t-on-click="onClick"
     >
       <Icon t-if="props.icon &amp;&amp; iconPosition !== 'end'" name="props.icon"/>
@@ -489,14 +486,14 @@
       <div class="bu-calendar__grid">
         <t t-foreach="days" t-as="cell" t-key="cell_index">
           <span t-if="!cell"/>
-          <button
+          <Button
             t-else=""
-            type="button"
-            t-att-aria-pressed="cell.selected ? 'true' : 'false'"
-            t-on-click="() => this.onSelect(cell.value)"
+            unstyled="true"
+            attrs="{ 'aria-pressed': cell.selected ? 'true' : 'false' }"
+            onClick="() => this.onSelect(cell.value)"
           >
             <t t-esc="cell.day"/>
-          </button>
+          </Button>
         </t>
       </div>
     </div>
@@ -559,11 +556,11 @@
   </t>
   <t t-name="CarouselSlide" t-call="baseui.CarouselSlide"/>
   <t t-name="baseui.CarouselPrevious">
-    <button type="button" class="bu-carousel-prev" t-att-style="props.style" t-on-click="onClick"><t t-slot="default"/></button>
+    <Button unstyled="true" className="'bu-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 type="button" class="bu-carousel-next" t-att-style="props.style" t-on-click="onClick"><t t-slot="default"/></button>
+    <Button unstyled="true" className="'bu-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">
@@ -597,20 +594,19 @@
   </t>
   <t t-name="Checkbox" t-call="baseui.Checkbox"/>
 <t t-name="baseui.ClipboardButton">
-    <button
-      t-att-class="classNames"
-      type="button"
-      t-att-style="props.style"
-      t-att-disabled="props.disabled"
-      t-att-aria-label="ariaLabel"
-      t-att-data-icon-only="isIconOnly ? 'true' : undefined"
-      t-att-data-copied="state.copied ? 'true' : undefined"
-      t-on-click="onClick"
+    <Button
+      unstyled="true"
+      className="classNames"
+      style="props.style"
+      disabled="props.disabled"
+      ariaLabel="ariaLabel"
+      attrs="attrs"
+      icon="iconName"
+      label="label"
+      onClick="(event) => this.onClick(event)"
     >
-      <Icon name="iconName"/>
-      <t t-if="label" t-esc="label"/>
-      <t t-else="" t-slot="default"/>
-    </button>
+      <t t-slot="default"/>
+    </Button>
   </t>
   <t t-name="ClipboardButton" t-call="baseui.ClipboardButton"/>
 <t t-name="baseui.collapsible">
@@ -623,9 +619,9 @@
   </t>
   <t t-name="Collapsible" t-call="baseui.Collapsible"/>
   <t t-name="baseui.CollapsibleTrigger">
-    <button type="button" class="bu-collapsible-trigger" t-att-style="props.style" t-att-aria-expanded="env.collapsible.open ? 'true' : 'false'" t-on-click="onClick">
+    <Button unstyled="true" className="'bu-collapsible-trigger'" style="props.style" attrs="attrs" onClick="() => this.onClick()">
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="CollapsibleTrigger" t-call="baseui.CollapsibleTrigger"/>
   <t t-name="baseui.CollapsibleContent">
@@ -733,15 +729,15 @@
               t-att-class="column.align === 'right' ? 'text-end' : column.align === 'center' ? 'text-center' : ''"
               t-att-b-att-sort="state.sortKey === column.key ? (state.sortDir === 1 ? 'asc' : 'desc') : undefined"
             >
-              <button
+              <Button
                 t-if="isColumnSortable(column)"
-                type="button"
-                class="bu-data-table__header-button"
-                t-on-click="() => this.sortBy(column.key)"
+                unstyled="true"
+                className="'bu-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>
-              </button>
+              </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>
@@ -842,17 +838,17 @@
         </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">
-        <button
+        <Button
           t-foreach="rowActions"
           t-as="action"
           t-key="action.label"
-          type="button"
-          class="bu-data-table__actions-item"
-          role="menuitem"
-          t-on-click="() => this.onAction(action, openRowAction.row, openRowAction.index)"
+          unstyled="true"
+          className="'bu-data-table__actions-item'"
+          attrs="{ role: 'menuitem' }"
+          onClick="() => this.onAction(action, openRowAction.row, openRowAction.index)"
         >
           <t t-esc="action.label"/>
-        </button>
+        </Button>
       </div>
     </div>
   </t>
@@ -927,10 +923,17 @@
       <div class="modal-dialog modal-dialog-centered">
         <div t-att-class="'modal-content bu-dialog-panel' + (props.className ? ' ' + props.className : '')" data-slot="dialog-content">
           <t t-slot="default"/>
-          <button t-if="showCloseButton" type="button" class="btn bu-button btn-light btn-icon-sm bu-dialog-close bu-dialog-close-control" data-slot="dialog-close" aria-label="Close" data-bs-dismiss="modal">
-            <Icon name="'x'"/>
+          <Button
+            t-if="showCloseButton"
+            variant="'ghost'"
+            size="'icon-sm'"
+            className="'bu-dialog-close bu-dialog-close-control'"
+            aria-label="'Close'"
+            icon="'x'"
+            attrs="{'data-slot': 'dialog-close', 'data-bs-dismiss': 'modal'}"
+          >
             <span class="visually-hidden">Close</span>
-          </button>
+          </Button>
         </div>
       </div>
     </div>
@@ -966,9 +969,14 @@
   <t t-name="DialogDescription" t-call="baseui.DialogDescription"/>
 
   <t t-name="baseui.DialogClose">
-    <button type="button" t-att-class="'btn bu-button btn-outline-secondary bu-dialog-close' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" data-slot="dialog-close" data-bs-dismiss="modal">
+    <Button
+      variant="'outline'"
+      className="'bu-dialog-close' + (props.className ? ' ' + props.className : '')"
+      style="props.style"
+      attrs="{'data-slot': 'dialog-close', 'data-bs-dismiss': 'modal'}"
+    >
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="DialogClose" t-call="baseui.DialogClose"/>
 <t t-name="baseui.direction"><div b-ui="direction"><t t-esc="props.content"/></div></t>
@@ -980,7 +988,7 @@
   <t t-name="baseui.Drawer"><t t-slot="default"/></t>
   <t t-name="Drawer" t-call="baseui.Drawer"/>
   <t t-name="baseui.DrawerTrigger">
-    <button type="button" class="btn bu-button btn-outline-secondary bu-drawer-trigger" t-att-style="props.style" t-on-click="onClick"><t t-slot="default"/></button>
+    <Button variant="'outline'" className="'bu-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">
@@ -1000,7 +1008,7 @@
   <t t-name="baseui.DrawerDescription"><p class="bu-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 type="button" class="btn bu-button btn-outline-secondary bu-drawer-close" t-att-style="props.style" data-bs-dismiss="offcanvas"><t t-slot="default"/></button>
+    <Button variant="'outline'" attrs="attrs" className="'bu-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">
@@ -1016,9 +1024,9 @@
   </t>
   <t t-name="DropdownMenu" t-call="baseui.DropdownMenu"/>
   <t t-name="baseui.DropdownMenuTrigger">
-    <button t-ref="root" type="button" data-slot="dropdown-menu-trigger" t-att-class="classNames" t-att-style="props.style" aria-haspopup="menu" t-att-aria-expanded="env.dropdownMenu.open ? 'true' : 'false'" t-on-click="onClick">
+    <Button unstyled="true" getRef="getRef" className="classNames" style="props.style" attrs="attrs" onClick="() => this.onClick()">
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="DropdownMenuTrigger" t-call="baseui.DropdownMenuTrigger"/>
   <t t-name="baseui.DropdownMenuContent">
@@ -1339,16 +1347,16 @@
     ><t t-slot="default"/></div>
   </t>
   <t t-name="baseui.InputGroupButton">
-    <button
-      t-att-class="classNames"
-      t-att-style="props.style"
-      t-att-type="props.type || 'button'"
-      t-att-disabled="props.disabled"
-      t-att-data-size="size"
-      t-att-aria-label="ariaLabel"
-      data-slot="input-group-button"
-      t-on-click="onClick"
-    ><t t-if="props.label" t-esc="props.label"/><t t-else="" t-slot="default"/></button>
+    <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>
@@ -1623,9 +1631,9 @@
   </t>
   <t t-name="Popover" t-call="baseui.Popover"/>
   <t t-name="baseui.PopoverTrigger">
-    <button t-ref="root" type="button" class="btn bu-button btn-outline-secondary bu-popover-trigger" aria-haspopup="dialog" t-att-aria-expanded="env.popover.open ? 'true' : 'false'" t-att-style="props.style" t-on-click="onClick">
+    <Button unstyled="true" getRef="getRef" className="'btn bu-button btn-outline-secondary bu-popover-trigger'" attrs="attrs" style="props.style" onClick="() => this.onClick()">
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="PopoverTrigger" t-call="baseui.PopoverTrigger"/>
   <!-- Rendered but never shown: Owl keeps this reactive so PopoverTrigger
@@ -1663,7 +1671,7 @@
   <t t-name="baseui.Pwa"><t t-slot="default"/></t>
   <t t-name="Pwa" t-call="baseui.Pwa"/>
   <t t-name="baseui.PwaTrigger">
-    <button type="button" class="btn bu-button btn-primary bu-pwa-trigger" t-att-style="props.style" t-on-click="onClick"><t t-slot="default"/></button>
+    <Button variant="'default'" className="'bu-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">
@@ -1703,7 +1711,7 @@
   <t t-name="baseui.PwaFooter"><div class="bu-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 type="button" class="btn bu-button btn-outline-secondary bu-pwa-close" t-att-style="props.style" t-on-click="onClick"><t t-slot="default"/></button>
+    <Button variant="'outline'" className="'bu-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">
@@ -1720,15 +1728,15 @@
   </t>
   <t t-name="QuestionnaireStep" t-call="baseui.QuestionnaireStep"/>
   <t t-name="baseui.QuestionnairePrevious">
-    <button type="button" class="bu-questionnaire-prev" t-att-style="props.style" t-att-disabled="disabled" t-on-click="onClick">
+    <Button unstyled="true" className="'bu-questionnaire-prev'" style="props.style" disabled="disabled" onClick="() => this.onClick()">
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="QuestionnairePrevious" t-call="baseui.QuestionnairePrevious"/>
   <t t-name="baseui.QuestionnaireNext">
-    <button type="button" class="bu-questionnaire-next" t-att-style="props.style" t-on-click="onClick">
+    <Button unstyled="true" className="'bu-questionnaire-next'" style="props.style" onClick="() => this.onClick()">
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="QuestionnaireNext" t-call="baseui.QuestionnaireNext"/>
 <t t-name="baseui.radio-group">
@@ -1784,16 +1792,15 @@
   </t>
   <t t-name="Select" t-call="baseui.Select"/>
   <t t-name="baseui.SelectTrigger">
-    <button
-      type="button"
-      class="bu-select-trigger"
-      aria-haspopup="listbox"
-      t-att-aria-expanded="env.select.open ? 'true' : 'false'"
-      t-att-style="props.style"
-      t-on-click="onClick"
+    <Button
+      unstyled="true"
+      className="'bu-select-trigger'"
+      attrs="attrs"
+      style="props.style"
+      onClick="() => this.onClick()"
     >
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="SelectTrigger" t-call="baseui.SelectTrigger"/>
   <t t-name="baseui.SelectContent">
@@ -1833,8 +1840,10 @@
                onOpenChange="(open) => !open and this.dismissToast()">
           <div t-esc="props.toast.message"/>
           <t t-if="props.toast.actionLabel">
-            <Button variant="'outline'" size="'sm'" className="'ms-2'"
-                    label="props.toast.actionLabel" onClick="() => this.runToastAction()"/>
+            <t t-set-slot="action">
+              <Button variant="'outline'" size="'sm'"
+                      label="props.toast.actionLabel" onClick="() => this.runToastAction()"/>
+            </t>
           </t>
         </Toast>
       </t>
@@ -1906,7 +1915,7 @@
     <div t-if="authState" t-att-class="'bu-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"/>
-        <button type="button" class="btn bu-button btn-outline-secondary btn-sm" t-on-click="logout">Logout</button>
+        <Button variant="'outline'" size="'sm'" label="'Logout'" onClick="() => this.logout()"/>
       </t>
     </div>
   </t>
@@ -1928,7 +1937,7 @@
   <t t-name="baseui.Sheet"><t t-slot="default"/></t>
   <t t-name="Sheet" t-call="baseui.Sheet"/>
   <t t-name="baseui.SheetTrigger">
-    <button type="button" class="btn bu-button btn-outline-secondary bu-sheet-trigger" t-att-style="props.style" t-on-click="onClick"><t t-slot="default"/></button>
+    <Button variant="'outline'" className="'bu-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">
@@ -1948,7 +1957,7 @@
   <t t-name="baseui.SheetDescription"><p class="bu-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 type="button" class="btn bu-button btn-outline-secondary bu-sheet-close" t-att-style="props.style" data-bs-dismiss="offcanvas"><t t-slot="default"/></button>
+    <Button variant="'outline'" className="'bu-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">
@@ -1998,15 +2007,13 @@
   </t>
   <t t-name="SidebarInset" t-call="baseui.SidebarInset"/>
   <t t-name="baseui.SidebarRail">
-    <button type="button"
-            t-att-class="'bu-sidebar-rail' + (props.className ? ' ' + props.className : '')"
-            t-att-style="props.style"
-            data-sidebar="rail"
-            data-slot="sidebar-rail"
-            aria-label="Toggle Sidebar"
-            title="Toggle Sidebar"
-            tabindex="-1"
-            t-on-click="onClick"/>
+    <Button type="'button'" unstyled="true"
+            className="'bu-sidebar-rail' + (props.className ? ' ' + props.className : '')"
+            style="props.style"
+            attrs="{ 'data-sidebar': 'rail', 'data-slot': 'sidebar-rail', tabindex: '-1' }"
+            ariaLabel="'Toggle Sidebar'"
+            title="'Toggle Sidebar'"
+            onClick="() => this.onClick()"/>
   </t>
   <t t-name="SidebarRail" t-call="baseui.SidebarRail"/>
   <t t-name="baseui.SidebarInput">
@@ -2024,18 +2031,17 @@
   </t>
   <t t-name="SidebarSeparator" t-call="baseui.SidebarSeparator"/>
   <t t-name="baseui.SidebarClose">
-    <button type="button"
-            t-att-class="'bu-sidebar-close' + (props.className ? ' ' + props.className : '')"
-            t-att-style="props.style"
-            data-sidebar="close"
-            data-slot="sidebar-close"
-            aria-label="props.label || 'Close Sidebar'"
-            t-on-click="onClick">
+    <Button type="'button'" unstyled="true"
+            className="'bu-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'"/>
       <span t-if="props.label"><t t-esc="props.label"/></span>
       <span t-else="" class="visually-hidden">Close Sidebar</span>
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="SidebarClose" t-call="baseui.SidebarClose"/>
   <t t-name="baseui.SidebarGroup">
@@ -2054,16 +2060,15 @@
   </t>
   <t t-name="SidebarGroupLabel" t-call="baseui.SidebarGroupLabel"/>
   <t t-name="baseui.SidebarGroupAction">
-    <button type="button"
-            t-att-class="'bu-sidebar-group-action' + (props.className ? ' ' + props.className : '')"
-            t-att-style="props.style"
-            data-sidebar="group-action"
-            data-slot="sidebar-group-action"
-            t-att-aria-label="ariaLabel"
-            t-on-click="onClick">
-      <Icon t-if="props.icon" name="props.icon"/>
+    <Button type="'button'" unstyled="true"
+            className="'bu-sidebar-group-action' + (props.className ? ' ' + props.className : '')"
+            style="props.style"
+            attrs="{ 'data-sidebar': 'group-action', 'data-slot': 'sidebar-group-action' }"
+            ariaLabel="ariaLabel"
+            icon="props.icon"
+            onClick="(event) => this.onClick(event)">
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="SidebarGroupAction" t-call="baseui.SidebarGroupAction"/>
   <t t-name="baseui.SidebarGroupContent">
@@ -2074,15 +2079,13 @@
   <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">
-      <button type="button"
-              t-att-class="'bu-sidebar-group-trigger'"
-              data-sidebar="group-label"
-              data-slot="sidebar-group-label"
-              t-att-aria-expanded="open ? 'true' : 'false'"
-              t-on-click="toggle">
+      <Button type="'button'" unstyled="true"
+              className="'bu-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' : '')"/>
-      </button>
+      </Button>
       <div t-if="open" class="bu-sidebar-group-content">
         <t t-slot="default"/>
       </div>
@@ -2102,47 +2105,27 @@
   </t>
   <t t-name="SidebarMenuItem" t-call="baseui.SidebarMenuItem"/>
   <t t-name="baseui.SidebarMenuButton">
-    <a t-if="props.href"
-       t-att-href="props.href"
-       t-att-class="classNames"
-       t-att-style="props.style"
-       data-sidebar="menu-button"
-       data-slot="sidebar-menu-button"
-       t-att-data-active="isActive ? 'true' : undefined"
-       t-att-data-size="props.size || 'default'"
-       t-att-aria-current="isActive ? 'page' : undefined"
-       t-att-aria-disabled="props.disabled ? 'true' : undefined"
-       t-on-click="onClick">
-      <Icon t-if="props.icon" name="props.icon" className="'bu-sidebar-menu-icon'"/>
-      <span class="bu-sidebar-menu-label"><t t-slot="default"/></span>
-    </a>
-    <button t-else=""
-            type="button"
-            t-att-class="classNames"
-            t-att-style="props.style"
-            data-sidebar="menu-button"
-            data-slot="sidebar-menu-button"
-            t-att-data-active="isActive ? 'true' : undefined"
-            t-att-data-size="props.size || 'default'"
-            t-att-aria-current="isActive ? 'page' : undefined"
-            t-att-disabled="props.disabled"
-            t-on-click="onClick">
+    <Button href="props.href" unstyled="true"
+            className="classNames"
+            style="props.style"
+            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>
-    </button>
+    </Button>
   </t>
   <t t-name="SidebarMenuButton" t-call="baseui.SidebarMenuButton"/>
   <t t-name="baseui.SidebarMenuAction">
-    <button type="button"
-            t-att-class="'bu-sidebar-menu-action' + (props.showOnHover ? ' show-on-hover' : '') + (props.className ? ' ' + props.className : '')"
-            t-att-style="props.style"
-            data-sidebar="menu-action"
-            data-slot="sidebar-menu-action"
-            t-att-aria-label="ariaLabel"
-            t-on-click="onClick">
-      <Icon t-if="props.icon" name="props.icon"/>
+    <Button type="'button'" unstyled="true"
+            className="'bu-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"
+            icon="props.icon"
+            onClick="(event) => this.onClick(event)">
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="SidebarMenuAction" t-call="baseui.SidebarMenuAction"/>
   <t t-name="baseui.SidebarMenuSub">
@@ -2171,27 +2154,27 @@
   </t>
   <t t-name="SidebarMenuSubItem" t-call="baseui.SidebarMenuSubItem"/>
   <t t-name="baseui.SidebarMenuSubButton">
-    <a t-if="props.href" t-att-href="props.href" t-att-class="classNames" t-att-style="props.style" data-sidebar="menu-sub-button" data-slot="sidebar-menu-sub-button" t-att-data-active="(props.active || props.isActive) ? 'true' : undefined" t-on-click="onClick">
-      <t t-slot="default"/>
-    </a>
-    <button t-else="" type="button" t-att-class="classNames" t-att-style="props.style" data-sidebar="menu-sub-button" data-slot="sidebar-menu-sub-button" t-att-data-active="(props.active || props.isActive) ? 'true' : undefined" t-on-click="onClick">
+    <Button href="props.href" unstyled="true"
+            className="classNames"
+            style="props.style"
+            attrs="{ 'data-sidebar': 'menu-sub-button', 'data-slot': 'sidebar-menu-sub-button', 'data-active': (props.active || props.isActive) ? 'true' : undefined }"
+            onClick="(event) => this.onClick(event)">
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="SidebarMenuSubButton" t-call="baseui.SidebarMenuSubButton"/>
 <t t-name="baseui.SidebarTrigger">
-    <button type="button"
-            t-att-class="'bu-sidebar-trigger' + (props.className ? ' ' + props.className : '')"
-            t-att-style="props.style"
-            data-sidebar="trigger"
-            data-slot="sidebar-trigger"
-            aria-label="Toggle Sidebar"
-            t-on-click="onClick">
+    <Button type="'button'" unstyled="true"
+            className="'bu-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'"/>
       <span t-if="props.label"><t t-esc="props.label"/></span>
       <span t-else="" class="visually-hidden">Toggle Sidebar</span>
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="SidebarTrigger" t-call="baseui.SidebarTrigger"/>
 <t t-name="baseui.slider"><input b-ui="slider" type="range"/></t>
@@ -2244,23 +2227,23 @@
   </t>
   <t t-name="Table" t-call="baseui.Table"/>
 <t t-name="baseui.Tabs">
-    <div t-att-class="'bu-tabs' + (props.className ? ' ' + props.className : '')" t-att-style="props.style">
+    <div t-att-class="classNames" t-att-data-orientation="orientation" t-att-style="props.style">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="Tabs" t-call="baseui.Tabs"/>
 
   <t t-name="baseui.TabsList">
-    <div t-ref="list" role="tablist" t-att-class="'nav nav-tabs' + (props.className ? ' ' + props.className : '')" t-att-style="props.style" t-on-keydown="onKeyDown">
+    <div t-ref="list" role="tablist" t-att-class="classNames" t-att-style="props.style" t-on-keydown="onKeyDown">
       <t t-slot="default"/>
     </div>
   </t>
   <t t-name="TabsList" t-call="baseui.TabsList"/>
 
   <t t-name="baseui.TabTrigger">
-    <button t-ref="root" type="button" role="tab" t-att-class="'rounded-0 rounded-top-1 ' + classNames" t-att-style="props.style" t-att-data-bs-target="'#' + panelId" t-att-aria-selected="isActive ? 'true' : 'false'" t-att-tabindex="isActive ? 0 : -1" t-att-disabled="props.disabled" t-on-click="onClick">
+    <Button unstyled="true" className="classNames" style="props.style" disabled="props.disabled" attrs="tabAttrs" getRef="(el) => this.onRootRef(el)" onClick="() => this.onClick()">
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="TabTrigger" t-call="baseui.TabTrigger"/>
 
@@ -2273,11 +2256,7 @@
 
   <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">
-      <Card className="'bu-tabs-panel-card rounded-0 '" style="'border-end-start-radius: 8px !important; border-end-end-radius: 4px !important;'">
-        <CardBody>
-          <t t-slot="default"/>
-        </CardBody>
-      </Card>
+      <t t-slot="default"/>
     </div>
   </t>
   <t t-name="TabContent" t-call="baseui.TabContent"/>
@@ -2320,19 +2299,19 @@
   </t>
   <t t-name="TextEditor" t-call="baseui.TextEditor"/>
 <t t-name="baseui.ThemeButton">
-    <button
-      t-att-class="classNames"
-      t-att-style="props.style"
-      type="button"
-      b-theme-button=""
-      t-att-aria-label="label"
-      t-att-title="label"
-      t-att-aria-pressed="pressed"
-      t-on-click="onClick"
+    <Button
+      unstyled="true"
+      className="classNames"
+      style="props.style"
+      attrs="attrs"
+      ariaLabel="label"
+      title="label"
+      ariaPressed="pressed"
+      onClick="() => this.onClick()"
     >
       <Icon name="iconName" base-url="baseUrl"/>
       <span class="visually-hidden" b-theme-button-label="" t-esc="label"/>
-    </button>
+    </Button>
   </t>
   <t t-name="ThemeButton" t-call="baseui.ThemeButton"/>
 <t t-name="baseui.toast">
@@ -2340,8 +2319,11 @@
   </t>
   <t t-name="baseui.Toast">
     <div t-ref="root" t-att-class="classNames" t-att-style="props.style" t-att-role="role">
-      <t t-slot="default"/>
-      <Button variant="'ghost'" size="'icon-sm'" className="'bu-toast-close'" aria-label="'Close'" onClick="() => this.close()">x</Button>
+      <div class="bu-toast-content"><t t-slot="default"/></div>
+      <div class="bu-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>
+      </div>
     </div>
   </t>
   <t t-name="Toast" t-call="baseui.Toast"/>
@@ -2371,9 +2353,9 @@
     <button type="button"><t t-out="props.label"/></button>
   </t>
   <t t-name="baseui.Toggle">
-    <button type="button" t-att-class="classNames" t-att-style="props.style" t-att-aria-pressed="pressed ? 'true' : 'false'" t-on-click="onClick">
+    <Button unstyled="true" className="classNames" style="props.style" aria-pressed="pressed ? 'true' : 'false'" onClick="() => this.onClick()">
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="Toggle" t-call="baseui.Toggle"/>
 <t t-name="baseui.toggle-group">
@@ -2390,15 +2372,15 @@
   </t>
   <t t-name="ToggleGroup" t-call="baseui.ToggleGroup"/>
   <t t-name="baseui.ToggleGroupItem">
-    <button
-      type="button"
-      class="btn btn-outline-secondary"
-      t-att-style="props.style"
-      t-att-aria-pressed="pressed ? 'true' : 'false'"
-      t-on-click="onClick"
+    <Button
+      unstyled="true"
+      className="'btn btn-outline-secondary'"
+      style="props.style"
+      ariaPressed="pressed ? 'true' : 'false'"
+      onClick="() => this.onClick()"
     >
       <t t-slot="default"/>
-    </button>
+    </Button>
   </t>
   <t t-name="ToggleGroupItem" t-call="baseui.ToggleGroupItem"/>
 <t t-name="baseui.typography">