npm - @blokkli/editor - Versions diffs - 2.0.0-alpha.58 → 2.0.0-alpha.59 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1018) hide show

package/dist/runtime/editor/components/Actions/index.vue CHANGED Viewed

@@ -4,162 +4,36 @@
     :style="{
   visibility: isVisible ? 'visible' : 'hidden'
 }"
-    class="bk bk-blokkli-item-actions-inner"
+    class="bk bk-blokkli-item-actions-inner _bk_absolute _bk_left-0 _bk_p-0 _bk_z-actions _bk_w-full _bk_text-mono-50 _bk_select-none _bk_text-sm _bk_pointer-events-auto"
     @mouseleave="onMouseLeave"
     @mouseenter="onMouseEnter"
   >
     <div
       id="bk-blokkli-item-actions-controls"
       ref="controlsEl"
-      class="bk-blokkli-item-actions-controls"
+      class="bk-blokkli-item-actions-controls _bk_flex _bk_items-stretch _bk_whitespace-nowrap _bk_h-full _bk_flex-wrap _bk_lg:flex-nowrap _bk_bg-mono-950/90 _bk_scheme-dark _bk_relative _bk_z-50 _bk_lg:border _bk_lg:border-mono-400 _bk_lg:bg-mono-900"
       :class="{
-  'bk-is-locked': ui.isTransforming.value
+  '_bk_pointer-events-none': ui.isTransforming.value
 }"
     >
       <Interactions />
-      <div id="bk-blokkli-item-actions-title">
-        <button
-          class="bk-blokkli-item-actions-type-button bk-item-icon-hover-parent _bk_group/tooltip"
-          tabindex="-1"
-          :disabled="!shouldRenderButton"
-          :class="{
-  '_bk_is-open': showDropdown,
-  '_bk_is-interactive': shouldRenderButton
-}"
-          @click.prevent="showDropdown = !showDropdown"
-        >
-          <Tooltip
-            v-if="shouldRenderButton"
-            :label="$t('actionsDropdownToolip', 'Further actions')"
-            placement="above-left"
-            class="_bk_w-full"
-          >
-            <template #status>
-              <TooltipStatus
-                v-if="restrictedPermissionsLabel"
-                :description="restrictedPermissionsLabel"
-                status="warning"
-              />
-              <TooltipStatus
-                v-if="selectedTranslationIsOutdated"
-                :description="
-  $t(
-    'translationOutdatedHint',
-    'The translation is marked as outdated.'
-  )
-"
-                status="warning"
-              />
-            </template>
-          </Tooltip>
-          <div
-            v-show="!hasSelectedHost"
-            class="bk-blokkli-item-actions-title-icon"
-          >
-            <Icon v-if="ui.isTransforming.value" name="loader" />
-            <ItemIconBox
-              v-else-if="bundleIcon"
-              :icon="iconOverride"
-              :bundle="bundleIcon"
-              :color="isReusable ? 'lime' : void 0"
-              is-small
-            />
-            <Icon v-else name="bk_mdi_select_all" />
-            <div
-              v-if="itemBundle?.id === fromLibraryBlockBundle"
-              class="bk-blokkli-item-actions-title-icon-reusable"
-            >
-              <Icon name="reusable" />
-            </div>
-          </div>
-          <span class="bk-blokkli-item-actions-title-label">{{ title }}</span>
-          <span
-            v-if="selection.items.value.length > 1"
-            class="bk-blokkli-item-actions-title-count"
-            >{{ selection.items.value.length }}</span
-          >
-          <span
-            v-show="isPermissionRestricted"
-            class="bk-blokkli-item-actions-title-pill bk-is-warning bk-is-restricted"
-          >
-            <Icon name="bk_mdi_lock" />
-          </span>
-          <span
-            v-show="selectedIsNew"
-            class="bk-blokkli-item-actions-title-pill"
-            >{{ $t("selectedIsNew", "New") }}</span
-          >
-          <span
-            v-show="selectedTranslationIsOutdated"
-            class="bk-blokkli-item-actions-title-pill bk-is-warning"
-            >{{ $t("selectedTranslationIsOutdated", "Outdated") }}</span
-          >
-          <Icon
-            v-if="shouldRenderButton"
-            name="bk_mdi_arrow_drop_down"
-            class="bk-caret"
-          />
-        </button>
-        <div
-          v-if="editingEnabled"
-          v-show="showDropdown"
-          id="bk-blokkli-item-actions-dropdown"
-          class="bk-blokkli-item-actions-type-dropdown"
-        >
-          <EditActionsItemDropdown
-            v-if="showDropdown"
-            @close="showDropdown = false"
-          />
-        </div>
-      </div>
+      <Title />
       <div
         v-show="!selection.hasHostSelected.value && !ui.isTransforming.value"
         id="bk-blokkli-item-actions"
-        class="bk-blokkli-item-actions-buttons"
+        class="_bk_relative _bk_flex _bk_flex-1 _bk_lg:flex-initial _bk_lg:border-l _bk_lg:border-l-mono-500 _bk_justify-end"
       />
     </div>
   </div>
 </template>
 <script setup>
-import {
-  watch,
-  computed,
-  useBlokkli,
-  useTemplateRef,
-  onBeforeUnmount
-} from "#imports";
-import { falsy } from "#blokkli/helpers";
-import {
-  Icon,
-  ItemIconBox,
-  Tooltip,
-  TooltipStatus
-} from "#blokkli/editor/components";
-import EditActionsItemDropdown from "./ItemDropdown/index.vue";
+import { computed, useBlokkli, useTemplateRef, onBeforeUnmount } from "#imports";
 import Interactions from "./Interactions/index.vue";
-import { onBlokkliEvent, useStickyToolbar } from "#blokkli/editor/composables";
-import {
-  fragmentBlockBundle,
-  fromLibraryBlockBundle
-} from "#blokkli-build/config";
-const {
-  selection,
-  $t,
-  types,
-  state,
-  ui,
-  definitions,
-  debug,
-  permissions,
-  context
-} = useBlokkli();
-const editingEnabled = computed(
-  () => state.editMode.value === "editing" || state.editMode.value === "translating"
-);
+import Title from "./Title/index.vue";
+import { useStickyToolbar } from "#blokkli/editor/composables";
+const { selection, ui } = useBlokkli();
 const ACTIONS_HEIGHT = 52;
 const el = useTemplateRef("el");
 useStickyToolbar(el, {
@@ -190,157 +64,12 @@ onBeforeUnmount(() => {
     window.clearTimeout(mouseLeaveTimeout);
   }
 });
-const showDropdown = computed({
-  get() {
-    return ui.itemActionsOpen.value;
-  },
-  set(isOpen) {
-    ui.itemActionsOpen.value = isOpen;
-  }
-});
 const hasAnythingSelected = computed(
   () => selection.hasHostSelected.value || !!selection.items.value.length
 );
 const isVisible = computed(() => {
   return !selection.isDragging.value && !selection.activeFieldLabel.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected.value && !ui.hasTooltipOpen.value && !ui.isApproving.value;
 });
-watch(selection.items, () => {
-  showDropdown.value = false;
-});
-watch(selection.hasHostSelected, () => {
-  showDropdown.value = false;
-});
-const bundleIcon = computed(() => {
-  if (itemBundle.value?.id === fromLibraryBlockBundle) {
-    const reusableBundle = selection.items.value[0]?.library?.reusableBundle;
-    if (reusableBundle) {
-      return reusableBundle;
-    }
-  }
-  return itemBundle.value?.id;
-});
-const iconOverride = computed(() => {
-  if (fragment.value) {
-    return fragment.value.editor?.icon ?? null;
-  }
-  return null;
-});
-const isReusable = computed(() => {
-  return itemBundle.value?.id === fromLibraryBlockBundle;
-});
-const hasSelectedHost = computed(() => {
-  return selection.items.value.length === 0;
-});
-const fragment = computed(() => {
-  if (itemBundle.value?.id !== fragmentBlockBundle) {
-    return null;
-  }
-  const uuid = selection.uuids.value[0];
-  if (!uuid) {
-    return null;
-  }
-  const item = state.getFieldListItem(uuid);
-  if (!item) {
-    return null;
-  }
-  const name = item.props?.name;
-  if (!name) {
-    return null;
-  }
-  return definitions.getFragmentDefinition(name) ?? null;
-});
-const title = computed(() => {
-  if (ui.transformLabel.value) {
-    return ui.transformLabel.value;
-  } else if (debug.isEnabled.value && selection.uuids.value.length === 1) {
-    return selection.uuids.value[0];
-  } else if (itemBundle.value) {
-    if (itemBundle.value.id === fragmentBlockBundle) {
-      const fragments = selection.uuids.value.map((uuid) => {
-        const item = state.getFieldListItem(uuid);
-        if (!item) {
-          return;
-        }
-        const name = item.props?.name;
-        if (!name) {
-          return;
-        }
-        const definition = definitions.getFragmentDefinition(name);
-        return definition?.label;
-      }).filter(falsy);
-      if (fragments.length && fragments.length < 3) {
-        return fragments.join(", ");
-      }
-    } else if (itemBundle.value.id === fromLibraryBlockBundle) {
-      const title2 = selection.items.value[0]?.library?.label;
-      if (title2) {
-        return title2;
-      }
-    }
-    return itemBundle.value.label;
-  } else if (!selection.items.value.length) {
-    return state.entity.value.label;
-  }
-  return $t("multipleItemsLabel", "Items");
-});
-const selectedIsNew = computed(() => {
-  const items = selection.items.value;
-  return !!items.length && items.every((v) => v.isNew);
-});
-const selectedTranslationIsOutdated = computed(() => {
-  const items = selection.items.value;
-  if (!items.length) return false;
-  return items.every(
-    (item) => item.outdatedTranslations.includes(context.value.language)
-  );
-});
-const permissionsForSelected = computed(() => {
-  const bundles = selection.bundles.value;
-  if (!bundles.length) {
-    return [];
-  }
-  const allPermissions = ["add", "delete", "edit"];
-  return allPermissions.filter(
-    (permission) => bundles.every(
-      (bundle) => permissions.checkBlockBundlePermission(bundle, permission)
-    )
-  );
-});
-const isPermissionRestricted = computed(
-  () => selection.items.value.length > 0 && permissionsForSelected.value.length < 3
-);
-const restrictedPermissionsLabel = computed(() => {
-  if (!isPermissionRestricted.value) {
-    return null;
-  }
-  const shared = permissionsForSelected.value;
-  if (shared.length === 0) {
-    return $t(
-      "restrictedPermissionsAll",
-      "Some actions are not available due to missing permissions."
-    );
-  }
-  return $t(
-    "restrictedPermissionsSome",
-    "Some actions are restricted due to missing permissions."
-  );
-});
-const itemBundle = computed(() => {
-  if (selection.bundles.value.length !== 1) {
-    return;
-  }
-  const bundle = selection.bundles.value[0];
-  return types.getBlockBundleDefinition(bundle);
-});
-const shouldRenderButton = computed(() => true);
-onBlokkliEvent("action:selected", () => {
-  showDropdown.value = false;
-});
-watch(ui.isTransforming, function(isTransforming) {
-  if (isTransforming) {
-    showDropdown.value = false;
-  }
-});
 </script>
 <script>
@@ -349,510 +78,26 @@ export default {
 };
 </script>
-<style>
-.bk #bk-blokkli-item-actions-title {
-    height: var(--bk-actions-height);
-    width: 160px;
-  }
-@media (min-width: 1024px) {
-    .bk #bk-blokkli-item-actions-title {
-        width: 240px;
-    }
-}
-  .bk .bk-blokkli-item-actions-title-count {
-    margin-left: 10px;
-    display: inline-flex;
-    height: 1.5em;
-    min-width: 1.5em;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-bg-opacity, 1));
-    padding-left: 3px;
-    padding-right: 3px;
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 700;
-    line-height: 1;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1));
-}
-  @media (min-width: 1024px) {
-    .bk .bk-blokkli-item-actions-title-count {
-        font-size: 14px;
-        line-height: 20px;
-    }
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk.bk-blokkli-item-actions-inner {
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  bottom: var(--bk-root-offset-bottom);
 }
-  .bk .bk-blokkli-item-actions-title-count.bk-is-hidden {
-    opacity: 0;
-}
-  .bk.bk-blokkli-item-actions-inner {
-    pointer-events: auto;
-    position: absolute;
-    left: 0px;
-    z-index: calc(var(--bk-z-index-base) + 130000) /* "actions" */;
-    width: 100%;
-    user-select: none;
-    padding: 0px;
-    font-size: 14px;
-    line-height: 20px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
-    transform: translate3d(0, 0, 0);
-    backface-visibility: hidden;
-    /* contain: layout style paint; */
-    bottom: var(--bk-root-offset-bottom);
-}
-  @media (min-width: 1024px) {
+@media (width >= 64rem) {
   .bk.bk-blokkli-item-actions-inner {
-        top: 0px;
-        width: auto;
-      bottom: initial;
-    }
-    }
-  .bk .bk-blokkli-item-actions-controls {
-    display: flex;
-    height: 100%;
-    flex-wrap: wrap;
-    align-items: stretch;
-    white-space: nowrap;
-}
-  @media (min-width: 1024px) {
-    .bk .bk-blokkli-item-actions-controls {
-        flex-wrap: nowrap;
-    }
-}
-  .bk .bk-blokkli-item-actions-controls {
-    background-color: rgb(var(--bk-theme-mono-950) / 0.9);
-    --bk-tw-backdrop-blur: blur(8px);
-    -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);
-    position: relative;
-    z-index: 50;
-}
-  @media (min-width: 1024px) {
-    .bk .bk-blokkli-item-actions-controls {
-        border-radius: 6px;
-    }
-}
-  .bk .bk-blokkli-item-actions-controls {
-    color-scheme: dark;
+    top: 0px !important;
+    width: auto !important;
+    bottom: initial !important;
   }
-  .bk .bk-blokkli-item-actions-controls.bk-is-locked {
-    pointer-events: none;
-}
-  .bk .bk-blokkli-item-actions-controls.bk-is-locked .bk-blokkli-item-actions-buttons > button,
-      .bk .bk-blokkli-item-actions-controls.bk-is-locked .bk-blokkli-item-options > .bk-blokkli-item-options-item {
-    opacity: 0.2;
-}
-  html.bk-low-performance-mode .bk .bk-blokkli-item-actions-controls {
-    -webkit-backdrop-filter: none;
-    backdrop-filter: none;
-}
-  .bk .bk-blokkli-item-actions-controls::-webkit-scrollbar {
-      display: none;
-    }
-  @media (min-width: 1024px) {
-  .bk .bk-blokkli-item-actions-controls {
-        filter: none;
-        -webkit-backdrop-filter: none;
-        backdrop-filter: none;
-        border-width: 1px;
-        --bk-tw-border-opacity: 1;
-        border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
-        outline-style: solid;
-        outline-width: 1px;
-        outline-color: rgb(var(--bk-theme-mono-700) / 1);
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
-    }
-    }
-  .bk .bk-item-action {
-    position: relative;
-    z-index: 50;
-    display: flex;
-    height: 100%;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
-}
-  @media (min-width: 1024px) {
-    .bk .bk-item-action {
-        position: static;
-    }
 }
-  .bk .bk-item-action {
-    max-width: var(--bk-actions-height);
-    flex: 1 0 auto;
-  }
-  @media (min-width: 1024px) {
-  .bk .bk-item-action {
-      width: var(--bk-actions-height);
-      flex: initial
-  }
-    }
-  .bk .bk-item-action.bk-is-active {
-    z-index: 50;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / 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 (min-width: 1024px) {
-    .bk .bk-item-action:not([disabled]):hover {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
-        --bk-tw-text-opacity: 1;
-        color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
-    }
-}
-  .bk .bk-item-action[disabled] {
-    cursor: not-allowed;
-}
-  .bk .bk-item-action[disabled] .bk-item-action-icon {
-    opacity: 0.25;
-}
-  .bk .bk-blokkli-item-actions-buttons {
-    position: relative;
-    display: flex;
-    flex: 1 1 0%;
-}
-  @media (min-width: 1024px) {
-    .bk .bk-blokkli-item-actions-buttons {
-        flex: 0 1 auto;
-    }
-}
-  .bk .bk-item-action-icon {
-    pointer-events: none;
-}
-  .bk .bk-item-action-icon svg {
-    width: 20px;
-    height: 20px;
-    fill: currentColor;
-}
-  @media (min-width: 1024px) {
-    .bk .bk-item-action-icon svg {
-        width: 24px;
-        height: 24px;
-    }
-    .bk .bk-blokkli-item-actions-buttons:last-child button.bk-is-last {
-        border-start-end-radius: 6px;
-        border-end-end-radius: 6px;
-    }
-}
-  .bk .bk-blokkli-item-actions-title-icon,
-  .bk .bk-blokkli-item-actions-type-dropdown-icon {
-    position: relative;
-    margin-right: 0.25em;
-    width: 1em;
-    height: 1em;
-    font-size: 20px;
-    line-height: 28px;
-}
-  @media (min-width: 1024px) {
-    .bk .bk-blokkli-item-actions-title-icon,
-  .bk .bk-blokkli-item-actions-type-dropdown-icon {
-        font-size: 34px;
-    }
-}
-  .bk .bk-blokkli-item-actions-title-icon > .bk-blokkli-item-icon svg, .bk .bk-blokkli-item-actions-title-icon > .bk-icon svg, .bk .bk-blokkli-item-actions-type-dropdown-icon > .bk-blokkli-item-icon svg, .bk .bk-blokkli-item-actions-type-dropdown-icon > .bk-icon svg {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    height: 0.7em;
-    width: 0.7em;
-    --bk-tw-translate-x: -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));
-    fill: currentColor;
-}
-  .bk .bk-blokkli-item-actions-title-icon .bk-blokkli-item-actions-title-icon-reusable, .bk .bk-blokkli-item-actions-type-dropdown-icon .bk-blokkli-item-actions-title-icon-reusable {
-    position: absolute;
-    z-index: 50;
-    top: -7px;
-    right: -7px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-lime-dark) / var(--bk-tw-bg-opacity, 1));
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    border-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-border-opacity, 1));
-    --bk-tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --bk-tw-shadow-colored: 0 10px 15px -3px var(--bk-tw-shadow-color), 0 4px 6px -4px 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 .bk-blokkli-item-actions-title-icon .bk-blokkli-item-actions-title-icon-reusable svg, .bk .bk-blokkli-item-actions-type-dropdown-icon .bk-blokkli-item-actions-title-icon-reusable svg {
-    width: 12px;
-    height: 12px;
-    fill: rgb(var(--bk-theme-lime-light) / 1);
-}
-  .bk .bk-blokkli-item-actions-type-button,
-  .bk .bk-blokkli-item-actions-type-dropdown-button {
-    padding-left: 9px;
-}
-  @media (min-width: 1024px) {
-    .bk .bk-blokkli-item-actions-type-button,
-  .bk .bk-blokkli-item-actions-type-dropdown-button {
-        padding-right: 5px;
-    }
-}
-  .bk .bk-blokkli-item-actions-type-button {
-    position: relative;
-    display: flex;
-    height: 100%;
-    cursor: default;
-    align-items: center;
-    font-weight: 700;
-    line-height: 1;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
-}
-  @media (min-width: 1024px) {
-    .bk .bk-blokkli-item-actions-type-button {
-        min-width: 180px;
-    }
-}
-  .bk .bk-blokkli-item-actions-type-button {
-    font-size: 12px;
-    line-height: 16px;
-}
-  @media (min-width: 1024px) {
-    .bk .bk-blokkli-item-actions-type-button {
-        font-size: 16px;
-        line-height: 24px;
-    }
-}
-  .bk .bk-blokkli-item-actions-type-button {
-    width: 100%;
-}
-  @media (min-width: 1024px) {
-    .bk .bk-blokkli-item-actions-type-button {
-        border-top-left-radius: 6px;
-        border-bottom-left-radius: 6px;
-    }
-}
-  .bk .bk-blokkli-item-actions-type-button .bk-blokkli-item-actions-title-label {
-    margin-right: auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-  .bk .bk-blokkli-item-actions-type-button .bk-blokkli-item-actions-title-icon {
-      flex: 0 0 auto;
-    }
-  .bk .bk-blokkli-item-actions-type-button._bk_is-interactive {
-    cursor: pointer;
-}
-  @media not all and (hover: none) {
-        .bk .bk-blokkli-item-actions-type-button._bk_is-interactive:not(._bk_is-open):hover {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
-        --bk-tw-text-opacity: 1;
-        color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
-    }
-      }
-  .bk .bk-blokkli-item-actions-type-button._bk_is-open {
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: 0px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
-}
-  @media (min-width: 1024px) {
-    .bk .bk-blokkli-item-actions-type-button._bk_is-open {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
-    }
-}
-  .bk .bk-blokkli-item-actions-type-button._bk_is-open .bk-caret {
-    --bk-tw-rotate: 180deg;
-    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-blokkli-item-actions-type-button .bk-caret {
-    margin-left: 2px;
-}
-  .bk .bk-blokkli-item-actions-type-button .bk-caret svg {
-    pointer-events: none;
-    width: 15px;
-    height: 15px;
-    fill: currentColor;
-}
-  @media (min-width: 768px) {
-    .bk .bk-blokkli-item-actions-type-button .bk-caret svg {
-        width: 20px;
-        height: 20px;
-    }
-}
-  .bk #bk-blokkli-item-actions {
-    justify-content: flex-end;
-}
-  @media (min-width: 1024px) {
-    .bk #bk-blokkli-item-actions {
-        border-left-width: 1px;
-        --bk-tw-border-opacity: 1;
-        border-left-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1));
-    }
-}
-  .bk .bk-blokkli-item-actions-type {
-    position: relative;
-    height: 100%;
-}
-  .bk .bk-blokkli-item-actions-type-dropdown {
-    position: absolute;
-    bottom: 100%;
-    left: 0px;
-    display: flex;
-    width: 100vw;
-    min-width: 300px;
-    flex-direction: column;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-text-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);
-}
-  @media (min-width: 1024px) {
-    .bk .bk-blokkli-item-actions-type-dropdown {
-        width: auto;
-        border-top-right-radius: 4px;
-    }
-}
-  .bk .bk-blokkli-item-actions-type-dropdown > div {
-    border-bottom-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-bottom-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-border-opacity, 1));
-}
-  @media (min-width: 1024px) {
-  .bk .bk-blokkli-item-actions-type-dropdown {
-        top: 100%;
-        bottom: auto;
-        left: 23px;
-        border-top-left-radius: 0px;
-        border-top-right-radius: 0px;
-        border-bottom-right-radius: 4px;
-        border-bottom-left-radius: 4px;
-        --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-bottom-width: 2px;
-        border-left-width: 2px;
-        border-right-width: 2px;
-        --bk-tw-border-opacity: 1;
-        border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
-    }
-    }
-  .bk .bk-blokkli-item-actions-type-dropdown li {
-    position: relative;
-}
-  .bk .bk-blokkli-item-actions-type-dropdown h3 {
-    padding: 10px;
-    padding-top: 15px;
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-blokkli-item-actions-type-dropdown .bk-blokkli-item-actions-type-dropdown-button .bk-blokkli-item-icon,
-      .bk .bk-blokkli-item-actions-type-dropdown .bk-blokkli-item-actions-type-dropdown-button .bk-icon {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 25px;
-    height: 25px;
-}
-  .bk .bk-blokkli-item-actions-type-dropdown .bk-blokkli-item-actions-type-dropdown-button .bk-blokkli-item-icon svg, .bk .bk-blokkli-item-actions-type-dropdown .bk-blokkli-item-actions-type-dropdown-button .bk-icon svg {
-    fill: currentColor;
-}
-  .bk .bk-blokkli-item-actions-type-dropdown-button {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    font-weight: 600;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
-}
-  @media (min-width: 1024px) {
-    .bk .bk-blokkli-item-actions-type-dropdown-button {
-        font-size: 16px;
-        line-height: 24px;
-    }
-}
-  .bk .bk-blokkli-item-actions-type-dropdown-button {
-    text-align: left;
-    line-height: 1;
-    height: var(--bk-actions-height);
-  }
-  .bk .bk-blokkli-item-actions-type-dropdown-button[disabled] {
-    pointer-events: none;
-    opacity: 0.2;
-}
-  @media (min-width: 1024px) {
-      .bk .bk-blokkli-item-actions-type-dropdown-button:hover {
-        --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));
-    }
-        .bk .bk-blokkli-item-actions-type-dropdown-button:hover .bk-icon,
-        .bk .bk-blokkli-item-actions-type-dropdown-button:hover .bk-blokkli-item-icon {
-        --bk-tw-border-opacity: 1;
-        border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-    }
-        .bk .bk-blokkli-item-actions-type-dropdown-button:hover .bk-description {
-        --bk-tw-text-opacity: 1;
-        color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
-    }
-    }
-  .bk .bk-blokkli-item-actions-comment {
-    /* @apply relative; */
-  }
-  .bk .bk-blokkli-item-actions-title-pill {
-    font-size: 10px;
-    margin-left: 5px;
-    text-transform: uppercase;
-    display: flex;
-    height: 20px;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    padding-left: 5px;
-    padding-right: 5px;
-    background-color: rgb(var(--bk-theme-accent-900) / 0.8);
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-accent-100) / var(--bk-tw-text-opacity, 1));
-    border-width: 1px;
-    border-color: rgb(var(--bk-theme-accent-200) / 0.7);
-    font-weight: 700;
-    line-height: 1;
-  }
-  .bk .bk-blokkli-item-actions-title-pill.bk-is-restricted {
-    width: 20px;
-    height: 20px;
-    padding: 0px;
+.bk-is-locked:is(.bk .bk-blokkli-item-actions-controls) {
+  pointer-events: none;
 }
-  .bk .bk-blokkli-item-actions-title-pill.bk-is-restricted svg {
-    width: 1.25em;
-    height: 1.25em;
-    fill: currentColor;
+.bk-is-locked:is(.bk .bk-blokkli-item-actions-controls) .bk-blokkli-item-actions-buttons > button,.bk-is-locked:is(.bk .bk-blokkli-item-actions-controls) .bk-blokkli-item-options > .bk-blokkli-item-options-item {
+  opacity: 20%;
 }
-  .bk .bk-blokkli-item-actions-title-pill.bk-is-warning {
-    border-color: rgb(var(--bk-theme-yellow-normal) / 0.8);
-    background-color: rgb(var(--bk-theme-yellow-normal) / 0.2);
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-text-opacity, 1));
+:is(.bk .bk-blokkli-item-actions-controls)::-webkit-scrollbar {
+  display: none;
 }
 </style>