@harbour-enterprises/superdoc 0.12.30 → 0.12.31-next.1

package/dist/style.css

@@ -144,13 +144,13 @@
   width: 16px;
 }
 
-.toolbar-item[data-v-62bb3747] {
+.toolbar-item[data-v-6eb57404] {
   position: relative;
   z-index: 1;
   min-width: 30px;
   margin: 0 1px;
 }
-.toolbar-button[data-v-62bb3747] {
+.toolbar-button[data-v-6eb57404] {
   padding: 5px;
   height: 32px;
   max-height: 32px;
@@ -166,14 +166,21 @@
   position: relative;
   box-sizing: border-box;
 }
-.toolbar-button[data-v-62bb3747]:hover {
+.toolbar-button[data-v-6eb57404]:hover {
   background-color: #dbdbdb;
 }
-.toolbar-button[data-v-62bb3747]:active,
-.active[data-v-62bb3747] {
+.toolbar-button:hover .toolbar-icon.high-contrast[data-v-6eb57404] {
+      color: #fff;
+}
+.toolbar-button:hover.high-contrast[data-v-6eb57404] {
+    background-color: #000;
+    color: #fff;
+}
+.toolbar-button[data-v-6eb57404]:active,
+.active[data-v-6eb57404] {
   background-color: #c8d0d8;
 }
-.button-label[data-v-62bb3747] {
+.button-label[data-v-6eb57404] {
   overflow: hidden;
   width: 100%;
   text-align: center;
@@ -183,37 +190,37 @@
   font-size: 15px;
   margin: 5px;
 }
-.toolbar-icon + .dropdown-caret[data-v-62bb3747] {
+.toolbar-icon+.dropdown-caret[data-v-6eb57404] {
   margin-left: 4px;
 }
-.left[data-v-62bb3747],
-.right[data-v-62bb3747] {
+.left[data-v-6eb57404],
+.right[data-v-6eb57404] {
   width: 50%;
   height: 100%;
   background-color: #dbdbdb;
   border-radius: 60%;
 }
-.has-inline-text-input[data-v-62bb3747]:hover {
+.has-inline-text-input[data-v-6eb57404]:hover {
   cursor: text;
 }
-.disabled[data-v-62bb3747] {
+.disabled[data-v-6eb57404] {
   cursor: default;
 }
-.disabled[data-v-62bb3747]:hover {
+.disabled[data-v-6eb57404]:hover {
   cursor: default;
   background-color: initial;
 }
-.disabled .toolbar-icon[data-v-62bb3747],
-.disabled .caret[data-v-62bb3747],
-.disabled .button-label[data-v-62bb3747] {
+.disabled .toolbar-icon[data-v-6eb57404],
+.disabled .caret[data-v-6eb57404],
+.disabled .button-label[data-v-6eb57404] {
   opacity: 0.35;
 }
-.caret[data-v-62bb3747] {
+.caret[data-v-6eb57404] {
   font-size: 1em;
   padding-left: 2px;
   padding-right: 2px;
 }
-.button-text-input[data-v-62bb3747] {
+.button-text-input[data-v-6eb57404] {
   color: #47484a;
   border-radius: 4px;
   text-align: center;
@@ -227,10 +234,13 @@
   border: 1px solid #d8dee5;
   box-sizing: border-box;
 }
-.button-text-input[data-v-62bb3747]::placeholder {
+.button-text-input.high-contrast[data-v-6eb57404] {
+    background-color: #fff;
+}
+.button-text-input[data-v-6eb57404]::placeholder {
   color: #47484a;
 }
-.dropdown-caret[data-v-62bb3747] {
+.dropdown-caret[data-v-6eb57404] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -240,21 +250,21 @@
   height: 10px;
 }
 @media (max-width: 1280px) {
-.toolbar-item--doc-mode .button-label[data-v-62bb3747] {
+.toolbar-item--doc-mode .button-label[data-v-6eb57404] {
     display: none;
 }
-.toolbar-item--doc-mode .toolbar-icon[data-v-62bb3747] {
+.toolbar-item--doc-mode .toolbar-icon[data-v-6eb57404] {
     margin-right: 5px;
 }
-.toolbar-item--linked-styles[data-v-62bb3747] {
+.toolbar-item--linked-styles[data-v-6eb57404] {
     width: auto !important;
 }
-.toolbar-item--linked-styles .button-label[data-v-62bb3747] {
+.toolbar-item--linked-styles .button-label[data-v-6eb57404] {
     display: none;
 }
 }
 
-.toolbar-separator[data-v-ac2ee4f9] {
+.toolbar-separator[data-v-b240fc3a] {
   height: 32px;
   border-radius: 6px;
   text-overflow: ellipsis;
@@ -266,24 +276,23 @@
   user-select: none;
   overflow: hidden;
 }
-.toolbar-separator .separator-inner[data-v-ac2ee4f9] {
+.toolbar-separator .separator-inner[data-v-b240fc3a] {
   width: 1.5px;
   height: 20px;
-  background-color: #dbdbdb;
 }
-.toolbar-button[data-v-ac2ee4f9]:hover {
+.toolbar-button[data-v-b240fc3a]:hover {
   color: black;
   background-color: #d8dee5;
 }
-.toolbar-button[data-v-ac2ee4f9]:active,
-.active[data-v-ac2ee4f9] {
+.toolbar-button[data-v-b240fc3a]:active,
+.active[data-v-b240fc3a] {
   background-color: #c8d0d8;
 }
 
-.overflow-menu[data-v-ca29bf1d] {
+.overflow-menu[data-v-c637209b] {
   position: relative;
 }
-.overflow-menu_items[data-v-ca29bf1d] {
+.overflow-menu_items[data-v-c637209b] {
     position: absolute;
     width: 200px;
     top: calc(100% + 3px);
@@ -295,13 +304,13 @@
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
     box-sizing: border-box;
 }
-.superdoc-toolbar-overflow[data-v-ca29bf1d] {
+.superdoc-toolbar-overflow[data-v-c637209b] {
   min-width: auto !important;
   max-width: 200px;
   flex-wrap: wrap;
 }
 @media (max-width: 300px) {
-.overflow-menu_items[data-v-ca29bf1d] {
+.overflow-menu_items[data-v-c637209b] {
     right: auto;
     left: 0;
     transform: translateX(-50%);
@@ -313,9 +322,16 @@
   min-width: 80px;
   cursor: pointer;
 }
+.sd-editor-toolbar-dropdown.high-contrast .n-dropdown-option-body:hover::before,
+        .sd-editor-toolbar-dropdown.high-contrast .n-dropdown-option-body:hover::after {
+          background-color: #000 !important;
+}
+.sd-editor-toolbar-dropdown.high-contrast .n-dropdown-option-body__label:hover {
+          color: #fff !important;
+}
 .sd-editor-toolbar-dropdown .n-dropdown-option-body:hover::before,
-    .sd-editor-toolbar-dropdown .n-dropdown-option-body:hover::after {
-      background-color: #d8dee5 !important;
+      .sd-editor-toolbar-dropdown .n-dropdown-option-body:hover::after {
+        background-color: #d8dee5 !important;
 }
 .sd-editor-toolbar-tooltip,
 .sd-editor-toolbar-tooltip.n-popover {
@@ -324,11 +340,11 @@
   border-radius: 8px !important;
 }
 
-.button-group[data-v-7751c4e5] {
+.button-group[data-v-b09e5a20] {
   display: flex;
 }
 
-.superdoc-toolbar[data-v-abd0fb95] {
+.superdoc-toolbar[data-v-2a400574] {
   display: flex;
   width: 100%;
   justify-content: space-between;
@@ -336,12 +352,12 @@
   box-sizing: border-box;
 }
 @media (max-width: 1280px) {
-.superdoc-toolbar-group-side[data-v-abd0fb95] {
+.superdoc-toolbar-group-side[data-v-2a400574] {
     min-width: auto !important;
 }
 }
 @media (max-width: 768px) {
-.superdoc-toolbar[data-v-abd0fb95] {
+.superdoc-toolbar[data-v-2a400574] {
     padding: 4px 10px;
     justify-content: inherit;
 }
@@ -966,42 +982,93 @@ on the right if it is inside shape textbox.
   background-color: #1354FF55;
 }
 
-.alignment-buttons[data-v-932a4937] {
+.alignment-buttons[data-v-58d8a9bb] {
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding: 8px;
   box-sizing: border-box;
 }
-.button-icon[data-v-932a4937] {
-  cursor: pointer;
-  padding: 5px;
-  font-size: 16px;
-  width: 25px;
-  height: 25px;
-  border-radius: 4px;
+.alignment-buttons .button-icon[data-v-58d8a9bb] {
+    cursor: pointer;
+    padding: 5px;
+    font-size: 16px;
+    width: 25px;
+    height: 25px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+}
+.alignment-buttons .button-icon[data-v-58d8a9bb]:hover {
+      background-color: #d8dee5;
+}
+.alignment-buttons .button-icon[data-v-58d8a9bb] svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+      fill: currentColor;
+}
+.alignment-buttons.high-contrast .button-icon[data-v-58d8a9bb]:hover {
+        background-color: #000;
+        color: #fff;
+}
+
+.link-input-ctn[data-v-64aa14bc] {
+  width: 320px;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  flex-direction: column;
+  padding: 1em;
+  border-radius: 5px;
+  background-color: #fff;
   box-sizing: border-box;
 }
-.button-icon[data-v-932a4937]:hover {
-  background-color: #d8dee5;
+.link-input-ctn[data-v-64aa14bc] svg {
+    width: 100%;
+      height: 100%;
+      display: block;
+      fill: currentColor;
+}
+.link-input-ctn .input-row[data-v-64aa14bc] {
+      align-content: baseline;
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+}
+.link-input-ctn .input-row input[data-v-64aa14bc] {
+        font-size: 13px;
+        flex-grow: 1;
+        padding: 10px;
+        border-radius: 8px;
+        padding-left: 32px;
+        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
+        color: #666;
+        border: 1px solid #ddd;
+        box-sizing: border-box;
+}
+.link-input-ctn .input-row input[data-v-64aa14bc]:active,
+        .link-input-ctn .input-row input[data-v-64aa14bc]:focus {
+          outline: none;
+          border: 1px solid #1355ff;
+}
+.link-input-ctn .input-icon[data-v-64aa14bc] {
+  position: absolute;
+  transform: rotate(45deg);
+  left: 25px;
+  width: auto;
+  height: 12px;
+  color: #999;
+  pointer-events: none;
 }
-.button-icon[data-v-932a4937] svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-  fill: currentColor;
+.link-input-ctn.high-contrast .input-icon[data-v-64aa14bc] {
+    color: #000;
 }
-
-.link-input-ctn[data-v-04bac853] svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-  fill: currentColor;
+.link-input-ctn.high-contrast .input-row input[data-v-64aa14bc] {
+    color: #000;
+    border-color: #000;
 }
-.open-link-icon[data-v-04bac853] {
+.open-link-icon[data-v-64aa14bc] {
   margin-left: 10px;
   width: 30px;
   height: 30px;
@@ -1014,74 +1081,56 @@ on the right if it is inside shape textbox.
   transition: all 0.2s ease;
   cursor: pointer;
 }
-.open-link-icon[data-v-04bac853]:hover {
+.open-link-icon[data-v-64aa14bc]:hover {
   color: #1355ff;
   background-color: white;
   border: 1px solid #dbdbdb;
 }
-.open-link-icon[data-v-04bac853] svg {
+.open-link-icon[data-v-64aa14bc] svg {
   width: 15px;
   height: 15px;
 }
-.disabled[data-v-04bac853] {
+.disabled[data-v-64aa14bc] {
   opacity: 0.6;
   cursor: not-allowed;
   pointer-events: none;
 }
-.link-buttons[data-v-04bac853] {
+.link-buttons[data-v-64aa14bc] {
   display: flex;
   justify-content: flex-end;
   margin-top: 10px;
 }
-.remove-btn__icon[data-v-04bac853] {
+.remove-btn__icon[data-v-64aa14bc] {
   display: inline-flex;
   width: 13px;
   height: 13px;
   flex-shrink: 0;
   margin-right: 4px;
 }
-.link-buttons button[data-v-04bac853] {
+.link-buttons button[data-v-64aa14bc] {
   margin-left: 5px;
 }
-.disable-btn[data-v-04bac853] {
+.disable-btn[data-v-64aa14bc] {
   opacity: 0.6;
   cursor: not-allowed;
   pointer-events: none;
 }
-.go-to-anchor a[data-v-04bac853] {
+.go-to-anchor a[data-v-64aa14bc] {
   font-size: 14px;
   text-decoration: underline;
 }
-.clickable[data-v-04bac853] {
+.clickable[data-v-64aa14bc] {
   cursor: pointer;
 }
-.link-title[data-v-04bac853] {
+.link-title[data-v-64aa14bc] {
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 10px;
 }
-.input-icon[data-v-04bac853] {
-  position: absolute;
-  transform: rotate(45deg);
-  left: 25px;
-  width: auto;
-  height: 12px;
-  color: #999;
-  pointer-events: none;
-}
-.hasBottomMargin[data-v-04bac853] {
+.hasBottomMargin[data-v-64aa14bc] {
   margin-bottom: 1em;
 }
-.link-input-ctn[data-v-04bac853] {
-  width: 320px;
-  display: flex;
-  flex-direction: column;
-  padding: 1em;
-  border-radius: 5px;
-  background-color: #fff;
-  box-sizing: border-box;
-}
-.remove-btn[data-v-04bac853] {
+.remove-btn[data-v-64aa14bc] {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -1097,10 +1146,10 @@ on the right if it is inside shape textbox.
   border: 1px solid #ebebeb;
   box-sizing: border-box;
 }
-.remove-btn[data-v-04bac853]:hover {
+.remove-btn[data-v-64aa14bc]:hover {
   background-color: #dbdbdb;
 }
-.submit-btn[data-v-04bac853] {
+.submit-btn[data-v-64aa14bc] {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -1116,59 +1165,34 @@ on the right if it is inside shape textbox.
   transition: all 0.2s ease;
   box-sizing: border-box;
 }
-.submit-btn[data-v-04bac853]:hover {
-  background-color: #0d47c1;
-}
-.input-row[data-v-04bac853] {
-  align-content: baseline;
-  display: flex;
-  align-items: center;
-}
-.input-row input[data-v-04bac853] {
-  font-size: 13px;
-  flex-grow: 1;
-  padding: 10px;
-  border-radius: 8px;
-  padding-left: 32px;
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
-  color: #666;
-  border: 1px solid #ddd;
-  box-sizing: border-box;
-}
-.input-row input[data-v-04bac853]:active,
-.input-row input[data-v-04bac853]:focus {
-  outline: none;
-  border: 1px solid #1355ff;
-}
-.input-row[data-v-04bac853] {
-  font-size: 16px;
+
+/* &.high-contrast {
+    background-color: black;
+  } */
+.submit-btn[data-v-64aa14bc]:hover {
+    background-color: #0d47c1;
 }
-.error[data-v-04bac853] {
+.error[data-v-64aa14bc] {
   border-color: red !important;
   background-color: #ff00001a;
 }
-.submit[data-v-04bac853] {
+.submit[data-v-64aa14bc] {
   cursor: pointer;
 }
 
-.document-mode[data-v-8afd7fbb] svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-  fill: currentColor;
-}
-.disabled[data-v-8afd7fbb] {
-  opacity: 0.5;
-  cursor: not-allowed !important;
-  pointer-events: none;
-}
-.document-mode[data-v-8afd7fbb] {
+.document-mode[data-v-050d9d49]  {
   display: flex;
   flex-direction: column;
   padding: 10px;
   box-sizing: border-box;
 }
-.option-item[data-v-8afd7fbb] {
+.document-mode[data-v-050d9d49] svg {
+    width: 100%;
+  height: 100%;
+  display: block;
+  fill: currentColor;
+}
+.document-mode .option-item[data-v-050d9d49] {
   display: flex;
   flex-direction: row;
   background-color: white;
@@ -1177,16 +1201,35 @@ on the right if it is inside shape textbox.
   cursor: pointer;
   box-sizing: border-box;
 }
-.document-mode-column[data-v-8afd7fbb] {
+.document-mode .option-item[data-v-050d9d49]:hover {
+    background-color: #c8d0d8;
+}
+.document-mode.high-contrast .option-item[data-v-050d9d49]:hover {
+      background-color: #000;
+      color: #fff;
+}
+.document-mode.high-contrast .option-item:hover .icon-column__icon[data-v-050d9d49] {
+        color: #fff;
+}
+.document-mode.high-contrast .option-item:hover .text-column >.document-mode-type[data-v-050d9d49],
+        .document-mode.high-contrast .option-item:hover .text-column >.document-mode-description[data-v-050d9d49] {
+          color: #fff;
+}
+.disabled[data-v-050d9d49] {
+  opacity: 0.5;
+  cursor: not-allowed !important;
+  pointer-events: none;
+}
+.document-mode-column[data-v-050d9d49] {
   display: flex;
   flex-direction: column;
 }
-.document-mode-type[data-v-8afd7fbb] {
+.document-mode-type[data-v-050d9d49] {
   font-weight: 400;
   font-size: 15px;
   color: #222;
 }
-.icon-column[data-v-8afd7fbb] {
+.icon-column[data-v-050d9d49] {
   margin-right: 5px;
   justify-content: flex-start;
   align-items: center;
@@ -1195,25 +1238,23 @@ on the right if it is inside shape textbox.
   height: 100%;
   box-sizing: border-box;
 }
-.icon-column__icon[data-v-8afd7fbb] {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  height: 18px;
-  color: #47484a;
+.icon-column__icon[data-v-050d9d49] {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    height: 18px;
+    color: #47484a;
 }
-.icon-column__icon[data-v-8afd7fbb] svg {
-  width: auto; /* needed for safari */
+.icon-column__icon[data-v-050d9d49] svg {
+  width: auto;
+  /* needed for safari */
   max-height: 18px;
 }
-.document-mode-description[data-v-8afd7fbb] {
+.document-mode-description[data-v-050d9d49] {
   font-size: 12px;
   color: #666;
 }
-.option-item[data-v-8afd7fbb]:hover {
-  background-color: #c8d0d8;
-}
 
 .style-name[data-v-bf5a8c1e] {
   padding: 16px 10px;
@@ -1254,11 +1295,11 @@ on the right if it is inside shape textbox.
   fill: currentColor;
 }
 
-.option-row[data-v-6a2a9a40] {
+.option-row[data-v-d96a82fa] {
   display: flex;
   flex-direction: row;
 }
-.option[data-v-6a2a9a40] {
+.option[data-v-d96a82fa] {
   border-radius: 50%;
   cursor: pointer;
   padding: 3px;
@@ -1268,93 +1309,99 @@ on the right if it is inside shape textbox.
   position: relative;
   box-sizing: border-box;
 }
-.option[data-v-6a2a9a40]:hover {
+.option[data-v-d96a82fa]:hover {
   background-color: #dbdbdb;
 }
-.option__icon[data-v-6a2a9a40] {
+.option__icon[data-v-d96a82fa] {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
 }
-.option__check[data-v-6a2a9a40] {
+.option__check[data-v-d96a82fa] {
   width: 14px;
   height: 14px;
   flex-shrink: 0;
   position: absolute;
 }
 
-.options-grid-wrap[data-v-47b783db] {
+.options-grid-wrap[data-v-9246bdef] {
   padding: 5px;
   border-radius: 5px;
 }
-.none-option[data-v-47b783db] {
+.none-option[data-v-9246bdef] {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 4px;
 }
-.none-option[data-v-47b783db]:hover {
+.none-option[data-v-9246bdef]:hover {
     opacity: 0.65;
 }
-.none-icon[data-v-47b783db] {
+.none-icon[data-v-9246bdef] {
   width: 16px;
 }
-.option-grid-ctn[data-v-47b783db] {
+.option-grid-ctn[data-v-9246bdef] {
   display: flex;
   flex-direction: column;
   background-color: #fff;
   z-index: 3;
   box-sizing: border-box;
 }
-.option-grid-ctn__subtitle[data-v-47b783db] {
+.option-grid-ctn__subtitle[data-v-9246bdef] {
     padding: 3px;
     font-size: 12px;
     font-weight: 600;
 }
-.option-grid-ctn[data-v-47b783db] svg {
+.option-grid-ctn[data-v-9246bdef] svg {
   width: 100%;
   height: 100%;
   display: block;
   fill: currentColor;
 }
 
-.toolbar-table-grid[data-v-06352ab9] {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 2px;
-  padding: 8px;
-  box-sizing: border-box;
+.toolbar-table-grid-wrapper .toolbar-table-grid[data-v-617bf152] {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 2px;
+    padding: 8px;
+    box-sizing: border-box;
 }
-.toolbar-table-grid__item[data-v-06352ab9] {
-  width: 20px;
-  height: 20px;
-  border: 1px solid #d3d3d3;
-  cursor: pointer;
-  transition: all .15s;
+.toolbar-table-grid-wrapper .toolbar-table-grid__item[data-v-617bf152] {
+    width: 20px;
+    height: 20px;
+    border: 1px solid #d3d3d3;
+    cursor: pointer;
+    transition: all .15s;
 }
-.toolbar-table-grid__item.selected[data-v-06352ab9] {
-  background-color: #dbdbdb;
+.toolbar-table-grid-wrapper .toolbar-table-grid__item.selected[data-v-617bf152] {
+    background-color: #dbdbdb;
 }
-.toolbar-table-grid-value[data-v-06352ab9] {
-  font-size: 13px;
-  line-height: 1.1;
-  padding: 0px 8px 2px;
+.toolbar-table-grid-wrapper.high-contrast .toolbar-table-grid__item[data-v-617bf152] {
+      border-color: #000;
+}
+.toolbar-table-grid-wrapper.high-contrast .toolbar-table-grid__item.selected[data-v-617bf152] {
+      background: #000;
+}
+.toolbar-table-grid-wrapper .toolbar-table-grid-value[data-v-617bf152] {
+    font-size: 13px;
+    line-height: 1.1;
+    padding: 0px 8px 2px;
 }
 
-.toolbar-table-actions[data-v-fdbfb4b0] {
+.toolbar-table-actions[data-v-f82e859a] {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 10px;
   box-sizing: border-box;
 }
-.toolbar-table-actions[data-v-fdbfb4b0] svg {
+.toolbar-table-actions[data-v-f82e859a] svg {
   width: 100%;
   height: 100%;
   display: block;
   fill: currentColor;
 }
-.toolbar-table-actions__item[data-v-fdbfb4b0] {
+.toolbar-table-actions__item[data-v-f82e859a] {
   display: flex;
   gap: 5px;
   background-color: #fff;
@@ -1364,10 +1411,10 @@ on the right if it is inside shape textbox.
   box-sizing: border-box;
   position: relative;
 }
-.toolbar-table-actions__item[data-v-fdbfb4b0]:hover {
+.toolbar-table-actions__item[data-v-f82e859a]:hover {
   background-color: #c8d0d8;
 }
-.toolbar-table-actions__item--border[data-v-fdbfb4b0]:after {
+.toolbar-table-actions__item--border[data-v-f82e859a]:after {
   content: '';
   display: block;
   position: absolute;
@@ -1378,7 +1425,7 @@ on the right if it is inside shape textbox.
   width: calc(100% + 20px);
   background: #c8d0d8;
 }
-.toolbar-table-actions__icon[data-v-fdbfb4b0] {
+.toolbar-table-actions__icon[data-v-f82e859a] {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1386,7 +1433,7 @@ on the right if it is inside shape textbox.
   color: black;
   box-sizing: border-box;
 }
-.toolbar-table-actions__icon-wrapper[data-v-fdbfb4b0] {
+.toolbar-table-actions__icon-wrapper[data-v-f82e859a] {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -1394,11 +1441,11 @@ on the right if it is inside shape textbox.
   height: 14px;
   color: #47484a;
 }
-.toolbar-table-actions__icon-wrapper[data-v-fdbfb4b0] svg {
+.toolbar-table-actions__icon-wrapper[data-v-f82e859a] svg {
   width: auto;
   max-height: 14px;
 }
-.toolbar-table-actions__label[data-v-fdbfb4b0] {
+.toolbar-table-actions__label[data-v-f82e859a] {
   font-size: 15px;
   font-weight: 400;
   color: #222;
@@ -1508,7 +1555,7 @@ on the right if it is inside shape textbox.
   user-select: none;
 }
 
-.super-editor-container[data-v-ff8f86f4] {
+.super-editor-container[data-v-f27b7c30] {
   width: auto;
   height: auto;
   min-width: 8in;
@@ -1517,13 +1564,13 @@ on the right if it is inside shape textbox.
   display: flex;
   flex-direction: column;
 }
-.ruler[data-v-ff8f86f4] {
+.ruler[data-v-f27b7c30] {
   margin-bottom: 2px;
 }
-.super-editor[data-v-ff8f86f4] {
+.super-editor[data-v-f27b7c30] {
   color: initial;
 }
-.placeholder-editor[data-v-ff8f86f4] {
+.placeholder-editor[data-v-f27b7c30] {
   position: absolute;
   top: 0;
   left: 0;
@@ -1535,7 +1582,7 @@ on the right if it is inside shape textbox.
   background-color: white;
   box-sizing: border-box;
 }
-.placeholder-title[data-v-ff8f86f4] {
+.placeholder-title[data-v-f27b7c30] {
   display: flex;
   justify-content: center;
   margin-bottom: 40px;
@@ -1729,32 +1776,32 @@ span[data-v-53e13009] {
   display: inline-block;
 }
 
-.change-type[data-v-92061859] {
+.change-type[data-v-ff48cd67] {
   font-style: italic;
   font-weight: 600;
   font-size: 10px;
   color: #555;
 }
-.tracked-change[data-v-92061859] {
+.tracked-change[data-v-ff48cd67] {
   font-size: 12px;
 }
-.tracked-change-text[data-v-92061859] {
+.tracked-change-text[data-v-ff48cd67] {
   color: #111;
 }
-.comment-separator[data-v-92061859] {
+.comment-separator[data-v-ff48cd67] {
   background-color: #dbdbdb;
   height: 1px;
   width: 100%;
   margin: 10px 0;
   font-weight: 400;
 }
-.existing-internal-input[data-v-92061859] {
+.existing-internal-input[data-v-ff48cd67] {
   margin-bottom: 10px;
 }
-.initial-internal-dropdown[data-v-92061859] {
+.initial-internal-dropdown[data-v-ff48cd67] {
   margin-top: 10px;
 }
-.comments-dialog[data-v-92061859] {
+.comments-dialog[data-v-ff48cd67] {
   display: flex;
   flex-direction: column;
   padding: 10px 15px;
@@ -1769,39 +1816,39 @@ span[data-v-53e13009] {
   min-width: 200px;
   width: 100%;
 }
-.is-active[data-v-92061859] {
+.is-active[data-v-ff48cd67] {
   z-index: 10;
 }
-.input-section[data-v-92061859] {
+.input-section[data-v-ff48cd67] {
   margin-top: 10px;
 }
-.sd-button[data-v-92061859] {
+.sd-button[data-v-ff48cd67] {
   font-size: 12px;
   margin-left: 5px;
 }
-.comment[data-v-92061859] {
+.comment[data-v-ff48cd67] {
   font-size: 13px;
   margin: 10px 0;
 }
-.is-resolved[data-v-92061859] {
+.is-resolved[data-v-ff48cd67] {
   background-color: #f0f0f0;
 }
-.comment-footer[data-v-92061859] {
+.comment-footer[data-v-ff48cd67] {
   margin: 5px 0 5px;
   display: flex;
   justify-content: flex-end;
   width: 100%;
 }
-.internal-dropdown[data-v-92061859] {
+.internal-dropdown[data-v-ff48cd67] {
   display: inline-block;
 }
-.comment-editing[data-v-92061859] {
+.comment-editing[data-v-ff48cd67] {
   padding-bottom: 10px;
 }
-.comment-editing button[data-v-92061859] {
+.comment-editing button[data-v-ff48cd67] {
   margin-left: 5px;
 }
-.tracked-change[data-v-92061859] {
+.tracked-change[data-v-ff48cd67] {
   margin: 0;
 }
 
@@ -4299,54 +4346,61 @@ img[data-v-7dd69850] {
 }
 
 
+.superdoc.high-contrast {
+    border-color: #000;
+}
+.superdoc.high-contrast .super-editor {
+      border-color: #000;
+}
+.superdoc.high-contrast .super-editor:focus-within {
+        border-color: blue;
+}
 .superdoc .super-editor {
-  border-radius: 8px;
-  border: 1px solid #d3d3d3;
-  box-shadow:0 0 5px hsla( 0,0%,0%,.05);
+    border-radius: 8px;
+    border: 1px solid #d3d3d3;
+    box-shadow: 0 0 5px hsla(0, 0%, 0%, .05);
 }
 
-.superdoc[data-v-e620aa2b] {
+.superdoc[data-v-fc218ba5] {
   display: flex;
 }
-.right-sidebar[data-v-e620aa2b] {
+.right-sidebar[data-v-fc218ba5] {
   min-width: 320px;
 }
-.floating-comments[data-v-e620aa2b] {
+.floating-comments[data-v-fc218ba5] {
   min-width: 300px;
   width: 300px;
 }
-.superdoc--with-sidebar[data-v-e620aa2b] { /*  */
-}
-.superdoc__layers[data-v-e620aa2b] {
+.superdoc__layers[data-v-fc218ba5] {
   height: 100%;
   position: relative;
   box-sizing: border-box;
 }
-.superdoc__document[data-v-e620aa2b] {
+.superdoc__document[data-v-fc218ba5] {
   width: 100%;
   position: relative;
 }
-.superdoc__sub-document[data-v-e620aa2b] {
+.superdoc__sub-document[data-v-fc218ba5] {
   width: 100%;
   position: relative;
 }
-.superdoc__selection-layer[data-v-e620aa2b] {
+.superdoc__selection-layer[data-v-fc218ba5] {
   position: absolute;
   min-width: 100%;
   min-height: 100%;
   z-index: 10;
   pointer-events: none;
 }
-.superdoc__temp-selection[data-v-e620aa2b] {
+.superdoc__temp-selection[data-v-fc218ba5] {
   position: absolute;
 }
-.superdoc__comments-layer[data-v-e620aa2b] {
+.superdoc__comments-layer[data-v-fc218ba5] {
   /* position: absolute; */
   top: 0;
   height: 100%;
   position: relative;
 }
-.superdoc__right-sidebar[data-v-e620aa2b] {
+.superdoc__right-sidebar[data-v-fc218ba5] {
   width: 320px;
   min-width: 320px;
   padding: 0 10px;
@@ -4356,14 +4410,14 @@ img[data-v-7dd69850] {
 }
 
 /* Tools styles */
-.tools[data-v-e620aa2b] {
+.tools[data-v-fc218ba5] {
   position: absolute;
   z-index: 3;
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
-.tools .tool-icon[data-v-e620aa2b] {
+.tools .tool-icon[data-v-fc218ba5] {
   font-size: 20px;
   border-radius: 12px;
   border: none;
@@ -4371,7 +4425,7 @@ img[data-v-7dd69850] {
   background-color: #dbdbdb;
   cursor: pointer;
 }
-.tools-item[data-v-e620aa2b] {
+.tools-item[data-v-fc218ba5] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4381,10 +4435,10 @@ img[data-v-7dd69850] {
   border-radius: 12px;
   cursor: pointer;
 }
-.tools-item i[data-v-e620aa2b] {
+.tools-item i[data-v-fc218ba5] {
   cursor: pointer;
 }
-.superdoc__tools-icon[data-v-e620aa2b] {
+.superdoc__tools-icon[data-v-fc218ba5] {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
@@ -4398,15 +4452,15 @@ img[data-v-7dd69850] {
 
 /* 834px is iPad screen size in portrait orientation */
 @media (max-width: 834px) {
-.superdoc .superdoc__layers[data-v-e620aa2b] {
+.superdoc .superdoc__layers[data-v-fc218ba5] {
     margin: 0;
     border: 0 !important;
     box-shadow: none;
 }
-.superdoc__sub-document[data-v-e620aa2b] {
+.superdoc__sub-document[data-v-fc218ba5] {
     max-width: 100%;
 }
-.superdoc__right-sidebar[data-v-e620aa2b] {
+.superdoc__right-sidebar[data-v-fc218ba5] {
     padding: 10px;
     width: 55px;
     position: relative;
@@ -4414,7 +4468,7 @@ img[data-v-7dd69850] {
 }
 
 /* AI Writer styles */
-.ai-writer-container[data-v-e620aa2b] {
+.ai-writer-container[data-v-fc218ba5] {
   position: fixed;
   z-index: 1000;
   background: white;
@@ -4432,13 +4486,13 @@ img[data-v-7dd69850] {
 } */
 
 /* Tools styles */
-.tools[data-v-e620aa2b] {
+.tools[data-v-fc218ba5] {
   position: absolute;
   z-index: 3;
   display: flex;
   gap: 6px;
 }
-.tools .tool-icon[data-v-e620aa2b] {
+.tools .tool-icon[data-v-fc218ba5] {
   font-size: 20px;
   border-radius: 12px;
   border: none;
@@ -4446,7 +4500,7 @@ img[data-v-7dd69850] {
   background-color: #dbdbdb;
   cursor: pointer;
 }
-.tools-item[data-v-e620aa2b] {
+.tools-item[data-v-fc218ba5] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4457,18 +4511,18 @@ img[data-v-7dd69850] {
   border-radius: 12px;
   cursor: pointer;
 }
-.tools-item i[data-v-e620aa2b] {
+.tools-item i[data-v-fc218ba5] {
   cursor: pointer;
 }
-.superdoc__tools-icon[data-v-e620aa2b] {
+.superdoc__tools-icon[data-v-fc218ba5] {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
 }
-.ai-tool > svg[data-v-e620aa2b] {
+.ai-tool > svg[data-v-fc218ba5] {
   fill: transparent;
 }
-.ai-tool[data-v-e620aa2b]::before {
+.ai-tool[data-v-fc218ba5]::before {
   content: "";
   position: absolute;
   width: 20px;
@@ -4487,7 +4541,7 @@ img[data-v-7dd69850] {
   filter: brightness(1.2);
   transition: filter 0.2s ease;
 }
-.ai-tool[data-v-e620aa2b]:hover::before {
+.ai-tool[data-v-fc218ba5]:hover::before {
   filter: brightness(1.3);
 } 
 /* Tools styles - end */