@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.60

package/dist/runtime/editor/plugins/Sidebar/index.vue

@@ -5,7 +5,11 @@
       ref="tourElement"
       class="bk-toolbar-button _bk_group/tooltip"
       :class="[
-  { 'bk-is-active': activeSidebar === id && !isDisabled },
+  {
+    'bk-is-active': activeSidebar === id && !isDisabled,
+    'bk-has-dropdown-bottom': region === 'left',
+    'bk-has-dropdown-left': region !== 'left'
+  },
   'bk-is-' + region
 ]"
       :disabled="isDisabled"
@@ -213,7 +217,8 @@ const onAttachDetached = () => {
   activeSidebar.value = props.id;
   emit("updated");
 };
-const toggleSidebar = () => {
+const toggleSidebar = async () => {
+  await ui.flushPendingChanges();
   emit("toggle");
   if (isDetached.value) {
     isDetached.value = false;
@@ -304,7 +309,7 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk-html-root {
   --bk-sidebar-width-right: 280px;
   --bk-toolbar-left-width: 50px;
@@ -312,202 +317,175 @@ export default {
   --bk-item-icon-radius-base-toolbar: 4px;
   --bk-add-item-font-size: 16px;
 }
-
-  @media screen and (min-height: 900px) {
-.bk-html-root {
+@media screen and (min-height: 900px) {
+  .bk-html-root {
     --bk-toolbar-left-width: 60px;
     --bk-add-item-icon-padding: 8px;
     --bk-item-icon-radius-base-toolbar: 6px;
-    --bk-add-item-font-size: 16px
-}
+    --bk-add-item-font-size: 16px;
   }
-
-  @media screen and (min-height: 1100px) {
-.bk-html-root {
+}
+@media screen and (min-height: 1100px) {
+  .bk-html-root {
     --bk-toolbar-left-width: 70px;
     --bk-add-item-icon-padding: 10px;
     --bk-item-icon-radius-base-toolbar: 8px;
-    --bk-add-item-font-size: 18px
+    --bk-add-item-font-size: 18px;
+  }
 }
+@media (width >= 48rem) {
+  .bk-html-root {
+    --bk-sidebar-width-right: 400px;
   }
-
-  @media (min-width: 768px) {
-.bk-html-root {
-    --bk-sidebar-width-right: 351px
 }
+@media (width >= 96rem) {
+  .bk-html-root {
+    --bk-sidebar-width-right: 420px;
   }
-
-  @media (min-width: 1536px) {
-.bk-html-root {
-    --bk-sidebar-width-right: 400px
 }
+@media (width >= 1920px) {
+  .bk-html-root {
+    --bk-sidebar-width-right: 440px;
   }
-
-  @media (min-width: 1920px) {
-.bk-html-root {
-    --bk-sidebar-width-right: 440px
 }
+@media (width >= 2440px) {
+  .bk-html-root {
+    --bk-sidebar-width-right: 480px;
   }
-
+}
 .bk.bk-sidebar {
   pointer-events: auto;
-  z-index: calc(var(--bk-z-index-base) + 140000) /* "sidebar" */;
+  z-index: calc(var(--bk-z-index-base) + 130000) /* "sidebar" */;
   width: var(--bk-sidebar-width-right);
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  background-color: white;
 }
-
 .bk.bk-sidebar .bk-sidebar-padding {
   padding: 20px;
 }
-
 .bk.bk-sidebar.bk-is-right {
   min-height: 0px;
-  flex: 1 1 0%;
+  flex: 1;
 }
-
 .bk.bk-sidebar.bk-is-right-bottom {
   min-height: 0px;
-  flex: 1 1 0%;
+  flex: 1;
 }
-
 .bk.bk-sidebar.bk-is-right-bottom .bk-sidebar-title {
   border-bottom-color: transparent !important;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+  background-color: rgb(var(--bk-theme-accent-700) / 1);
+  color: white;
 }
-
-.bk.bk-sidebar.bk-is-right-bottom .bk-sidebar-title button {
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-accent-50) / var(--bk-tw-text-opacity, 1));
+:is(.bk.bk-sidebar.bk-is-right-bottom .bk-sidebar-title) button {
+  color: rgb(var(--bk-theme-accent-50) / 1);
 }
-
-.bk.bk-sidebar.bk-is-right-bottom .bk-sidebar-title button:hover {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+@media (hover: hover) {
+  :is(:is(.bk.bk-sidebar.bk-is-right-bottom .bk-sidebar-title) button):hover {
+    background-color: rgb(var(--bk-theme-accent-800) / 1);
+  }
 }
-
-@media (min-width: 768px) {
-
+@media (hover: hover) {
+  :is(:is(.bk.bk-sidebar.bk-is-right-bottom .bk-sidebar-title) button):hover {
+    color: white;
+  }
+}
+@media (width >= 48rem) {
   .bk.bk-sidebar.bk-is-left {
     width: 400px;
   }
 }
-
 .bk.bk-sidebar.bk-is-left {
-    grid-area: sidebar-left;
-  }
-
+  grid-area: sidebar-left;
+}
 .bk.bk-sidebar:empty {
   display: none;
 }
-
 .bk.bk-sidebar.bk-is-hidden {
   pointer-events: none;
   --bk-tw-translate-y: 40px;
-  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-  opacity: 0;
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+  opacity: 0%;
 }
-
 .bk.bk-sidebar .bk-sidebar-title {
   display: flex;
   height: 40px;
   align-items: center;
+  border-bottom-style: var(--bk-tw-border-style) !important;
   border-bottom-width: 1px !important;
-  --bk-tw-border-opacity: 1 !important;
-  border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1)) !important;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / 1) !important;
   padding-left: 15px !important;
   font-family: PB Inter, sans-serif !important;
-  font-weight: 600 !important;
+  --bk-tw-font-weight: var(--font-weight-semibold, 600) !important;
+  font-weight: var(--font-weight-semibold, 600) !important;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  -webkit-user-select: none;
   user-select: none;
-  font-size: 14px;
-  line-height: 20px;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1));
+  background-color: rgb(var(--bk-theme-mono-200) / 1);
 }
-
-.bk.bk-sidebar .bk-sidebar-title button:first-of-type {
+:is(:is(.bk.bk-sidebar .bk-sidebar-title) button):first-of-type {
   margin-left: auto;
 }
-
-.bk.bk-sidebar .bk-sidebar-title button {
+:is(.bk.bk-sidebar .bk-sidebar-title) button {
   display: flex;
   height: 40px;
   min-width: 40px;
   align-items: center;
   justify-content: center;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1));
+  color: rgb(var(--bk-theme-mono-700) / 1);
 }
-
-.bk.bk-sidebar .bk-sidebar-title button:hover {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1));
+@media (hover: hover) {
+  :is(:is(.bk.bk-sidebar .bk-sidebar-title) button):hover {
+    background-color: rgb(var(--bk-theme-mono-100) / 1);
+  }
 }
-
-.bk.bk-sidebar .bk-sidebar-title button svg {
+@media (hover: hover) {
+  :is(:is(.bk.bk-sidebar .bk-sidebar-title) button):hover {
+    color: rgb(var(--bk-theme-mono-900) / 1);
+  }
+}
+:is(:is(.bk.bk-sidebar .bk-sidebar-title) button) svg {
   width: 15px;
   height: 15px;
-  fill: currentColor;
+  fill: currentcolor;
 }
-
 .bk.bk-sidebar-inner {
   display: flex;
   height: 100%;
   flex-direction: column;
 }
-
 .bk.bk-sidebar-right-wrapper {
   pointer-events: none;
   position: relative;
-  z-index: calc(var(--bk-z-index-base) + 140000) /* "sidebar" */;
+  z-index: calc(var(--bk-z-index-base) + 130000) /* "sidebar" */;
   display: flex;
   flex-direction: column;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  background-color: white;
   grid-area: viewport;
   width: var(--bk-sidebar-width-right);
 }
-
-@media (min-width: 768px) {
-
-.bk.bk-sidebar-right-wrapper {
-    grid-area: sidebar-right
-}
+@media (width >= 48rem) {
+  .bk.bk-sidebar-right-wrapper {
+    grid-area: sidebar-right;
   }
-
-.bk.bk-sidebar-right-wrapper > * {
+}
+.bk.bk-sidebar-right-wrapper  > * {
   pointer-events: auto;
 }
-
-.bk.bk-sidebar-right-wrapper.bk-is-resizing-split > #bk-sidebar-content-right,
-    .bk.bk-sidebar-right-wrapper.bk-is-resizing-split > #bk-sidebar-content-right-bottom {
+.bk.bk-sidebar-right-wrapper.bk-is-resizing-split  > #bk-sidebar-content-right,.bk.bk-sidebar-right-wrapper.bk-is-resizing-split  > #bk-sidebar-content-right-bottom {
   pointer-events: none;
 }
-
 .bk.bk-sidebar-right-wrapper.bk-is-split {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+  background-color: rgb(var(--bk-theme-mono-900) / 1);
 }
-
-.bk.bk-sidebar-right-wrapper #bk-sidebar-content-right,
-  .bk.bk-sidebar-right-wrapper #bk-sidebar-content-right-bottom {
+.bk.bk-sidebar-right-wrapper #bk-sidebar-content-right,.bk.bk-sidebar-right-wrapper #bk-sidebar-content-right-bottom {
   position: relative;
   z-index: 10;
 }
-
 .bk .bk-sidebar-content-wrapper {
   position: relative;
-  flex: 1 1 0%;
+  flex: 1;
   overflow: hidden;
 }
-
 .bk .bk-sidebar-content {
   position: absolute;
   top: 0px;
@@ -516,22 +494,17 @@ export default {
   width: 100%;
   overflow: auto;
 }
-
-.bk .bk-sidebar-content::-webkit-scrollbar {
-    display: none;
-  }
-
+:is(.bk .bk-sidebar-content)::-webkit-scrollbar {
+  display: none;
+}
 .bk .bk-sidebar-padding {
   padding: 15px;
 }
-
-@media (min-width: 1024px) {
-
+@media (width >= 64rem) {
   .bk .bk-sidebar-padding {
     padding: 20px;
   }
 }
-
 .bk.bk-sidebar-detached {
   position: fixed;
   top: 0px;
@@ -541,341 +514,235 @@ export default {
   height: auto;
   flex-direction: column;
   overflow: hidden;
-  border-radius: 6px;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  background-color: white;
   will-change: transform;
+  border-style: var(--bk-tw-border-style);
   border-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-border-opacity, 1));
+  border-color: rgb(var(--bk-theme-mono-200) / 1);
   pointer-events: auto;
   contain: layout paint style;
 }
-
 .bk.bk-sidebar-detached.bk-is-focused {
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-border-opacity, 1));
-  --bk-tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --bk-tw-shadow-colored: 0 20px 25px -5px var(--bk-tw-shadow-color), 0 8px 10px -6px var(--bk-tw-shadow-color);
-  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
+  border-color: rgb(var(--bk-theme-mono-700) / 1);
+  --bk-tw-shadow: 0 20px 25px -5px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
 }
-
 .bk.bk-sidebar-detached.bk-is-focused .bk-sidebar-title {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
+  color: white;
 }
-
-.bk.bk-sidebar-detached.bk-is-focused .bk-sidebar-title button:hover {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+:is(.bk.bk-sidebar-detached.bk-is-focused .bk-sidebar-title) button:hover {
+  background-color: rgb(var(--bk-theme-mono-700) / 1);
 }
-
-.bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner button,
-      .bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner li,
-      .bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner a,
-      .bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner input,
-      .bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner textarea {
+:is(.bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner) button,:is(.bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner) li,:is(.bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner) a,:is(.bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner) input,:is(.bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner) textarea {
   pointer-events: none;
 }
-
 .bk.bk-sidebar-detached .bk-sidebar-title {
   cursor: move;
   display: flex;
   height: 40px;
-  user-select: none;
   align-items: center;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-bg-opacity, 1));
+  background-color: rgb(var(--bk-theme-mono-300) / 1);
   padding-left: 10px;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 600;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: rgb(var(--bk-theme-mono-500) / 1);
+  -webkit-user-select: none;
+  user-select: none;
 }
-
-.bk.bk-sidebar-detached .bk-sidebar-title > .bk-sidebar-title-icon {
+:is(.bk.bk-sidebar-detached .bk-sidebar-title)  > .bk-sidebar-title-icon {
   margin-right: 5px;
   height: 20px;
   width: 20px;
 }
-
-.bk.bk-sidebar-detached .bk-sidebar-title > .bk-sidebar-title-icon svg {
-  fill: currentColor;
+:is(:is(.bk.bk-sidebar-detached .bk-sidebar-title) > .bk-sidebar-title-icon) svg {
+  fill: currentcolor;
 }
-
-.bk.bk-sidebar-detached .bk-sidebar-title > span {
+:is(.bk.bk-sidebar-detached .bk-sidebar-title)  > span {
   margin-right: auto;
 }
-
-.bk.bk-sidebar-detached .bk-sidebar-title button {
+:is(.bk.bk-sidebar-detached .bk-sidebar-title) button {
   display: flex;
   height: 40px;
   width: 40px;
   align-items: center;
   justify-content: center;
 }
-
-.bk.bk-sidebar-detached .bk-sidebar-title button:hover {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-bg-opacity, 1));
+:is(:is(.bk.bk-sidebar-detached .bk-sidebar-title) button):hover {
+  background-color: rgb(var(--bk-theme-mono-400) / 1);
 }
-
-.bk.bk-sidebar-detached .bk-sidebar-title button svg {
+:is(:is(.bk.bk-sidebar-detached .bk-sidebar-title) button) svg {
   height: 20px;
   width: 20px;
-  fill: currentColor;
+  fill: currentcolor;
 }
-
 .bk .bk-sidebar-detached-inner {
   position: relative;
   display: flex;
   height: 100%;
   flex-direction: column;
 }
-
 .bk .bk-sidebar-detached-handle {
   position: absolute;
   z-index: 50;
 }
-
-.bk .bk-sidebar-detached-handle.bk-is-bottom {
+.bk-is-bottom:is(.bk .bk-sidebar-detached-handle) {
   bottom: 0px;
   height: 10px;
   width: 100%;
   cursor: ns-resize;
 }
-
-.bk .bk-sidebar-detached-handle.bk-is-right {
+.bk-is-right:is(.bk .bk-sidebar-detached-handle) {
   right: 0px;
   height: 100%;
   width: 10px;
   cursor: ew-resize;
 }
-
-.bk .bk-sidebar-detached-handle.bk-is-bottom-right {
+.bk-is-bottom-right:is(.bk .bk-sidebar-detached-handle) {
   right: 0px;
   bottom: 0px;
   height: 10px;
   width: 10px;
   cursor: se-resize;
 }
-
 .bk.bk-sidebar-tabs {
   position: relative;
   left: 0px;
-  z-index: calc(var(--bk-z-index-base) + 150000) /* "sidebar-tabs" */;
+  z-index: calc(var(--bk-z-index-base) + 140000) /* "sidebar-tabs" */;
   display: flex;
   height: 40px;
   width: 100%;
   flex-direction: row-reverse;
   justify-content: space-between;
   overflow: auto;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+  background-color: rgb(var(--bk-theme-mono-900) / 1);
 }
-
-@media (min-width: 1024px) {
-
+@media (width >= 64rem) {
   .bk.bk-sidebar-tabs {
     height: auto;
+  }
+}
+@media (width >= 64rem) {
+  .bk.bk-sidebar-tabs {
     overflow: visible;
   }
 }
-
 .bk.bk-sidebar-tabs {
   pointer-events: auto;
   contain: style size;
   grid-area: right;
 }
-
-.bk.bk-sidebar-tabs > div {
+.bk.bk-sidebar-tabs  > div {
   display: flex;
 }
-
-@media (min-width: 1024px) {
-
-.bk.bk-sidebar-tabs {
+@media (width >= 64rem) {
+  .bk.bk-sidebar-tabs {
     flex-direction: column;
     justify-content: flex-start;
   }
-
-    .bk.bk-sidebar-tabs #bk-sidebar-tabs-right-bottom {
+  .bk.bk-sidebar-tabs #bk-sidebar-tabs-right-bottom {
     margin-top: auto;
   }
-
-    .bk.bk-sidebar-tabs > div {
+  .bk.bk-sidebar-tabs  > div {
     position: relative;
     min-height: 50px;
   }
-        .bk.bk-sidebar-tabs > div:first-child:before {
-          content: '';
-          position: absolute;
-          bottom: 0px;
-          left: 0px;
-          height: 1px;
-          width: 100%;
-          --bk-tw-bg-opacity: 1;
-          background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
-        }
+  :is(.bk.bk-sidebar-tabs > div):first-child:before {
+    content: '';
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    height: 1px;
+    width: 100%;
+    background-color: rgb(var(--bk-theme-mono-700) / 1);
   }
-
+}
 .bk.bk-sidebar-tabs button {
   position: relative;
   height: 40px;
   width: 50px;
 }
-
-@media (min-width: 768px) {
-
+@media (width >= 48rem) {
   .bk.bk-sidebar-tabs button {
     height: 50px;
   }
 }
-
-.bk .bk-sidebar-container-tabs.bk-is-right {
+.bk-is-right:is(.bk .bk-sidebar-container-tabs) {
   display: flex;
   flex-direction: row;
 }
-
-@media (min-width: 1024px) {
-
-  .bk .bk-sidebar-container-tabs.bk-is-right {
+@media (width >= 64rem) {
+  .bk-is-right:is(.bk .bk-sidebar-container-tabs) {
     flex-direction: column;
   }
 }
-
-.bk .bk-sidebar-container-tabs .bk-toolbar-button:before {
-  height: 0px;
-  width: 0px;
-  border-style: solid;
-  --bk-tw-content: '';
-  content: var(--bk-tw-content);
-  position: absolute;
-  bottom: 0px;
-  left: 17.5px;
-  transform-origin: bottom;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  --bk-tw-scale-y: 0;
-  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-      border-width: 0 8px 6px;
-      border-color: transparent transparent #ffffff transparent;
-}
-
-@media (min-width: 1024px) {
-        .bk .bk-sidebar-container-tabs .bk-toolbar-button.bk-is-right:before, .bk .bk-sidebar-container-tabs .bk-toolbar-button.bk-is-right-bottom:before {
-          border-width: 10px 0 10px 10px;
-          border-color: transparent transparent transparent #ffffff;
-          position: absolute;
-          top: 15px;
-          left: 0px;
-          transform-origin: left;
-          transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-          transition-duration: 150ms;
-          --bk-tw-scale-x: 0;
-          transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-        }
-        .bk .bk-sidebar-container-tabs .bk-toolbar-button.bk-is-left:before {
-          border-width: 0 10px 10px;
-          left: 15px;
-        }
-    }
-
-.bk .bk-sidebar-container-tabs .bk-toolbar-button.bk-is-active {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
-}
-
-.bk .bk-sidebar-container-tabs .bk-toolbar-button.bk-is-active:before {
-  --bk-tw-scale-x: 1;
-  --bk-tw-scale-y: 1;
-  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-}
-
 .bk .bk-sidebar-badge {
   position: absolute;
-  top: 3px;
-  right: 3px;
+  top: 5px;
+  right: 5px;
   display: flex;
   width: 18px;
   height: 18px;
   align-items: center;
   justify-content: center;
-  border-radius: 9999px;
-  font-weight: 700;
+  border-radius: calc(infinity * 1px);
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
   font-size: 10px;
 }
-
-.bk .bk-sidebar-badge.bk-is-yellow {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-yellow-dark) / var(--bk-tw-text-opacity, 1));
+.bk-is-yellow:is(.bk .bk-sidebar-badge) {
+  background-color: rgb(var(--bk-theme-yellow-normal) / 1);
+  color: rgb(var(--bk-theme-yellow-dark) / 1);
 }
-
-.bk .bk-sidebar-badge.bk-is-red {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+.bk-is-red:is(.bk .bk-sidebar-badge) {
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  color: white;
 }
-
 .bk.bk-sidebar-resize {
   flex: 0 0 8px;
   position: relative;
   z-index: 50;
   cursor: ns-resize;
 }
-
-.bk.bk-sidebar-resize:hover > div {
-  opacity: 1;
+.bk.bk-sidebar-resize:hover  > div {
+  opacity: 100%;
 }
-
 .bk.bk-sidebar-resize:before {
-    content: '';
-    position: absolute;
-    left: 0px;
-    width: 100%;
-    top: 50%;
-    height: 18px;
-    --bk-tw-translate-y: -50%;
-    transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-  }
-
-.bk.bk-sidebar-resize > div {
-  opacity: 0;
+  content: '';
+  position: absolute;
+  left: 0px;
+  width: 100%;
+  top: calc(1 / 2 * 100%);
+  height: 18px;
+  --bk-tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+}
+.bk.bk-sidebar-resize  > div {
+  opacity: 0%;
   position: absolute;
-  left: 50%;
+  left: calc(1 / 2 * 100%);
   width: 100px;
-  --bk-tw-translate-x: -50%;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-accent-950) / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-backdrop-blur: blur(24px);
-  -webkit-backdrop-filter: var(--bk-tw-backdrop-blur) var(--bk-tw-backdrop-brightness) var(--bk-tw-backdrop-contrast) var(--bk-tw-backdrop-grayscale) var(--bk-tw-backdrop-hue-rotate) var(--bk-tw-backdrop-invert) var(--bk-tw-backdrop-opacity) var(--bk-tw-backdrop-saturate) var(--bk-tw-backdrop-sepia);
-  backdrop-filter: var(--bk-tw-backdrop-blur) var(--bk-tw-backdrop-brightness) var(--bk-tw-backdrop-contrast) var(--bk-tw-backdrop-grayscale) var(--bk-tw-backdrop-hue-rotate) var(--bk-tw-backdrop-invert) var(--bk-tw-backdrop-opacity) var(--bk-tw-backdrop-saturate) var(--bk-tw-backdrop-sepia);
-  top: 50%;
-  --bk-tw-translate-y: -50%;
-  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+  --bk-tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  background-color: rgb(var(--bk-theme-accent-950) / 1);
+  --bk-tw-backdrop-blur: blur(var(--blur-xl, 24px));
+  -webkit-backdrop-filter: var(--bk-tw-backdrop-blur,) var(--bk-tw-backdrop-brightness,) var(--bk-tw-backdrop-contrast,) var(--bk-tw-backdrop-grayscale,) var(--bk-tw-backdrop-hue-rotate,) var(--bk-tw-backdrop-invert,) var(--bk-tw-backdrop-opacity,) var(--bk-tw-backdrop-saturate,) var(--bk-tw-backdrop-sepia,);
+  backdrop-filter: var(--bk-tw-backdrop-blur,) var(--bk-tw-backdrop-brightness,) var(--bk-tw-backdrop-contrast,) var(--bk-tw-backdrop-grayscale,) var(--bk-tw-backdrop-hue-rotate,) var(--bk-tw-backdrop-invert,) var(--bk-tw-backdrop-opacity,) var(--bk-tw-backdrop-saturate,) var(--bk-tw-backdrop-sepia,);
+  top: calc(1 / 2 * 100%);
+  --bk-tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
   display: grid;
   gap: 2px;
-  border-radius: 9999px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 5px;
-  padding-bottom: 5px;
+  border-radius: calc(infinity * 1px);
+  padding-inline: 8px;
+  padding-block: 5px;
 }
-
-.bk.bk-sidebar-resize > div hr {
+:is(.bk.bk-sidebar-resize > div) hr {
   height: 1px;
+  border-top-style: var(--bk-tw-border-style);
   border-top-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+  border-top-color: rgb(var(--bk-theme-mono-300) / 1);
+  background-color: rgb(var(--bk-theme-mono-700) / 1);
 }
 </style>