@zipify/wysiwyg 1.0.0-dev.88 → 1.0.0-dev.90

package/dist/wysiwyg.css

@@ -369,11 +369,11 @@
     overscroll-behavior: contain;
 }
 
-.zw-field[data-v-7bbd0125] {
+.zw-field[data-v-20ee36c3] {
     display: flex;
     flex-direction: column;
 }
-.zw-field__input[data-v-7bbd0125] {
+.zw-field__input[data-v-20ee36c3] {
     --border-color: rgb(var(--zw-color-n60));
     --text-color: rgb(var(--zw-color-n85));
 
@@ -384,49 +384,53 @@
     outline: none;
     padding: 6px;
     line-height: var(--zw-line-height-xxs);
+    transition: 0.1s border ease-out, 0.1s color ease-out;
+    will-change: border, color;
 }
-.zw-field__input[data-v-7bbd0125]:hover {
+.zw-field__input[data-v-20ee36c3]:hover {
     --border-color: rgb(var(--zw-color-n80));
     --text-color: rgb(var(--zw-color-n85));
 }
-.zw-field__input[data-v-7bbd0125]:focus,
-.zw-field__input[data-v-7bbd0125]:focus-within {
+.zw-field__input[data-v-20ee36c3]:focus,
+.zw-field__input[data-v-20ee36c3]:focus-within {
     --border-color: rgb(var(--zw-color-white));
     --text-color: rgb(var(--zw-color-white));
 }
-.zw-field__label[data-v-7bbd0125] {
+.zw-field__label[data-v-20ee36c3] {
     display: inline-block;
     font-size: var(--zw-font-size-xxs);
     padding-bottom: var(--zw-offset-xxs);
     line-height: var(--zw-line-height-xxs);
 }
-.zw-field__label--error[data-v-7bbd0125] {
+.zw-field__label--error[data-v-20ee36c3] {
     font-size: var(--zw-font-size-xxs);
     margin: var(--zw-offset-xxs) 0 0;
     color: rgb(var(--zw-color-red));
 }
 
-.zw-checkbox[data-v-15e487f5] {
+.zw-checkbox[data-v-c9d1da12] {
     display: inline-flex;
     align-items: center;
     position: relative;
     cursor: pointer;
     padding: var(--zw-offset-xxs) var(--zw-offset-xxs) var(--zw-offset-xxs) 0;
 }
-.zw-checkbox__field + .zw-checkbox__indicator[data-v-15e487f5] {
+.zw-checkbox__field + .zw-checkbox__indicator[data-v-c9d1da12] {
     color: var(--zw-color-n200);
     box-shadow: inset 0 0 0 2px currentColor;
 }
-.zw-checkbox:hover .zw-checkbox__indicator[data-v-15e487f5] {
+.zw-checkbox:hover .zw-checkbox__indicator[data-v-c9d1da12],
+.zw-checkbox:focus .zw-checkbox__indicator[data-v-c9d1da12],
+.zw-checkbox:focus-within .zw-checkbox__indicator[data-v-c9d1da12] {
     box-shadow: inset 0 0 0 2px rgb(var(--zw-color-green));
 }
-.zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-15e487f5] {
+.zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-c9d1da12] {
     color: rgb(var(--zw-color-green))
 }
-.zw-checkbox .zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-15e487f5] {
+.zw-checkbox .zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-c9d1da12] {
     background-color: rgb(var(--zw-color-green));
 }
-.zw-checkbox .zw-checkbox__indicator[data-v-15e487f5]::after {
+.zw-checkbox .zw-checkbox__indicator[data-v-c9d1da12]::after {
     content: "";
     display: block;
     height: 16px;
@@ -438,16 +442,16 @@
     background-size: 16px;
     background-position: center center;
 }
-.zw-checkbox__field:not(:checked) + .zw-checkbox__indicator[data-v-15e487f5]::after {
+.zw-checkbox__field:not(:checked) + .zw-checkbox__indicator[data-v-c9d1da12]::after {
     transform: scale(0);
 }
-.zw-checkbox__field[data-v-15e487f5] {
+.zw-checkbox__field[data-v-c9d1da12] {
     position: absolute;
     opacity: 0;
     height: 0;
     width: 0;
 }
-.zw-checkbox__label[data-v-15e487f5] {
+.zw-checkbox__label[data-v-c9d1da12] {
     font-size: var(--zw-font-size-xs);
 }
 
@@ -587,32 +591,34 @@
     display: flex;
 }
 
-.zw-link-modal-header[data-v-7dbfe03f] {
+.zw-link-modal-header[data-v-0a202ba4] {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: var(--zw-offset-sm);
     border-bottom: 2px solid rgb(var(--zw-color-n5));
 }
-.zw-link-modal-header__title[data-v-7dbfe03f] {
+.zw-link-modal-header__title[data-v-0a202ba4] {
     text-transform: uppercase;
     font-weight: var(--zw-font-weight-semibold);
     font-size: var(--zw-font-size-xxs);
     color: rgb(var(--zw-color-white));
 }
-.zw-link-modal-header__unlink-icon[data-v-7dbfe03f] {
+.zw-link-modal-header__unlink-icon[data-v-0a202ba4] {
     margin-right: var(--zw-offset-xxs);
 }
-.zw-link-modal-header__unlink-button[data-v-7dbfe03f] {
+.zw-link-modal-header__unlink-button[data-v-0a202ba4] {
     color: rgb(var(--zw-color-n80));
     font-size: var(--zw-font-size-xxs);
-    transition: 0.1s opacity ease-out;
-    will-change: opacity;
+    transition: 0.1s opacity ease-out, 0.1s color ease-out;
+    will-change: opacity, color;
 }
-.zw-link-modal-header__unlink-button[data-v-7dbfe03f]:disabled {
+.zw-link-modal-header__unlink-button[data-v-0a202ba4]:disabled {
     opacity: 0.35;
 }
-.zw-link-modal-header__unlink-button[data-v-7dbfe03f]:hover {
+.zw-link-modal-header__unlink-button[data-v-0a202ba4]:focus,
+.zw-link-modal-header__unlink-button[data-v-0a202ba4]:focus-within,
+.zw-link-modal-header__unlink-button[data-v-0a202ba4]:hover {
     color: rgb(var(--zw-color-white));
 }
 

package/dist/wysiwyg.mjs

@@ -18985,6 +18985,10 @@ function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef } = {}
           options: {
             padding: 16
           }
+        },
+        {
+          name: "flip",
+          enabled: false
         }
       ]
     });
@@ -19899,7 +19903,7 @@ var __component__$y = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$y,
   false,
   __vue2_injectStyles$y,
-  "7bbd0125",
+  "20ee36c3",
   null,
   null
 );
@@ -19961,7 +19965,7 @@ var __component__$x = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$x,
   false,
   __vue2_injectStyles$x,
-  "15e487f5",
+  "c9d1da12",
   null,
   null
 );
@@ -22041,7 +22045,7 @@ var __component__$9 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$9,
   false,
   __vue2_injectStyles$9,
-  "7dbfe03f",
+  "0a202ba4",
   null,
   null
 );
@@ -22830,6 +22834,7 @@ function useToolbar({ wrapperRef, offsets, isActiveRef, placementRef }) {
   function mount(element) {
     popper2 = createPopper(wrapperEl.value, element, {
       placement: placementRef.value,
+      strategy: "fixed",
       modifiers: [
         {
           name: "offset",

package/lib/components/base/Checkbox.vue

@@ -45,7 +45,9 @@ export default {
     box-shadow: inset 0 0 0 2px currentColor;
 }
 
-.zw-checkbox:hover .zw-checkbox__indicator {
+.zw-checkbox:hover .zw-checkbox__indicator,
+.zw-checkbox:focus .zw-checkbox__indicator,
+.zw-checkbox:focus-within .zw-checkbox__indicator {
     box-shadow: inset 0 0 0 2px rgb(var(--zw-color-green));
 }
 

package/lib/components/base/TextField.vue

@@ -78,6 +78,8 @@ export default {
     outline: none;
     padding: 6px;
     line-height: var(--zw-line-height-xxs);
+    transition: 0.1s border ease-out, 0.1s color ease-out;
+    will-change: border, color;
 }
 
 .zw-field__input:hover {

package/lib/components/base/composables/useModalToggler.js

@@ -22,12 +22,15 @@ export function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef
                         offset: [0, 4]
                     }
                 },
-
                 {
                     name: 'preventOverflow',
                     options: {
                         padding: 16
                     }
+                },
+                {
+                    name: 'flip',
+                    enabled: false
                 }
             ]
         });

package/lib/components/toolbar/controls/link/LinkControlHeader.vue

@@ -53,14 +53,16 @@ export default {
 .zw-link-modal-header__unlink-button {
     color: rgb(var(--zw-color-n80));
     font-size: var(--zw-font-size-xxs);
-    transition: 0.1s opacity ease-out;
-    will-change: opacity;
+    transition: 0.1s opacity ease-out, 0.1s color ease-out;
+    will-change: opacity, color;
 }
 
 .zw-link-modal-header__unlink-button:disabled {
     opacity: 0.35;
 }
 
+.zw-link-modal-header__unlink-button:focus,
+.zw-link-modal-header__unlink-button:focus-within,
 .zw-link-modal-header__unlink-button:hover {
     color: rgb(var(--zw-color-white));
 }

package/lib/composables/useToolbar.js

@@ -8,6 +8,7 @@ export function useToolbar({ wrapperRef, offsets, isActiveRef, placementRef }) {
     function mount(element) {
         popper = createPopper(wrapperEl.value, element, {
             placement: placementRef.value,
+            strategy: 'fixed',
             modifiers: [
                 {
                     name: 'offset',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.88",
+  "version": "1.0.0-dev.90",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {