@docx-editor.dev/core 2.1.1 → 2.1.3

package/dist/editor.css

@@ -964,6 +964,29 @@
   --doc-focus-ring: rgba(26, 115, 232, 0.4);
   --doc-selection: rgba(26, 115, 232, 0.3);
 
+  /* ----------------------------------------------------------------------
+    * Chrome layering.
+    *
+    * Two bands, and the order between them is the whole point: something the
+    * user just OPENED must paint over furniture that was already there. Before
+    * these tokens the popups sat at 30 and the gutter at 40, so the File menu
+    * opened underneath the navigation toggle.
+    *
+    *   --doc-z-chrome    ambient furniture that is always on screen: the
+    *                     navigation gutter, table chrome, the outline toggle.
+    *   --doc-z-overlay   anything transient the user summoned: menus, popovers,
+    *                     colour pickers, the toolbar overflow panel.
+    *   --doc-z-context   the context menu, which is raised over a selection
+    *                     that may already have an overlay open, so it outranks
+    *                     every other overlay.
+    *
+    * Add a new floating surface by picking the band, never a fresh number.
+    * `chrome-layering.test.ts` fails the build if a band inverts.
+    * -------------------------------------------------------------------- */
+  --doc-z-chrome: 40;
+  --doc-z-overlay: 50;
+  --doc-z-context: 55;
+
   /* The page sheet itself — the paper.
    *
    * Declared here for the DEFAULT theme, which it was not: `--doc-page-bg` existed only
@@ -1520,7 +1543,7 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* Transient paragraph flash used by scrollToParaId({ highlight }). */
-.layout-paragraph.docx-paragraph-flash {
+.docx-editor .layout-paragraph.docx-paragraph-flash {
   animation: docx-paragraph-flash-fade var(--docx-paragraph-flash-duration, 1200ms) ease-out both;
 }
 
@@ -2013,7 +2036,7 @@ a.docx-hyperlink:focus-visible {
   cursor: pointer;
 }
 
-.paged-editor--readonly .docx-table-furniture {
+.docx-editor .paged-editor--readonly .docx-table-furniture {
   display: none !important;
 }
 
@@ -2027,7 +2050,7 @@ a.docx-hyperlink:focus-visible {
 
 .docx-table-chrome__panel {
   position: absolute;
-  z-index: 40;
+  z-index: var(--doc-z-chrome);
   top: calc(100% + 6px);
   right: 0;
   min-width: 150px;
@@ -2203,13 +2226,13 @@ a.docx-hyperlink:focus-visible {
   * TABLE CELL SELECTION (visible layout table cells)
   * ============================================================================ */
 
-.layout-table-cell-selected {
+.docx-editor .layout-table-cell-selected {
   position: relative;
   outline: 2px solid var(--doc-selection);
   outline-offset: -2px;
 }
 
-.layout-table-cell-selected::after {
+.docx-editor .layout-table-cell-selected::after {
   content: '';
   position: absolute;
   inset: 0;
@@ -2217,17 +2240,17 @@ a.docx-hyperlink:focus-visible {
   pointer-events: none;
 }
 
-.layout-table-resize-handle {
+.docx-editor .layout-table-resize-handle {
   background-color: transparent;
   transition: background-color 0.15s;
 }
 
-.layout-table-resize-handle[data-active='true'] {
+.docx-editor .layout-table-resize-handle[data-active='true'] {
   background-color: transparent;
 }
 
-.layout-table-resize-handle[data-active='true']::after,
-.layout-table-edge-handle-right[data-active='true']::after {
+.docx-editor .layout-table-resize-handle[data-active='true']::after,
+.docx-editor .layout-table-edge-handle-right[data-active='true']::after {
   content: '';
   position: absolute;
   top: 0;
@@ -2240,24 +2263,24 @@ a.docx-hyperlink:focus-visible {
   transform: translateX(-50%);
 }
 
-.layout-table-resize-handle:hover,
-.layout-table-resize-handle.dragging {
+.docx-editor .layout-table-resize-handle:hover,
+.docx-editor .layout-table-resize-handle.dragging {
   background-color: transparent;
 }
 
-.layout-table-resize-handle:hover::after,
-.layout-table-resize-handle.dragging::after {
+.docx-editor .layout-table-resize-handle:hover::after,
+.docx-editor .layout-table-resize-handle.dragging::after {
   opacity: 1;
 }
 
 /* Row resize handles */
-.layout-table-row-resize-handle,
-.layout-table-edge-handle-bottom {
+.docx-editor .layout-table-row-resize-handle,
+.docx-editor .layout-table-edge-handle-bottom {
   background-color: transparent;
   transition: background-color 0.15s;
 }
 
-.layout-table-row-resize-handle[data-active='true']::after {
+.docx-editor .layout-table-row-resize-handle[data-active='true']::after {
   content: '';
   position: absolute;
   top: 50%;
@@ -2270,35 +2293,35 @@ a.docx-hyperlink:focus-visible {
   transform: translateY(-50%);
 }
 
-.layout-table-row-resize-handle:hover,
-.layout-table-row-resize-handle.dragging,
-.layout-table-edge-handle-bottom:hover,
-.layout-table-edge-handle-bottom.dragging {
+.docx-editor .layout-table-row-resize-handle:hover,
+.docx-editor .layout-table-row-resize-handle.dragging,
+.docx-editor .layout-table-edge-handle-bottom:hover,
+.docx-editor .layout-table-edge-handle-bottom.dragging {
   background-color: transparent;
 }
 
-.layout-table-row-resize-handle:hover::after,
-.layout-table-row-resize-handle.dragging::after {
+.docx-editor .layout-table-row-resize-handle:hover::after,
+.docx-editor .layout-table-row-resize-handle.dragging::after {
   opacity: 1;
 }
 
 /* Right edge handle */
-.layout-table-edge-handle-right {
+.docx-editor .layout-table-edge-handle-right {
   background-color: transparent;
   transition: background-color 0.15s;
 }
 
-.layout-table-edge-handle-right[data-active='true'] {
+.docx-editor .layout-table-edge-handle-right[data-active='true'] {
   background-color: transparent;
 }
 
-.layout-table-edge-handle-right:hover,
-.layout-table-edge-handle-right.dragging {
+.docx-editor .layout-table-edge-handle-right:hover,
+.docx-editor .layout-table-edge-handle-right.dragging {
   background-color: transparent;
 }
 
-.layout-table-edge-handle-right:hover::after,
-.layout-table-edge-handle-right.dragging::after {
+.docx-editor .layout-table-edge-handle-right:hover::after,
+.docx-editor .layout-table-edge-handle-right.dragging::after {
   opacity: 1;
 }
 
@@ -2307,22 +2330,22 @@ a.docx-hyperlink:focus-visible {
   * ============================================================================ */
 
 /* Hide table resize handles */
-.paged-editor--readonly .layout-table-resize-handle,
-.paged-editor--readonly .layout-table-row-resize-handle,
-.paged-editor--readonly .layout-table-edge-handle-bottom,
-.paged-editor--readonly .layout-table-edge-handle-right {
+.docx-editor .paged-editor--readonly .layout-table-resize-handle,
+.docx-editor .paged-editor--readonly .layout-table-row-resize-handle,
+.docx-editor .paged-editor--readonly .layout-table-edge-handle-bottom,
+.docx-editor .paged-editor--readonly .layout-table-edge-handle-right {
   display: none !important;
 }
 
 /* Remove header/footer hover effects and edit hints */
-.paged-editor--readonly .layout-page-header,
-.paged-editor--readonly .layout-page-footer {
+.docx-editor .paged-editor--readonly .layout-page-header,
+.docx-editor .paged-editor--readonly .layout-page-footer {
   cursor: default;
   pointer-events: none;
 }
 
 /* Remove text cursor from page content */
-.paged-editor--readonly .layout-page-content {
+.docx-editor .paged-editor--readonly .layout-page-content {
   cursor: default;
 }
 
@@ -2385,7 +2408,7 @@ a.docx-hyperlink:focus-visible {
   * ============================================================================ */
 
 /* Page content area — show text cursor when hovering over editable content */
-.layout-page-content {
+.docx-editor .layout-page-content {
   cursor: text;
 }
 
@@ -2396,7 +2419,7 @@ a.docx-hyperlink:focus-visible {
     like Word, with a corner label chip revealed on hover/focus. The box is
     non-interactive so it never steals clicks from the editable content under it.
     Nested controls each draw their own (slightly inset) box. */
-.layout-block-sdt-box {
+.docx-editor .layout-block-sdt-box {
   pointer-events: none;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -2404,12 +2427,12 @@ a.docx-hyperlink:focus-visible {
   transition: border-color 0.1s ease;
   z-index: 1;
 }
-.layout-block-sdt-box.is-active,
-.layout-block-sdt-box.is-focused {
+.docx-editor .layout-block-sdt-box.is-active,
+.docx-editor .layout-block-sdt-box.is-focused {
   border-color: rgba(25, 103, 210, 0.5);
 }
 /* Corner label chip — hidden until its control is hovered/active. */
-.layout-block-sdt-label {
+.docx-editor .layout-block-sdt-label {
   position: absolute;
   left: -1px;
   bottom: 100%;
@@ -2426,8 +2449,8 @@ a.docx-hyperlink:focus-visible {
   border-radius: 4px 4px 0 0;
   display: none;
 }
-.layout-block-sdt-box.is-active .layout-block-sdt-label,
-.layout-block-sdt-box.is-focused .layout-block-sdt-label {
+.docx-editor .layout-block-sdt-box.is-active .layout-block-sdt-label,
+.docx-editor .layout-block-sdt-box.is-focused .layout-block-sdt-label {
   display: inline-flex;
   align-items: center;
   gap: 2px;
@@ -2441,30 +2464,30 @@ a.docx-hyperlink:focus-visible {
     stays the double-click-to-edit target; only its content is passed through.
     Kept here (not only in prosemirror/editor.css) so the React adapter's
     styles.css build — which compiles this file — ships the rule. */
-.layout-page-header > *,
-.layout-page-footer > * {
+.docx-editor .layout-page-header > *,
+.docx-editor .layout-page-footer > * {
   pointer-events: none;
 }
 
 /* While editing a region, its content must be hittable again so clicks map to
     header/footer caret positions. */
-.paged-editor--editing-header .layout-page-header > *,
-.paged-editor--editing-footer .layout-page-footer > * {
+.docx-editor .paged-editor--editing-header .layout-page-header > *,
+.docx-editor .paged-editor--editing-footer .layout-page-footer > * {
   pointer-events: auto;
 }
 
 /* Header/footer areas — double-click hint */
-.layout-page-header,
-.layout-page-footer {
+.docx-editor .layout-page-header,
+.docx-editor .layout-page-footer {
   cursor: pointer;
   transition: background-color 0.15s ease;
 }
-.layout-page-header:hover,
-.layout-page-footer:hover {
+.docx-editor .layout-page-header:hover,
+.docx-editor .layout-page-footer:hover {
   background-color: rgba(37, 99, 235, 0.06);
 }
 /* Show "Double-click to edit" hint on hover when area is empty */
-.layout-page-header:empty:hover::after {
+.docx-editor .layout-page-header:empty:hover::after {
   content: 'Double-click to add header';
   display: block;
   text-align: center;
@@ -2472,7 +2495,7 @@ a.docx-hyperlink:focus-visible {
   font-size: 11px;
   padding: 4px 0;
 }
-.layout-page-footer:empty:hover::after {
+.docx-editor .layout-page-footer:empty:hover::after {
   content: 'Double-click to add footer';
   display: block;
   text-align: center;
@@ -2490,7 +2513,7 @@ a.docx-hyperlink:focus-visible {
   */
 
 /* Dim body content when editing header/footer */
-.paged-editor--hf-editing .layout-page-content {
+.docx-editor .paged-editor--hf-editing .layout-page-content {
   opacity: 0.4;
   pointer-events: none;
   transition: opacity 0.15s ease;
@@ -2499,19 +2522,19 @@ a.docx-hyperlink:focus-visible {
 /* While editing one HF region, the sibling region (and the non-edited area)
     shows a normal arrow, not the double-click "pointer" hint. The active
     region's `cursor: text` below wins via later source order. */
-.paged-editor--hf-editing .layout-page-header,
-.paged-editor--hf-editing .layout-page-footer {
+.docx-editor .paged-editor--hf-editing .layout-page-header,
+.docx-editor .paged-editor--hf-editing .layout-page-footer {
   cursor: default;
 }
 
 /* Dotted border on active header area; text caret since it's being edited */
-.paged-editor--editing-header .layout-page-header {
+.docx-editor .paged-editor--editing-header .layout-page-header {
   border-bottom: 1px dotted var(--doc-primary);
   cursor: text;
 }
 
 /* Dotted border on active footer area; text caret since it's being edited */
-.paged-editor--editing-footer .layout-page-footer {
+.docx-editor .paged-editor--editing-footer .layout-page-footer {
   border-top: 1px dotted var(--doc-primary);
   cursor: text;
 }
@@ -2523,8 +2546,8 @@ a.docx-hyperlink:focus-visible {
   */
 
 /* Remove hover effect on header/footer when in editing mode */
-.paged-editor--hf-editing .layout-page-header:hover,
-.paged-editor--hf-editing .layout-page-footer:hover {
+.docx-editor .paged-editor--hf-editing .layout-page-header:hover,
+.docx-editor .paged-editor--hf-editing .layout-page-footer:hover {
   background-color: transparent;
 }
 
@@ -2590,7 +2613,7 @@ a.docx-hyperlink:focus-visible {
   * z-index: 11 — one above SelectionOverlay (10) so cursor name labels render
   * above the local caret.
   * ============================================================================= */
-.paged-editor__decoration-overlay {
+.docx-editor .paged-editor__decoration-overlay {
   position: absolute;
   inset: 0;
   pointer-events: none;
@@ -2598,8 +2621,12 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* Default styles for y-prosemirror remote cursor decorations. Consumers can
-  * override by providing their own `.ProseMirror-yjs-cursor` rules. */
-.ProseMirror-yjs-cursor {
+  * override by providing their own `.ProseMirror-yjs-cursor` rules.
+  *
+  * Scoped, because `.ProseMirror-yjs-cursor` is y-prosemirror's class name and
+  * not ours: unscoped, these rules restyled the remote cursors of a HOST's own
+  * ProseMirror + Yjs editor sharing the page. */
+.docx-editor .ProseMirror-yjs-cursor {
   position: relative;
   margin-left: -1px;
   margin-right: -1px;
@@ -2608,7 +2635,7 @@ a.docx-hyperlink:focus-visible {
   word-break: normal;
   pointer-events: none;
 }
-.ProseMirror-yjs-cursor > div {
+.docx-editor .ProseMirror-yjs-cursor > div {
   position: absolute;
   top: -1.05em;
   left: -1px;
@@ -2631,7 +2658,7 @@ a.docx-hyperlink:focus-visible {
 /* Interactive trigger for typed controls (checkbox/dropdown/date). The box is
     pointer-events:none; the trigger re-enables them so it is clickable. Sits at
     the top-right corner of the control box. */
-.layout-sdt-widget {
+.docx-editor .layout-sdt-widget {
   position: absolute;
   top: 1px;
   right: 1px;
@@ -2652,16 +2679,16 @@ a.docx-hyperlink:focus-visible {
   opacity: 0.55;
   transition: opacity 0.1s ease;
 }
-.layout-block-sdt-box.is-active .layout-sdt-widget,
-.layout-block-sdt-box.is-focused .layout-sdt-widget,
-.layout-sdt-widget:focus {
+.docx-editor .layout-block-sdt-box.is-active .layout-sdt-widget,
+.docx-editor .layout-block-sdt-box.is-focused .layout-sdt-widget,
+.docx-editor .layout-sdt-widget:focus {
   opacity: 1;
 }
-.layout-sdt-widget:hover {
+.docx-editor .layout-sdt-widget:hover {
   background: var(--doc-primary-light);
 }
 
-.layout-inline-sdt-widget {
+.docx-editor .layout-inline-sdt-widget {
   cursor: pointer;
   pointer-events: auto;
   border-radius: 2px;
@@ -2670,14 +2697,14 @@ a.docx-hyperlink:focus-visible {
      -moz-user-select: none;
           user-select: none;
 }
-.layout-inline-sdt-widget:hover,
-.layout-inline-sdt-widget:focus {
+.docx-editor .layout-inline-sdt-widget:hover,
+.docx-editor .layout-inline-sdt-widget:focus {
   background: var(--doc-primary-light);
   outline: 1px solid rgba(25, 103, 210, 0.55);
 }
 
 /* Popup for dropdown/date content-control widgets (rendered by the adapter). */
-.layout-sdt-widget-popup {
+.docx-editor .layout-sdt-widget-popup {
   min-width: 120px;
   max-height: 240px;
   overflow-y: auto;
@@ -2688,7 +2715,7 @@ a.docx-hyperlink:focus-visible {
   padding: 4px;
   font-size: 13px;
 }
-.layout-sdt-widget-option {
+.docx-editor .layout-sdt-widget-option {
   display: block;
   width: 100%;
   text-align: left;
@@ -2699,26 +2726,26 @@ a.docx-hyperlink:focus-visible {
   cursor: pointer;
   color: var(--doc-text);
 }
-.layout-sdt-widget-option:hover {
+.docx-editor .layout-sdt-widget-option:hover {
   background: var(--doc-primary-light);
 }
-.layout-sdt-widget-empty {
+.docx-editor .layout-sdt-widget-empty {
   padding: 6px 10px;
   color: var(--doc-text-muted);
 }
-.layout-sdt-widget-date {
+.docx-editor .layout-sdt-widget-date {
   font: inherit;
   padding: 4px 6px;
   border: 1px solid var(--doc-border-light);
   border-radius: 4px;
 }
-.layout-sdt-widget-option.is-selected {
+.docx-editor .layout-sdt-widget-option.is-selected {
   font-weight: 600;
   background: var(--doc-bg-hover);
 }
 
 /* Repeating-section item add/remove affordances (bottom-right of the item box). */
-.layout-sdt-repeat-controls {
+.docx-editor .layout-sdt-repeat-controls {
   position: absolute;
   bottom: 1px;
   right: 1px;
@@ -2727,11 +2754,11 @@ a.docx-hyperlink:focus-visible {
   opacity: 0.55;
   pointer-events: none;
 }
-.layout-block-sdt-box.is-active .layout-sdt-repeat-controls,
-.layout-block-sdt-box.is-focused .layout-sdt-repeat-controls {
+.docx-editor .layout-block-sdt-box.is-active .layout-sdt-repeat-controls,
+.docx-editor .layout-block-sdt-box.is-focused .layout-sdt-repeat-controls {
   opacity: 1;
 }
-.layout-sdt-repeat-btn {
+.docx-editor .layout-sdt-repeat-btn {
   min-width: 16px;
   height: 16px;
   padding: 0 3px;
@@ -2744,7 +2771,7 @@ a.docx-hyperlink:focus-visible {
   cursor: pointer;
   pointer-events: auto;
 }
-.layout-sdt-repeat-btn:hover {
+.docx-editor .layout-sdt-repeat-btn:hover {
   background: var(--doc-primary-light);
 }
 
@@ -2753,24 +2780,24 @@ a.docx-hyperlink:focus-visible {
   * Visible painter cues live here so React and Vue stay in lockstep.
   * ========================================================================== */
 
-.layout-revision-bars {
+.docx-editor .layout-revision-bars {
   position: absolute;
   inset: 0;
   pointer-events: none;
 }
 
-.layout-revision-change-bar {
+.docx-editor .layout-revision-change-bar {
   position: absolute;
   left: -10px;
   width: 2px;
   pointer-events: none;
 }
 
-.layout-revision-change-bar.layout-revision-ins {
+.docx-editor .layout-revision-change-bar.layout-revision-ins {
   background-color: var(--doc-revision-insertion);
 }
 
-.layout-revision-change-bar.layout-revision-del {
+.docx-editor .layout-revision-change-bar.layout-revision-del {
   background-color: var(--doc-revision-deletion);
 }
 
@@ -2826,11 +2853,11 @@ a.docx-hyperlink:focus-visible {
   text-decoration-color: var(--doc-revision-format);
 }
 
-.layout-revision-pmark {
+.docx-editor .layout-revision-pmark {
   position: relative;
 }
 
-.layout-revision-pmark-glyph {
+.docx-editor .layout-revision-pmark-glyph {
   display: inline;
   margin-left: 2px;
   font-weight: normal;
@@ -2838,11 +2865,11 @@ a.docx-hyperlink:focus-visible {
   pointer-events: none;
 }
 
-.layout-revision-pmark-glyph.layout-revision-ins {
+.docx-editor .layout-revision-pmark-glyph.layout-revision-ins {
   color: var(--doc-revision-insertion);
 }
 
-.layout-revision-pmark-glyph.layout-revision-del {
+.docx-editor .layout-revision-pmark-glyph.layout-revision-del {
   color: var(--doc-revision-deletion);
   text-decoration: line-through;
 }
@@ -2864,24 +2891,24 @@ a.docx-hyperlink:focus-visible {
   background-color: color-mix(in srgb, var(--doc-text-muted) 8%, transparent);
 }
 
-.layout-run-image.docx-insertion,
-.layout-run-image-wrapper.docx-insertion > .layout-run-image,
-.layout-block-image.docx-insertion,
-.layout-image.docx-insertion,
-.layout-page-floating-image.docx-insertion > img,
-.layout-cell-floating-image.docx-insertion > img,
-.layout-header-footer-floating-image.docx-insertion > img {
+.docx-editor .layout-run-image.docx-insertion,
+.docx-editor .layout-run-image-wrapper.docx-insertion > .layout-run-image,
+.docx-editor .layout-block-image.docx-insertion,
+.docx-editor .layout-image.docx-insertion,
+.docx-editor .layout-page-floating-image.docx-insertion > img,
+.docx-editor .layout-cell-floating-image.docx-insertion > img,
+.docx-editor .layout-header-footer-floating-image.docx-insertion > img {
   outline: 2px solid var(--doc-revision-insertion);
   outline-offset: 1px;
 }
 
-.layout-run-image.docx-deletion,
-.layout-run-image-wrapper.docx-deletion > .layout-run-image,
-.layout-block-image.docx-deletion,
-.layout-image.docx-deletion,
-.layout-page-floating-image.docx-deletion > img,
-.layout-cell-floating-image.docx-deletion > img,
-.layout-header-footer-floating-image.docx-deletion > img {
+.docx-editor .layout-run-image.docx-deletion,
+.docx-editor .layout-run-image-wrapper.docx-deletion > .layout-run-image,
+.docx-editor .layout-block-image.docx-deletion,
+.docx-editor .layout-image.docx-deletion,
+.docx-editor .layout-page-floating-image.docx-deletion > img,
+.docx-editor .layout-cell-floating-image.docx-deletion > img,
+.docx-editor .layout-header-footer-floating-image.docx-deletion > img {
   outline: 2px solid var(--doc-revision-deletion);
   outline-offset: 1px;
   opacity: 0.6;
@@ -3731,7 +3758,7 @@ a.docx-hyperlink:focus-visible {
   position: absolute;
   left: 26px;
   top: 44px;
-  z-index: 31;
+  z-index: var(--doc-z-chrome);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -4167,7 +4194,7 @@ a.docx-hyperlink:focus-visible {
   position: absolute;
   top: calc(100% + 6px);
   inset-inline-end: 0;
-  z-index: 60;
+  z-index: var(--doc-z-overlay);
   box-sizing: border-box;
   inline-size: min(340px, calc(100vw - 16px));
   min-inline-size: min(260px, calc(100vw - 16px));
@@ -4576,7 +4603,7 @@ a.docx-hyperlink:focus-visible {
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 30;
+  z-index: var(--doc-z-overlay);
   margin-top: 4px;
   min-width: 72px;
   max-height: 280px;
@@ -4607,7 +4634,7 @@ a.docx-hyperlink:focus-visible {
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 30;
+  z-index: var(--doc-z-overlay);
   margin-top: 4px;
   min-width: 232px;
 }
@@ -4644,7 +4671,7 @@ a.docx-hyperlink:focus-visible {
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 30;
+  z-index: var(--doc-z-overlay);
   margin-top: 4px;
   min-width: 96px;
 }
@@ -4667,7 +4694,7 @@ a.docx-hyperlink:focus-visible {
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 30;
+  z-index: var(--doc-z-overlay);
   margin-top: 4px;
   display: flex;
   gap: 2px;
@@ -4742,7 +4769,7 @@ a.docx-hyperlink:focus-visible {
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 30;
+  z-index: var(--doc-z-overlay);
   margin-top: 4px;
   padding: 10px;
   display: flex;
@@ -5265,7 +5292,7 @@ a.docx-hyperlink:focus-visible {
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 30;
+  z-index: var(--doc-z-overlay);
   margin-top: 4px;
   display: flex;
   gap: 2px;
@@ -5335,7 +5362,7 @@ a.docx-hyperlink:focus-visible {
  */
 .docx-hyperlink-popup {
   position: absolute;
-  z-index: 30;
+  z-index: var(--doc-z-overlay);
   display: flex;
   align-items: center;
   gap: 4px;
@@ -5616,7 +5643,7 @@ a.docx-hyperlink:focus-visible {
   inset-block: 0;
   inset-inline-start: 0;
   width: var(--docx-nav-reservation, 328px);
-  z-index: 40;
+  z-index: var(--doc-z-chrome);
   pointer-events: none;
   font-size: 13px;
   color: var(--doc-text);
@@ -6336,7 +6363,7 @@ a.docx-hyperlink:focus-visible {
   position: absolute;
   top: calc(100% + 4px);
   right: 0;
-  z-index: 40;
+  z-index: var(--doc-z-overlay);
   display: flex;
   min-width: 260px;
   flex-direction: column;
@@ -6549,7 +6576,7 @@ a.docx-hyperlink:focus-visible {
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 30;
+  z-index: var(--doc-z-overlay);
   margin-top: 4px;
   min-width: 220px;
 }
@@ -6697,7 +6724,7 @@ a.docx-hyperlink:focus-visible {
  * and dropdowns (z-index 40) because it is opened ON them as often as on the page. */
 .docx-editor .docx-contextmenu,
 .docx-contextmenu {
-  z-index: 45;
+  z-index: var(--doc-z-context);
   min-width: 240px;
   /* A menu longer than the window scrolls rather than overflowing it. The flip in
    * `DocxEditorContextMenu` clamps the panel to the top inset when it cannot fit; without
@@ -6821,7 +6848,7 @@ a.docx-hyperlink:focus-visible {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
-  z-index: 40;
+  z-index: var(--doc-z-overlay);
   min-width: 220px;
   padding: 4px 0;
   background: var(--doc-surface);
@@ -6859,7 +6886,7 @@ a.docx-hyperlink:focus-visible {
   position: absolute;
   top: calc(100% + 4px);
   right: 0;
-  z-index: 40;
+  z-index: var(--doc-z-overlay);
   width: 280px;
   padding: 12px;
   background: var(--doc-surface);