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

package/dist/runtime/editor/components/RichText/Renderer/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="bk-rich-content _bk_break-words _bk_select-text"
+    :class="{ 'bk-tasks-togglable': taskTogglable }"
+    @click="onClick"
+    v-html="enriched"
+  />
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { enrichRichContent } from "./enrichRichContent";
+const props = defineProps({
+  body: { type: String, required: true },
+  taskTogglable: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["toggleTask"]);
+const enriched = computed(() => enrichRichContent(props.body));
+function onClick(e) {
+  if (!props.taskTogglable) return;
+  if (!(e.target instanceof Element)) return;
+  const label = e.target.closest('li[data-type="taskItem"] > label');
+  if (!label) return;
+  const li = label.parentElement;
+  if (!li) return;
+  const root = e.currentTarget;
+  const items = root.querySelectorAll('li[data-type="taskItem"]');
+  const index = Array.from(items).indexOf(li);
+  if (index < 0) return;
+  e.preventDefault();
+  emit("toggleTask", index);
+}
+</script>
+
+<script>
+export default {
+  name: "RichTextRenderer"
+};
+</script>

package/dist/runtime/editor/components/RichText/Renderer/index.vue.d.ts

@@ -0,0 +1,23 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    body: string;
+    /**
+     * When true, checkboxes inside task lists are interactive and emit
+     * `toggleTask` with the index of the clicked task item.
+     */
+    taskTogglable?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    toggleTask: (taskIndex: number) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    body: string;
+    /**
+     * When true, checkboxes inside task lists are interactive and emit
+     * `toggleTask` with the index of the clicked task item.
+     */
+    taskTogglable?: boolean;
+}> & Readonly<{
+    onToggleTask?: ((taskIndex: number) => any) | undefined;
+}>, {
+    taskTogglable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/ScaleToFit/index.vue

@@ -69,31 +69,28 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk-vars.bk-scale-to-fit {
-    position: relative;
+  position: relative;
 }
-
 .bk-vars .bk-scale-to-fit-wrapper {
-    position: relative;
+  position: relative;
 }
-
 .bk-vars .bk-scale-to-fit-wrapper-item {
-    pointer-events: none;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    user-select: none;
-    transform-origin: 0 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  -webkit-user-select: none;
+  user-select: none;
+  transform-origin: 0 0;
+}
+:is(.bk-vars .bk-scale-to-fit-wrapper-item)  > * {
+  margin: 0 !important;
+  pointer-events: none;
+}
+.bk :is(.bk-vars .bk-scale-to-fit-wrapper-item) ._bk_container,.bk:is(.bk-vars .bk-scale-to-fit-wrapper-item) ._bk_container {
+  margin: 0 !important;
+  padding: 0 !important;
 }
-
-.bk-vars .bk-scale-to-fit-wrapper-item > * {
-      margin: 0 !important;
-      pointer-events: none;
-    }
-
-.bk .bk-vars .bk-scale-to-fit-wrapper-item ._bk_container,.bk.bk-vars .bk-scale-to-fit-wrapper-item ._bk_container {
-      margin: 0 !important;
-      padding: 0 !important;
-    }
 </style>

package/dist/runtime/editor/components/ScheduleDate/index.d.vue.ts

@@ -6,9 +6,9 @@ type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_16: {};
+declare var __VLS_21: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_16) => any;
+    default?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;

package/dist/runtime/editor/components/ScheduleDate/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="bk-schedule-date">
-    <div class="bk-schedule-date-picker">
+  <div class="_bk_flex-1 _bk_flex _bk_gap-20" data-test="schedule-date">
+    <div class="_bk_w-[300px] _bk_shrink-0">
       <FormDatepicker
         v-model="selectedDate"
         :min="minDate"
@@ -8,16 +8,20 @@
         :error="!!error"
       />
     </div>
-    <div v-if="selectedDate" class="bk-schedule-date-time">
-      <div v-if="formattedDateTime" class="bk-schedule-date-formatted">
+    <div v-if="selectedDate" class="_bk_flex-1">
+      <div
+        v-if="formattedDateTime"
+        class="_bk_mb-20 _bk_px-10 _bk_font-bold _bk_text-lg _bk_bg-mono-100 _bk_h-[52px] _bk_flex _bk_items-center"
+      >
         {{ formattedDateTime }}
       </div>
-      <div class="bk-schedule-date-time-input">
+      <div class="_bk_flex _bk_gap-10 _bk_items-stretch">
         <input
           id="schedule-time"
           v-model="selectedTime"
           type="time"
-          class="bk-form-input"
+          data-test="schedule-time"
+          class="bk-form-input _bk_flex-1 _bk_w-full _bk_tabular-nums"
           :disabled="disabled"
           :class="{
   'bk-is-invalid': error
@@ -25,7 +29,7 @@
         />
         <button
           type="button"
-          class="bk-button bk-schedule-date-time-button bk-is-icon-only"
+          class="bk-button bk-scheme-mono bk-is-icon-only _bk_shrink-0 _bk_px-10 _bk_[&_.bk-icon]:size-15 _bk_[&_.bk-icon_svg]:size-full _bk_[&_.bk-icon_svg]:fill-current"
           :disabled="disabled"
           @click="decrementHour"
         >
@@ -33,7 +37,7 @@
         </button>
         <button
           type="button"
-          class="bk-button bk-schedule-date-time-button bk-is-icon-only"
+          class="bk-button bk-scheme-mono bk-is-icon-only _bk_shrink-0 _bk_px-10 _bk_[&_.bk-icon]:size-15 _bk_[&_.bk-icon_svg]:size-full _bk_[&_.bk-icon_svg]:fill-current"
           :disabled="disabled"
           @click="incrementHour"
         >
@@ -41,17 +45,22 @@
         </button>
       </div>
 
+      <InfoBox
+        v-if="error"
+        :text="error"
+        class="_bk_mt-20"
+        color="red"
+        small
+        data-test="schedule-error"
+      />
       <slot />
-      <div v-if="error" class="bk-schedule-date-error">
-        {{ error }}
-      </div>
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref, computed, watch, useBlokkli } from "#imports";
-import { FormDatepicker, Icon } from "#blokkli/editor/components";
+import { FormDatepicker, Icon, InfoBox } from "#blokkli/editor/components";
 const { ui } = useBlokkli();
 defineProps({
   disabled: { type: Boolean, required: false },

package/dist/runtime/editor/components/ScheduleDate/index.vue.d.ts

@@ -6,9 +6,9 @@ type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_16: {};
+declare var __VLS_21: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_16) => any;
+    default?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;

package/dist/runtime/editor/components/SearchOverlay/index.d.vue.ts

@@ -12,12 +12,12 @@ type __VLS_ModelProps = {
     'text'?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_23: {
+declare var __VLS_25: {
     focusedIndex: any;
     onMouseEnter: typeof onItemMouseEnter;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_23) => any;
+    default?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:text": (value: string) => any;
@@ -30,8 +30,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:text"?: ((value: string) => any) | undefined;
 }>, {
     placeholder: string;
-    itemHeight: number;
     visibleItems: number;
+    itemHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/components/SearchOverlay/index.vue

@@ -1,6 +1,6 @@
 <template>
   <ScrollBoundary
-    class="bk-command-palette bk-control"
+    class="bk-command-palette bk-control _bk_rounded _bk_overflow-hidden"
     :style="{ '--bk-command-palette-item-height': itemHeight + 'px' }"
     @keydown="onKeyDown"
     @keyup.stop
@@ -19,23 +19,15 @@
         <Icon name="bk_mdi_close" class="_bk_size-15" />
       </button>
     </div>
-    <div class="bk-command-palette-input _bk_text-mono-100 _bk_relative">
-      <Icon name="bk_mdi_search" />
-      <input
-        ref="inputEl"
-        v-model="text"
-        type="text"
-        :placeholder="placeholder"
-      />
-    </div>
+    <FormTextDark ref="inputEl" v-model="text" :placeholder />
     <div
-      class="_bk_relative _bk_border-t _bk_border-t-mono-600"
+      class="_bk_relative"
       :class="{
   '_bk_opacity-50': isSearching
 }"
     >
       <div
-        class="bk-command-palette-results _bk_overflow-auto bk-scrollbar-dark _bk_relative"
+        class="_bk_overflow-auto bk-scrollbar-dark _bk_relative _bk_max-h-[calc(100vh-300px)]"
         :style="{
   height: itemHeight * visibleItems + 'px'
 }"
@@ -68,7 +60,12 @@ import {
   useBlokkli,
   nextTick
 } from "#imports";
-import { Icon, ScrollBoundary, Loading } from "#blokkli/editor/components";
+import {
+  Icon,
+  ScrollBoundary,
+  Loading,
+  FormTextDark
+} from "#blokkli/editor/components";
 import { modulo } from "#blokkli/editor/helpers/math";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 const { $t } = useBlokkli();
@@ -158,107 +155,29 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk .bk-command-palette {
-
-    pointer-events: auto;
-
-    position: fixed;
-
-    left: 50%;
-
-    z-index: calc(var(--bk-z-index-base) + 400000) /* "command-palette" */;
-
-    width: 600px;
-
-    --bk-tw-translate-x: -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));
-
-    border-radius: 4px;
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
-
-    top: 120px;
-
-    --bk-tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-
-    --bk-tw-shadow-colored: 0 25px 50px -12px 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);
-
-    --bk-tw-shadow-color: rgb(var(--bk-theme-mono-950) / 0.7);
-
-    --bk-tw-shadow: var(--bk-tw-shadow-colored);
-
-    border-width: 1px;
-
-    --bk-tw-border-opacity: 1;
-
-    border-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1))
-}
-
-.bk .bk-command-palette-input .bk-icon {
-
-    position: absolute;
-
-    top: 50%;
-
-    left: 15px;
-
-    height: 20px;
-
-    width: 20px;
-
-    --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))
+  pointer-events: auto;
+  position: fixed;
+  left: calc(1 / 2 * 100%);
+  z-index: calc(var(--bk-z-index-base) + 420000) /* "command-palette" */;
+  width: 600px;
+  --bk-tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+  background-color: rgb(var(--bk-theme-mono-900) / 1);
+  top: 120px;
+  --bk-tw-shadow: 0 25px 50px -12px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.25));
+  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-tw-shadow-color: rgb(var(--bk-theme-mono-950) / 1);
 }
-
-.bk .bk-command-palette-input .bk-icon svg {
-
-    fill: currentColor
-}
-
-.bk .bk-command-palette-input input {
-
-    height: 60px;
-
-    width: 100%;
-
-    appearance: none;
-
-    background-color: transparent;
-
-    outline: 2px solid transparent !important;
-
-    outline-offset: 2px !important;
-
-    --bk-tw-ring-offset-shadow: var(--bk-tw-ring-inset) 0 0 0 var(--bk-tw-ring-offset-width) var(--bk-tw-ring-offset-color) !important;
-
-    --bk-tw-ring-shadow: var(--bk-tw-ring-inset) 0 0 0 calc(0px + var(--bk-tw-ring-offset-width)) var(--bk-tw-ring-color) !important;
-
-    box-shadow: var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow, 0 0 #0000) !important;
-
-    padding-left: 45px;
-
-    border-style: none !important;
-
-    font-size: 18px;
-
-    line-height: 28px;
-
-    font-weight: 700
+@supports (color: color-mix(in lab, red, red)) {
+  .bk .bk-command-palette {
+    --bk-tw-shadow-color: color-mix(in oklab, color-mix(in oklab, rgb(var(--bk-theme-mono-950) / 1) 70%, transparent) var(--bk-tw-shadow-alpha), transparent);
+  }
 }
-
-.bk .bk-command-palette-input input::placeholder {
-
-    font-weight: 400;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1))
+.bk .bk-command-palette {
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-600) / 1);
 }
 </style>

package/dist/runtime/editor/components/SearchOverlay/index.vue.d.ts

@@ -12,12 +12,12 @@ type __VLS_ModelProps = {
     'text'?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_23: {
+declare var __VLS_25: {
     focusedIndex: any;
     onMouseEnter: typeof onItemMouseEnter;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_23) => any;
+    default?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:text": (value: string) => any;
@@ -30,8 +30,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:text"?: ((value: string) => any) | undefined;
 }>, {
     placeholder: string;
-    itemHeight: number;
     visibleItems: number;
+    itemHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/components/SidebarFloater/index.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    mono?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/SidebarFloater/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="_bk_sticky _bk_bottom-0 _bk_z-50 _bk_p-10 _bk_bg-linear-0 bk-sidebar-floater _bk_mt-30 _bk_group-floater"
+    :class="{
+  '_bk_bg-mono-100 _bk_before:from-mono-100 _bk_before:to-mono-100/0': mono,
+  '_bk_bg-white _bk_before:from-white _bk_before:to-white/0': !mono
+}"
+  >
+    <div
+      class="_bk_border _bk_border-mono-300 _bk_shadow-md-even _bk_overflow-hidden _bk_rounded _bk_focus-within:border-mono-500 _bk_relative _bk_z-50 _bk_bg-white"
+      :class="{
+  '_bk_group-floater/focus-within:border-mono-500': !mono
+}"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  mono: { type: Boolean, required: false }
+});
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-sidebar-floater:before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 0px;
+  z-index: 40;
+  height: 20px;
+  width: 100%;
+  --bk-tw-gradient-position: 0deg;
+}
+@supports (background-image: linear-gradient(in lab, red, red)) {
+  .bk-sidebar-floater:before {
+    --bk-tw-gradient-position: 0deg in oklab;
+  }
+}
+.bk-sidebar-floater:before {
+  background-image: linear-gradient(var(--bk-tw-gradient-stops));
+}
+</style>

package/dist/runtime/editor/components/SidebarFloater/index.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    mono?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/StatusIcon/index.vue

@@ -30,106 +30,57 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk .bk-status-icon {
-
-    display: flex;
-
-    width: 20px;
-
-    height: 20px;
-
-    flex-shrink: 0;
-
-    align-items: center;
-
-    justify-content: center;
-
-    border-radius: 9999px;
-
-    line-height: 1
+  display: flex;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(infinity * 1px);
+  --bk-tw-leading: 1;
+  line-height: 1;
 }
-
-  .bk .bk-status-icon svg {
-
-    height: 100%;
-
-    width: 100%;
-
-    fill: currentColor
+:is(.bk .bk-status-icon) svg {
+  height: 100%;
+  width: 100%;
+  fill: currentcolor;
 }
-
-  .bk .bk-status-icon.bk-is-pending {
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1))
+.bk-is-pending:is(.bk .bk-status-icon) {
+  background-color: rgb(var(--bk-theme-mono-200) / 1);
 }
-
-  .bk .bk-status-icon.bk-is-pending .bk-status-icon-bullet {
-
-    text-align: center;
-
-    font-size: 12px;
-
-    line-height: 16px;
-
-    font-weight: 700;
-
-    line-height: 1 !important;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1))
+.bk-is-pending:is(.bk .bk-status-icon) .bk-status-icon-bullet {
+  text-align: center;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-leading: 1 !important;
+  line-height: 1 !important;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  color: rgb(var(--bk-theme-mono-500) / 1);
 }
-
-  .bk .bk-status-icon.bk-is-active {
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-bg-opacity, 1));
-
-    padding: 3px
+.bk-is-active:is(.bk .bk-status-icon) {
+  background-color: rgb(var(--bk-theme-yellow-normal) / 1);
+  padding: 3px;
 }
-
-  .bk .bk-status-icon.bk-is-active svg {
-
-    fill: white
+.bk-is-active:is(.bk .bk-status-icon) svg {
+  fill: white;
 }
-
-  .bk .bk-status-icon.bk-is-success {
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
-
-    padding: 2px;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
+.bk-is-success:is(.bk .bk-status-icon) {
+  background-color: rgb(var(--bk-theme-lime-normal) / 1);
+  padding: 2px;
+  color: white;
 }
-
-  .bk .bk-status-icon.bk-is-success svg {
-
-    fill: currentColor
+.bk-is-success:is(.bk .bk-status-icon) svg {
+  fill: currentcolor;
 }
-
-  .bk .bk-status-icon.bk-is-error {
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
-
-    padding: 2px;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
+.bk-is-error:is(.bk .bk-status-icon) {
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  padding: 2px;
+  color: white;
 }
-
-  .bk .bk-status-icon.bk-is-error svg {
-
-    fill: currentColor
+.bk-is-error:is(.bk .bk-status-icon) svg {
+  fill: currentcolor;
 }
 </style>