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

package/dist/runtime/editor/components/Form/Toggle/index.vue

@@ -1,230 +1,80 @@
 <template>
-  <label class="bk-checkbox-toggle">
+  <label
+    class="bk-checkbox-toggle _bk_group/tooltip _bk_relative _bk_flex _bk_cursor-pointer _bk_h-full _bk_leading-none _bk_group/toggle"
+    :class="{
+  '_bk_h-full _bk_items-center': stretch,
+  '_bk_cursor-not-allowed!': disabled
+}"
+  >
     <slot />
-    <input v-model="value" type="checkbox" class="_bk_peer" :disabled />
-    <div class="bk-checkbox-toggle-toggle" />
-    <div v-if="label || description" class="bk-checkbox-toggle-label">
-      <div v-if="label" class="bk-checkbox-toggle-label-label">{{ label }}</div>
-      <div v-if="description" class="bk-checkbox-toggle-label-description">
+    <input v-model="value" type="checkbox" class="_bk_sr-only" :disabled />
+    <div
+      class="bk-checkbox-toggle-toggle _bk_group-focus-within/toggle:outline _bk_outline-accent-950/80 _bk_outline-offset-2 _bk_relative _bk_w-[36px] _bk_h-20 _bk_rounded-full _bk_shrink-0 _bk_mr-5 _bk_last:mr-0"
+      :class="{
+  '_bk_mt-2': !stretch,
+  '_bk_bg-mono-200!': disabled,
+  '_bk_bg-mono-500 _bk_group-hover/toggle:bg-mono-400': isDark,
+  '_bk_bg-mono-400 _bk_group-hover/toggle:bg-mono-500': !isDark,
+  '_bk_bg-accent-600! _bk_group-hover/toggle:bg-accent-500!': value && isDark,
+  '_bk_bg-accent-600! _bk_group-hover/toggle:bg-accent-700!': value && !isDark
+}"
+    >
+      <div
+        class="_bk_absolute _bk_top-2 _bk_left-2 _bk_bg-white _bk_rounded-full _bk_size-[16px]"
+        :class="{
+  '_bk_translate-x-full': value
+}"
+      />
+    </div>
+    <div
+      v-if="label || description"
+      class="bk-checkbox-toggle-label _bk_inline-block _bk_text-base"
+    >
+      <div
+        v-if="label"
+        class="bk-checkbox-toggle-label-label _bk_font-semibold"
+        :class="{
+  '_bk_text-mono-200 _bk_group-hover/toggle:text-white': isDark,
+  '_bk_text-mono-700 _bk_group-hover/toggle:text-mono-950': !isDark
+}"
+      >
+        {{ label }}
+      </div>
+      <div
+        v-if="description"
+        class="_bk_text-sm _bk_text-pretty"
+        :class="{
+  '_bk_text-mono-400': isDark,
+  '_bk_text-mono-500': !isDark,
+  '_bk_text-mono-300!': disabled
+}"
+      >
         {{ description }}
       </div>
-      <div v-if="disabledReason" class="bk-form-disabled-reason">
+      <div v-if="disabledReason" class="bk-form-disabled-reason _bk_mt-8">
         {{ disabledReason }}
       </div>
     </div>
+    <Tooltip
+      v-if="tooltip"
+      :label="tooltip"
+      class="_bk_max-w-full _bk_whitespace-normal"
+    />
   </label>
 </template>
 
 <script setup>
-defineProps({
-  label: { type: String, required: false },
-  description: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  disabledReason: { type: [String, null], required: false }
+import { computed } from "#imports";
+import Tooltip from "#blokkli/editor/components/Tooltip/index.vue";
+const props = defineProps({
+  label: { type: String, required: false, default: void 0 },
+  description: { type: String, required: false, default: void 0 },
+  tooltip: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  disabledReason: { type: [String, null], required: false, default: null },
+  colorScheme: { type: String, required: false, default: "light" },
+  stretch: { type: Boolean, required: false, default: false }
 });
+const isDark = computed(() => props.colorScheme === "dark");
 const value = defineModel({ type: Boolean });
 </script>
-
-<style>
-.bk .bk-checkbox-toggle {
-
-    position: relative;
-
-    display: flex;
-
-    height: 100%;
-
-    cursor: pointer;
-
-    line-height: 1;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-text-opacity, 1))
-}
-
-    .bk .bk-checkbox-toggle:has(input[disabled]) {
-
-    cursor: not-allowed !important;
-
-    --bk-tw-text-opacity: 1 !important;
-
-    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1)) !important
-}
-
-    .bk .bk-checkbox-toggle:has(input[disabled]) .bk-checkbox-toggle-toggle {
-
-    --bk-tw-bg-opacity: 1 !important;
-
-    background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1)) !important
-}
-
-    .bk .bk-checkbox-toggle:has(input[disabled]) .bk-checkbox-toggle-label-description {
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1))
-}
-
-    .bk .bk-checkbox-toggle .bk-form-disabled-reason {
-
-    margin-top: 8px
-}
-
-    .bk .bk-checkbox-toggle:focus-within input + .bk-checkbox-toggle-toggle {
-
-    outline-style: solid;
-
-    outline-offset: 2px;
-
-    outline-color: rgb(var(--bk-theme-accent-950) / 0.8)
-}
-
-    .bk .bk-checkbox-toggle .bk-checkbox-toggle-label .bk-checkbox-toggle-label-label {
-
-    font-weight: 600
-}
-
-    .bk .bk-checkbox-toggle .bk-checkbox-toggle-label .bk-checkbox-toggle-label-description {
-
-    max-width: 500px;
-
-    text-wrap: pretty;
-
-    font-size: 14px;
-
-    line-height: 20px;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1))
-}
-
-    .bk .bk-checkbox-toggle .bk-checkbox-toggle-label {
-
-    display: inline-block;
-
-    padding-right: 10px;
-
-    font-size: 16px;
-
-    line-height: 24px
-}
-
-    @media not all and (hover: none) {
-.bk .bk-checkbox-toggle:hover {
-
-        --bk-tw-text-opacity: 1;
-
-        color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-text-opacity, 1))
-    }
-    }
-
-    .bk .bk-checkbox-toggle input {
-
-    position: absolute;
-
-    width: 1px;
-
-    height: 1px;
-
-    padding: 0;
-
-    margin: -1px;
-
-    overflow: hidden;
-
-    clip: rect(0, 0, 0, 0);
-
-    white-space: nowrap;
-
-    border-width: 0
-}
-
-    .bk .bk-checkbox-toggle input:checked + .bk-checkbox-toggle-toggle {
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-bg-opacity, 1))
-}
-
-    .bk .bk-checkbox-toggle input:checked + .bk-checkbox-toggle-toggle::after {
-
-    --bk-tw-translate-x: 100%;
-
-    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));
-
-    content: var(--bk-tw-content);
-
-    --bk-tw-border-opacity: 1;
-
-    border-color: rgb(255 255 255 / var(--bk-tw-border-opacity, 1))
-}
-
-    @media not all and (hover: none) {
-      .bk .bk-checkbox-toggle input:not(:checked):hover + .bk-checkbox-toggle-toggle {
-
-        --bk-tw-bg-opacity: 1;
-
-        background-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-bg-opacity, 1))
-    }
-      .bk .bk-checkbox-toggle input:checked:hover + .bk-checkbox-toggle-toggle {
-
-        --bk-tw-bg-opacity: 1;
-
-        background-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-bg-opacity, 1))
-    }
-    }
-
-    .bk .bk-checkbox-toggle .bk-checkbox-toggle-toggle {
-
-    position: relative;
-
-    height: 20px;
-
-    width: 36px;
-
-    flex-shrink: 0;
-
-    border-radius: 9999px;
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-bg-opacity, 1))
-}
-
-    .bk .bk-checkbox-toggle .bk-checkbox-toggle-toggle::after {
-
-    position: absolute;
-
-    top: 2px;
-
-    left: 2px;
-
-    height: 16px;
-
-    width: 16px;
-
-    border-radius: 9999px;
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-
-    --bk-tw-content: '';
-
-    content: var(--bk-tw-content)
-}
-
-    .bk .bk-checkbox-toggle .bk-checkbox-toggle-toggle {
-
-    margin-right: 5px;
-
-    margin-top: 0px
-}
-
-    .bk .bk-checkbox-toggle .bk-checkbox-toggle-toggle:last-child {
-
-    margin-right: 0px
-}
-</style>

package/dist/runtime/editor/components/Form/Toggle/index.vue.d.ts

@@ -1,8 +1,11 @@
 type __VLS_Props = {
     label?: string;
     description?: string;
+    tooltip?: string;
     disabled?: boolean;
     disabledReason?: string | null;
+    colorScheme?: 'light' | 'dark';
+    stretch?: boolean;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean;
@@ -16,7 +19,15 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "update:modelValue": (value: boolean | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    label: string;
+    description: string;
+    disabled: boolean;
+    disabledReason: string | null;
+    tooltip: string;
+    colorScheme: "light" | "dark";
+    stretch: boolean;
+}, {}, {}, {}, 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;

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

@@ -1,6 +1,7 @@
 <template>
   <div
     class="bk-form-overlay bk-vars"
+    :data-test="'form-overlay-' + id"
     @click.stop
     @mousedown.stop
     @keyup.stop
@@ -54,65 +55,56 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-form-overlay-footer {
   position: sticky;
   bottom: 0px;
   z-index: 50;
   display: flex;
   gap: 20px;
+  border-top-style: var(--bk-tw-border-style);
   border-top-width: 1px;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  background-color: white;
   padding: 20px;
 }
-  .bk.bk-form-overlay-footer .bk-button {
+.bk.bk-form-overlay-footer .bk-button {
   width: 100%;
 }
-
 .bk-vars .bk-form-overlay-content {
   position: relative;
-  flex: 1 1 0%;
+  flex: 1;
   overflow: auto;
   overscroll-behavior: contain;
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  border-top-left-radius: var(--radius-xl, 12px);
+  border-top-right-radius: var(--radius-xl, 12px);
+  background-color: white;
 }
-
-@media (min-width: 768px) {
+@media (width >= 48rem) {
   .bk-vars .bk-form-overlay-content {
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
 }
-
 .bk-vars .bk-form-overlay-content {
   container-type: inline-size;
 }
-
 .bk-vars.bk-form-overlay {
   pointer-events: none;
   position: absolute;
-  left: 0px;
   top: 0px;
-  z-index: calc(var(--bk-z-index-base) + 350000) /* "form-overlay" */;
+  left: 0px;
+  z-index: calc(var(--bk-z-index-base) + 390000) /* "form-overlay" */;
   height: 100%;
   width: 100%;
 }
-
 .bk-vars.bk-form-overlay .bk-form-overlay-resizable {
   pointer-events: auto;
   margin-left: auto;
   height: 100%;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-bg-opacity, 1));
-  --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);
+  background-color: rgb(var(--bk-theme-mono-950) / 1);
+  --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-vars.bk-form-overlay .bk-resizable-inner {
   display: flex;
   height: 100%;

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

@@ -3,9 +3,15 @@
     v-if="markup"
     class="bk-icon"
     :class="'bk-icon-' + name"
+    :data-test="'icon-' + name"
     v-html="markup"
   />
-  <div v-else class="bk-icon" :class="'bk-icon-missing'">
+  <div
+    v-else
+    class="bk-icon"
+    :class="'bk-icon-missing'"
+    :data-test="'icon-' + name"
+  >
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
       <path
         d="M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z"
@@ -34,8 +40,8 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk-icon svg {
-    fill: currentColor
+  fill: currentcolor;
 }
 </style>

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

@@ -132,163 +132,90 @@ watch(selection.uuids, function() {
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-indicators {
-
-    pointer-events: none;
-
-    position: absolute;
-
-    top: 0px;
-
-    left: 0px;
-
-    z-index: calc(var(--bk-z-index-base) + 50000) /* "interaction-overlay" */;
-
-    transform-origin: top left
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: calc(var(--bk-z-index-base) + 50000) /* "interaction-overlay" */;
+  transform-origin: 0 0;
 }
-
-    .bk.bk-indicators #bk-indicators-left {
-
-    position: absolute;
-
-    right: 100%;
-
-    top: 0px;
-
-    height: 100%;
-
-    white-space: nowrap
+.bk.bk-indicators #bk-indicators-left {
+  position: absolute;
+  top: 0px;
+  right: 100%;
+  height: 100%;
+  white-space: nowrap;
 }
-
-    .bk.bk-indicators #bk-indicators-left .bk-indicator-item {
-
-    right: 0px;
-
-    padding-right: 10px
+:is(.bk.bk-indicators #bk-indicators-left) .bk-indicator-item {
+  right: 0px;
+  padding-right: 10px;
 }
-
-    .bk.bk-indicators .bk-indicator-item {
-
-    pointer-events: auto;
-
-    position: absolute;
-
-    top: 0px;
-
-    display: flex;
-
-    height: 30px;
-
-    cursor: pointer;
-
-    align-items: center;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1))
+.bk.bk-indicators .bk-indicator-item {
+  pointer-events: auto;
+  position: absolute;
+  top: 0px;
+  display: flex;
+  height: 30px;
+  cursor: pointer;
+  align-items: center;
+  color: rgb(var(--bk-theme-mono-500) / 1);
 }
-
-    .bk.bk-indicators .bk-indicator-item .bk-icon {
-
-    width: 20px;
-
-    height: 20px;
-
-    border-radius: 9999px;
-
-    --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))
+:is(.bk.bk-indicators .bk-indicator-item) .bk-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: calc(infinity * 1px);
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  padding: 2px;
+  color: white;
 }
-
-    .bk.bk-indicators .bk-indicator-item .bk-icon svg {
-
-    fill: white
+:is(:is(.bk.bk-indicators .bk-indicator-item) .bk-icon) svg {
+  fill: white;
 }
-
-    .bk.bk-indicators .bk-indicator-item:hover {
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-text-opacity, 1))
+:is(.bk.bk-indicators .bk-indicator-item):hover {
+  color: rgb(var(--bk-theme-mono-950) / 1);
 }
-
-    .bk.bk-indicators .bk-indicator-item:hover .bk-icon {
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-red-dark) / var(--bk-tw-bg-opacity, 1))
+:is(.bk.bk-indicators .bk-indicator-item):hover .bk-icon {
+  background-color: rgb(var(--bk-theme-red-dark) / 1);
 }
-
-    .bk.bk-indicators .bk-indicator-item-inner {
-
-    display: flex;
-
-    align-items: center;
-
-    gap: 5px;
-
-    font-size: 12px;
-
-    line-height: 16px;
-
-    font-weight: 500
+.bk.bk-indicators .bk-indicator-item-inner {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
 }
-
-    .bk.bk-indicators .bk-indicators-hovered {
-
-    position: absolute;
-
-    top: 0px;
-
-    left: 0px;
-
-    border-radius: 4px;
-
-    border-width: 3px;
-
-    --bk-tw-border-opacity: 1;
-
-    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
-
-    background-color: rgb(var(--bk-theme-red-normal) / 0.3)
+.bk.bk-indicators .bk-indicators-hovered {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 3px;
+  border-color: rgb(var(--bk-theme-red-normal) / 1);
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
 }
-
-    .bk.bk-indicators .bk-indicators-highlighted {
-
-    position: absolute;
-
-    top: 0px;
-
-    left: 0px;
-
-    border-radius: 4px;
-
-    border-width: 3px;
-
-    --bk-tw-border-opacity: 1;
-
-    border-color: rgb(var(--bk-theme-accent-500) / var(--bk-tw-border-opacity, 1));
-
-    outline-style: solid;
-
-    outline-color: white;
-
-    --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);
-
-    --bk-tw-ring-shadow: var(--bk-tw-ring-inset) 0 0 0 calc(4px + var(--bk-tw-ring-offset-width)) var(--bk-tw-ring-color);
-
-    box-shadow: var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow, 0 0 #0000);
-
-    --bk-tw-ring-opacity: 1;
-
-    --bk-tw-ring-color: rgb(var(--bk-theme-accent-300) / var(--bk-tw-ring-opacity, 1))
+@supports (color: color-mix(in lab, red, red)) {
+  .bk.bk-indicators .bk-indicators-hovered {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-red-normal) / 1) 30%, transparent);
+  }
+}
+.bk.bk-indicators .bk-indicators-highlighted {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 3px;
+  border-color: rgb(var(--bk-theme-accent-500) / 1);
+  --bk-tw-ring-shadow: var(--bk-tw-ring-inset,) 0 0 0 calc(4px + var(--bk-tw-ring-offset-width)) var(--bk-tw-ring-color, currentcolor);
+  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-ring-color: rgb(var(--bk-theme-accent-300) / 1);
+  outline-style: var(--bk-tw-outline-style);
+  outline-width: 1px;
+  outline-color: white;
 }
 </style>