From 25548b12ee7acd2efc74f8916b7c27c7bff75763 Mon Sep 17 00:00:00 2001
From: Artem Nistuley <artem@superdoc.dev>
Date: Tue, 26 May 2026 13:29:23 +0300
Subject: [PATCH] feat: namespace internal ui classes

---
 .../editors/v1/assets/styles/elements/ai.css  |   8 +-
 .../src/editors/v1/components/SuperEditor.vue |   1 +
 .../components/context-menu/ContextMenu.vue   |   6 +-
 .../context-menu/tests/ContextMenu.test.js    |   6 +-
 .../v1/components/popovers/Mentions.vue       |   4 +-
 .../v1/components/toolbar/AIWriter.vue        |   2 +-
 .../components/toolbar/AlignmentButtons.vue   |   6 +-
 .../v1/components/toolbar/ButtonGroup.test.js |  24 ++--
 .../v1/components/toolbar/ButtonGroup.vue     |  14 +--
 .../v1/components/toolbar/DocumentMode.vue    |  10 +-
 .../v1/components/toolbar/IconGridRow.vue     |  18 +--
 .../v1/components/toolbar/LinkInput.test.js   |   6 +-
 .../v1/components/toolbar/LinkInput.vue       |  16 +--
 .../v1/components/toolbar/SearchInput.vue     |  12 +-
 .../components/toolbar/StyleButtonsList.vue   |  12 +-
 .../v1/components/toolbar/TableGrid.vue       |   8 +-
 .../editors/v1/components/toolbar/Toolbar.vue |   1 +
 .../v1/components/toolbar/ToolbarButton.vue   | 109 +++++++++---------
 .../components/toolbar/ToolbarButtonIcon.vue  |  12 +-
 .../toolbar/ToolbarDropdown.test.js           |   2 +-
 .../v1/components/toolbar/ToolbarDropdown.vue |  35 ++++--
 .../v1/components/toolbar/defaultItems.js     |   8 +-
 .../components/toolbar/defaultItems.test.js   |   8 +-
 .../custom-selection/custom-selection.js      |   7 +-
 .../src/editors/v1/tests/css-no-bleed.test.js |  96 +++++++++++++++
 .../src/assets/styles/elements/superdoc.css   |   5 -
 .../src/assets/styles/layout/global.css       |   6 +-
 .../CommentsLayer/CommentDialog.vue           |  15 +--
 .../CommentsLayer/CommentsDropdown.vue        |   4 +-
 .../CommentsLayer/InternalDropdown.vue        |  28 ++---
 .../comments/reject-format-suggestion.spec.ts |   2 +-
 .../tests/formatting/apply-font.spec.ts       |   2 +-
 .../formatting/toggle-formatting-off.spec.ts  |   4 +-
 .../tests/lists/bullet-style-export.spec.ts   |   2 +-
 .../tests/lists/bullet-style-picker.spec.ts   |   2 +-
 .../lists/bullet-style-undo-redo.spec.ts      |   2 +-
 .../tests/lists/list-style-changes.spec.ts    |  12 +-
 .../tests/tables/add-row-formatting.spec.ts   |   4 +-
 .../tests/toolbar/basic-styles.spec.ts        |  14 +--
 .../tests/toolbar/composite-styles.spec.ts    |  40 +++----
 tests/behavior/tests/toolbar/link.spec.ts     |   2 +-
 .../responsive-container-overflow.spec.ts     |   2 +-
 .../tests/toolbar/table-styles.spec.ts        |  10 +-
 .../behavior/tests/toolbar/undo-redo.spec.ts  |   4 +-
 44 files changed, 348 insertions(+), 243 deletions(-)

diff --git a/packages/super-editor/src/editors/v1/assets/styles/elements/ai.css b/packages/super-editor/src/editors/v1/assets/styles/elements/ai.css
index b4cabe4eeb..b7d42effe2 100644
--- a/packages/super-editor/src/editors/v1/assets/styles/elements/ai.css
+++ b/packages/super-editor/src/editors/v1/assets/styles/elements/ai.css
@@ -1,16 +1,16 @@
 /* Custom toolbar styling */
 
 /* AI button icon styling with gradient */
-.super-editor .toolbar-icon__icon--ai {
+.super-editor .sd-toolbar-icon__icon--ai {
   position: relative;
   z-index: 1;
 }
 
-.super-editor .toolbar-icon__icon--ai svg {
+.super-editor .sd-toolbar-icon__icon--ai svg {
   fill: transparent;
 }
 
-.super-editor .toolbar-icon__icon--ai::before {
+.super-editor .sd-toolbar-icon__icon--ai::before {
   content: '';
   position: absolute;
   top: 0;
@@ -33,7 +33,7 @@
   transition: filter 0.2s ease;
 }
 
-.super-editor .toolbar-icon__icon--ai:hover::before {
+.super-editor .sd-toolbar-icon__icon--ai:hover::before {
   filter: brightness(1.3);
 }
 
diff --git a/packages/super-editor/src/editors/v1/components/SuperEditor.vue b/packages/super-editor/src/editors/v1/components/SuperEditor.vue
index 9ef3822539..84c3827a6a 100644
--- a/packages/super-editor/src/editors/v1/components/SuperEditor.vue
+++ b/packages/super-editor/src/editors/v1/components/SuperEditor.vue
@@ -1293,6 +1293,7 @@ onBeforeUnmount(() => {
     class="super-editor-container"
     :class="{ 'web-layout': isWebLayout, contained: isContained }"
     :style="containerStyle"
+    data-sd-part="editor-root"
   >
     <!-- Ruler: teleport to external container if specified, otherwise render inline (hidden in web layout) -->
     <Teleport
diff --git a/packages/super-editor/src/editors/v1/components/context-menu/ContextMenu.vue b/packages/super-editor/src/editors/v1/components/context-menu/ContextMenu.vue
index d0ed82adbd..c7b5daef28 100644
--- a/packages/super-editor/src/editors/v1/components/context-menu/ContextMenu.vue
+++ b/packages/super-editor/src/editors/v1/components/context-menu/ContextMenu.vue
@@ -652,7 +652,7 @@ onBeforeUnmount(() => {
         <template v-for="item in section.items" :key="item.id">
           <div
             class="context-menu-item"
-            :class="{ 'is-selected': item.id === selectedId }"
+            :class="{ 'sd-is-selected': item.id === selectedId }"
             @click="executeCommand(item)"
           >
             <!-- Custom rendered content or default rendering -->
@@ -772,7 +772,7 @@ onBeforeUnmount(() => {
   background: var(--sd-ui-menu-item-hover-bg, #f5f5f5);
 }
 
-.context-menu-item.is-selected {
+.context-menu-item.sd-is-selected {
   background: var(--sd-ui-menu-item-active-bg, #edf6ff);
   color: var(--sd-ui-menu-item-active-text, #0096fd);
   fill: var(--sd-ui-menu-item-active-text, #0096fd);
@@ -801,7 +801,7 @@ onBeforeUnmount(() => {
   width: 100%;
 }
 
-.popover {
+.sd-popover {
   background: var(--sd-ui-menu-bg, #ffffff);
   border-radius: var(--sd-ui-menu-radius, 0);
   box-shadow: var(--sd-ui-menu-shadow, 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1));
diff --git a/packages/super-editor/src/editors/v1/components/context-menu/tests/ContextMenu.test.js b/packages/super-editor/src/editors/v1/components/context-menu/tests/ContextMenu.test.js
index 90f339f1c8..4581d1836f 100644
--- a/packages/super-editor/src/editors/v1/components/context-menu/tests/ContextMenu.test.js
+++ b/packages/super-editor/src/editors/v1/components/context-menu/tests/ContextMenu.test.js
@@ -594,7 +594,7 @@ describe('ContextMenu.vue', () => {
       await onContextMenuOpen({ menuPosition: { left: '100px', top: '200px' } });
       await nextTick();
 
-      expect(wrapper.find('.context-menu-item.is-selected').exists()).toBe(true);
+      expect(wrapper.find('.context-menu-item.sd-is-selected').exists()).toBe(true);
     });
 
     it('should navigate with arrow keys', async () => {
@@ -609,13 +609,13 @@ describe('ContextMenu.vue', () => {
       await searchInput.trigger('keydown', { key: 'ArrowDown' });
       await nextTick();
 
-      const selectedItems = wrapper.findAll('.context-menu-item.is-selected');
+      const selectedItems = wrapper.findAll('.context-menu-item.sd-is-selected');
       expect(selectedItems).toHaveLength(1);
 
       await searchInput.trigger('keydown', { key: 'ArrowUp' });
       await nextTick();
 
-      expect(wrapper.findAll('.context-menu-item.is-selected')).toHaveLength(1);
+      expect(wrapper.findAll('.context-menu-item.sd-is-selected')).toHaveLength(1);
     });
 
     it('should execute selected item on Enter', async () => {
diff --git a/packages/super-editor/src/editors/v1/components/popovers/Mentions.vue b/packages/super-editor/src/editors/v1/components/popovers/Mentions.vue
index 6dc272bdff..0eb3021500 100644
--- a/packages/super-editor/src/editors/v1/components/popovers/Mentions.vue
+++ b/packages/super-editor/src/editors/v1/components/popovers/Mentions.vue
@@ -75,7 +75,7 @@ const handleFocus = () => {
       @mouseleave="activeUserIndex = null"
       :key="user.email"
       class="user-row"
-      :class="{ selected: activeUserIndex === index }"
+      :class="{ 'sd-selected': activeUserIndex === index }"
     >
       <div v-if="user.name">
         <span v-if="user.name">{{ user.name }}</span>
@@ -89,7 +89,7 @@ const handleFocus = () => {
 </template>
 
 <style scoped>
-.selected {
+.sd-selected {
   background-color: #dbdbdb;
 }
 .mentions-container {
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/AIWriter.vue b/packages/super-editor/src/editors/v1/components/toolbar/AIWriter.vue
index 74280a9a20..d418032dd0 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/AIWriter.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/AIWriter.vue
@@ -467,7 +467,7 @@ const handleInput = (event) => {
   display: flex;
 }
 
-.error {
+.sd-error {
   fill: #ed4337;
 }
 
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/AlignmentButtons.vue b/packages/super-editor/src/editors/v1/components/toolbar/AlignmentButtons.vue
index 7f90757fa5..15f66a1039 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/AlignmentButtons.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/AlignmentButtons.vue
@@ -82,7 +82,7 @@ onMounted(() => {
     <div
       v-for="(button, index) in alignmentButtons"
       :key="button.key"
-      class="button-icon"
+      class="sd-button-icon"
       @click="select(button.key)"
       v-html="button.icon"
       data-item="btn-textAlign-option"
@@ -102,7 +102,7 @@ onMounted(() => {
   padding: 8px;
   box-sizing: border-box;
 
-  .button-icon {
+  .sd-button-icon {
     cursor: pointer;
     padding: 5px;
     font-size: var(--sd-ui-font-size-600, 16px);
@@ -129,7 +129,7 @@ onMounted(() => {
   }
 
   &.high-contrast {
-    .button-icon {
+    .sd-button-icon {
       &:hover {
         background-color: #000;
         color: #fff;
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/ButtonGroup.test.js b/packages/super-editor/src/editors/v1/components/toolbar/ButtonGroup.test.js
index 21403ff456..3d858d3b2c 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/ButtonGroup.test.js
+++ b/packages/super-editor/src/editors/v1/components/toolbar/ButtonGroup.test.js
@@ -55,7 +55,7 @@ describe('ButtonGroup dropdownOptions selected class', () => {
     const options = wrapper.findComponent({ name: 'ToolbarDropdown' }).props('options');
 
     expect(options[1].type).toBeUndefined();
-    expect(options[1].props.class).toBe('selected');
+    expect(options[1].props.class).toBe('sd-selected');
   });
 });
 
@@ -162,7 +162,7 @@ describe('ButtonGroup dropdown keyboard activation', () => {
     const item = createDropdownItem('plain-match');
     const wrapper = mountWithItem(item);
 
-    await wrapper.find('.toolbar-item-ctn').trigger('keydown', { key });
+    await wrapper.find('.sd-toolbar-item-ctn').trigger('keydown', { key });
 
     expect(item.expand.value).toBe(true);
   });
@@ -170,8 +170,8 @@ describe('ButtonGroup dropdown keyboard activation', () => {
 
 // Regression for the codex P2 finding on PR #3304: after Escape closes the
 // dropdown, ToolbarDropdown.rememberTriggerFocusTarget restores focus to the
-// inner `.toolbar-item` (ToolbarButton root, role="button", tabindex="0"),
-// not to `.toolbar-item-ctn`. ToolbarButton used to handle Enter with
+// inner `.sd-toolbar-item` (ToolbarButton root, role="button", tabindex="0"),
+// not to `.sd-toolbar-item-ctn`. ToolbarButton used to handle Enter with
 // `@keydown.enter.stop`, which silently swallowed the event before
 // ButtonGroup's roving-tabindex handler could see it. Pressing Enter on the
 // restored focus would emit `buttonClick` (no listener on the dropdown
@@ -180,7 +180,7 @@ describe('ButtonGroup dropdown keyboard activation', () => {
 //
 // Fix is the `allowEnterPropagation` prop on ToolbarButton: when true the
 // keydown handler does NOT stopPropagation, so Enter bubbles to
-// `.toolbar-item-ctn` and ButtonGroup.activateToolbarItem runs.
+// `.sd-toolbar-item-ctn` and ButtonGroup.activateToolbarItem runs.
 // Note: this only applies to non-split dropdown items. Split buttons
 // (bullet list / numbered list main button) call handleSplitMainClick on
 // Enter which itself stops propagation and runs the main command instead.
@@ -225,11 +225,11 @@ describe('ButtonGroup dropdown trigger keyboard activation (codex P2 regression)
       },
     });
 
-  it('Enter on the inner .toolbar-item bubbles up and opens the dropdown', async () => {
+  it('Enter on the inner .sd-toolbar-item bubbles up and opens the dropdown', async () => {
     const item = createFullDropdownItem('plain-match');
     wrapper = mountWithDropdownItem(item);
 
-    const innerItem = wrapper.find('.toolbar-dropdown-trigger .toolbar-item').element;
+    const innerItem = wrapper.find('.toolbar-dropdown-trigger .sd-toolbar-item').element;
     expect(innerItem.getAttribute('tabindex')).toBe('0');
     expect(innerItem.getAttribute('role')).toBe('button');
 
@@ -246,8 +246,8 @@ describe('ButtonGroup dropdown trigger keyboard activation (codex P2 regression)
     const item = createFullDropdownItem('plain-match');
     wrapper = mountWithDropdownItem(item);
 
-    const ctn = wrapper.find('.toolbar-item-ctn').element;
-    const innerItem = wrapper.find('.toolbar-dropdown-trigger .toolbar-item').element;
+    const ctn = wrapper.find('.sd-toolbar-item-ctn').element;
+    const innerItem = wrapper.find('.toolbar-dropdown-trigger .sd-toolbar-item').element;
 
     // Open the dropdown the way Tab + Enter does (focus on ctn).
     ctn.focus();
@@ -271,11 +271,11 @@ describe('ButtonGroup dropdown trigger keyboard activation (codex P2 regression)
     expect(item.expand.value).toBe(true);
   });
 
-  it('Space on the inner .toolbar-item also opens the dropdown (control)', async () => {
+  it('Space on the inner .sd-toolbar-item also opens the dropdown (control)', async () => {
     const item = createFullDropdownItem('plain-match');
     wrapper = mountWithDropdownItem(item);
 
-    const innerItem = wrapper.find('.toolbar-dropdown-trigger .toolbar-item').element;
+    const innerItem = wrapper.find('.toolbar-dropdown-trigger .sd-toolbar-item').element;
     innerItem.focus();
     innerItem.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
     await nextTick();
@@ -299,7 +299,7 @@ describe('ButtonGroup dropdown trigger keyboard activation (codex P2 regression)
     };
     wrapper = mountWithDropdownItem(item);
 
-    const innerItem = wrapper.find('.toolbar-dropdown-trigger .toolbar-item').element;
+    const innerItem = wrapper.find('.toolbar-dropdown-trigger .sd-toolbar-item').element;
     innerItem.focus();
     innerItem.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
     await nextTick();
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/ButtonGroup.vue b/packages/super-editor/src/editors/v1/components/toolbar/ButtonGroup.vue
index 7f0e5c5c33..2c9ae33188 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/ButtonGroup.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/ButtonGroup.vue
@@ -172,7 +172,7 @@ const dropdownOptions = (item) => {
       ...option,
       props: {
         ...option.props,
-        class: isSelected ? 'selected' : '',
+        class: isSelected ? 'sd-selected' : '',
       },
     };
   });
@@ -187,7 +187,7 @@ const getDropdownAttributes = (option, item) => {
 
 const moveToNextButton = (e) => {
   const currentButton = e.target;
-  const nextButton = e.target.closest('.toolbar-item-ctn').nextElementSibling;
+  const nextButton = e.target.closest('.sd-toolbar-item-ctn').nextElementSibling;
   if (nextButton) {
     currentButton.setAttribute('tabindex', '-1');
     nextButton.setAttribute('tabindex', '0');
@@ -197,7 +197,7 @@ const moveToNextButton = (e) => {
 
 const moveToPreviousButton = (e) => {
   const currentButton = e.target;
-  const previousButton = e.target.closest('.toolbar-item-ctn').previousElementSibling;
+  const previousButton = e.target.closest('.sd-toolbar-item-ctn').previousElementSibling;
   if (previousButton) {
     currentButton.setAttribute('tabindex', '-1');
     previousButton.setAttribute('tabindex', '0');
@@ -285,7 +285,7 @@ const handleKeyDown = (e, item) => {
 };
 const handleFocus = (e) => {
   // Set the focus to the first button inside the button group that is not disabled
-  const firstButton = toolbarItemRefs.value.find((item) => !item.classList.contains('disabled'));
+  const firstButton = toolbarItemRefs.value.find((item) => !item.classList.contains('sd-disabled'));
   if (firstButton) {
     firstButton.setAttribute('tabindex', '0');
     firstButton.focus();
@@ -351,10 +351,10 @@ onBeforeUnmount(() => {
       :class="{
         narrow: item.isNarrow.value,
         wide: item.isWide.value,
-        disabled: item.disabled.value,
+        'sd-disabled': item.disabled.value,
       }"
       @keydown="(e) => handleKeyDown(e, item)"
-      class="toolbar-item-ctn"
+      class="sd-toolbar-item-ctn"
       ref="toolbarItemRefs"
       :tabindex="index === 0 ? 0 : -1"
       :data-item-id="item.id.value"
@@ -370,7 +370,7 @@ onBeforeUnmount(() => {
         :show="getExpanded(item)"
         :content-style="{ fontFamily: props.uiFontFamily }"
         placement="bottom-start"
-        class="toolbar-button sd-editor-toolbar-dropdown"
+        class="sd-toolbar-button sd-editor-toolbar-dropdown"
         @select="(key, option) => handleSelect(item, option)"
         @update:show="(open) => handleDropdownUpdateShowForItem(open, item)"
         :style="item.dropdownStyles.value"
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/DocumentMode.vue b/packages/super-editor/src/editors/v1/components/toolbar/DocumentMode.vue
index aa2dbcaca6..5493aed7e3 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/DocumentMode.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/DocumentMode.vue
@@ -61,10 +61,10 @@ onMounted(() => {
 <template>
   <div class="document-mode" :class="{ 'high-contrast': isHighContrastMode }">
     <div
-      class="option-item"
+      class="sd-option-item"
       v-for="(option, index) in options"
       @click="handleClick(option)"
-      :class="{ disabled: option.disabled }"
+      :class="{ 'sd-disabled': option.disabled }"
       data-item="btn-documentMode-option"
       role="menuitem"
       ref="documentModeRefs"
@@ -100,7 +100,7 @@ onMounted(() => {
     fill: currentColor;
   }
 
-  .option-item {
+  .sd-option-item {
     display: flex;
     flex-direction: row;
     background-color: var(--sd-ui-dropdown-bg, #ffffff);
@@ -115,7 +115,7 @@ onMounted(() => {
   }
 
   &.high-contrast {
-    .option-item {
+    .sd-option-item {
       &:hover {
         background-color: #000;
         color: #fff;
@@ -135,7 +135,7 @@ onMounted(() => {
   }
 }
 
-.disabled {
+.sd-disabled {
   opacity: 0.5;
   cursor: not-allowed !important;
   pointer-events: none;
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/IconGridRow.vue b/packages/super-editor/src/editors/v1/components/toolbar/IconGridRow.vue
index 60dc7852d6..a61d15cdac 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/IconGridRow.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/IconGridRow.vue
@@ -107,9 +107,9 @@ const handleKeyDown = (event, rowIndex, optionIndex, option) => {
 };
 </script>
 <template>
-  <div class="option-row" v-for="(row, rowIndex) in icons" :key="rowIndex" role="group" ref="rowRefs">
+  <div class="sd-option-row" v-for="(row, rowIndex) in icons" :key="rowIndex" role="group" ref="rowRefs">
     <div
-      class="option"
+      class="sd-option"
       v-for="(option, optionIndex) in row"
       :key="optionIndex"
       :aria-label="option.label"
@@ -118,11 +118,11 @@ const handleKeyDown = (event, rowIndex, optionIndex, option) => {
       @click.stop.prevent="handleClick(option)"
       @keydown.prevent="(event) => handleKeyDown(event, rowIndex, optionIndex, option)"
     >
-      <div class="option__icon" v-html="option.icon" :style="option.style"></div>
+      <div class="sd-option__icon" v-html="option.icon" :style="option.style"></div>
 
       <div
         v-if="isActive(option)"
-        class="option__check"
+        class="sd-option__check"
         v-html="toolbarIcons.colorOptionCheck"
         :style="getCheckStyle(option.value, optionIndex)"
       ></div>
@@ -131,11 +131,11 @@ const handleKeyDown = (event, rowIndex, optionIndex, option) => {
 </template>
 
 <style scoped>
-.option-row {
+.sd-option-row {
   display: flex;
   flex-direction: row;
 }
-.option {
+.sd-option {
   border-radius: 50%;
   cursor: pointer;
   padding: 3px;
@@ -146,17 +146,17 @@ const handleKeyDown = (event, rowIndex, optionIndex, option) => {
   box-sizing: border-box;
 }
 
-.option:hover {
+.sd-option:hover {
   background-color: var(--sd-ui-dropdown-hover-bg, #d8dee5);
 }
 
-.option__icon {
+.sd-option__icon {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
 }
 
-.option__check {
+.sd-option__check {
   width: 14px;
   height: 14px;
   flex-shrink: 0;
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/LinkInput.test.js b/packages/super-editor/src/editors/v1/components/toolbar/LinkInput.test.js
index ae377b4c28..55183f92d4 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/LinkInput.test.js
+++ b/packages/super-editor/src/editors/v1/components/toolbar/LinkInput.test.js
@@ -741,7 +741,7 @@ describe('LinkInput - getLinkHrefAtSelection type safety and boundary checking',
 
       await nextTick();
 
-      expect(wrapper.find('.submit-btn').exists()).toBe(true);
+      expect(wrapper.find('.sd-submit-btn').exists()).toBe(true);
     });
 
     it('should show Remove button in editing mode when editing existing link', async () => {
@@ -787,7 +787,7 @@ describe('LinkInput - getLinkHrefAtSelection type safety and boundary checking',
 
       const openLinkBtn = wrapper.find('.open-link-icon');
       expect(openLinkBtn.exists()).toBe(true);
-      expect(openLinkBtn.classes()).not.toContain('disabled');
+      expect(openLinkBtn.classes()).not.toContain('sd-disabled');
     });
 
     it('should handle submit in editing mode', async () => {
@@ -916,7 +916,7 @@ describe('LinkInput - getLinkHrefAtSelection type safety and boundary checking',
       await nextTick();
 
       const openLinkBtn = wrapper.find('.open-link-icon');
-      expect(openLinkBtn.classes()).toContain('disabled');
+      expect(openLinkBtn.classes()).toContain('sd-disabled');
 
       wrapper.vm.handleSubmit();
       await openLinkBtn.trigger('click');
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/LinkInput.vue b/packages/super-editor/src/editors/v1/components/toolbar/LinkInput.vue
index e929080982..66bcd5c5d0 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/LinkInput.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/LinkInput.vue
@@ -258,7 +258,7 @@ const navigateToAnchor = (url) => {
           type="text"
           name="link"
           placeholder="Type or paste a link"
-          :class="{ error: urlError }"
+          :class="{ 'sd-error': urlError }"
           v-model="rawUrl"
           :readonly="isViewingMode"
           @keydown.enter.stop.prevent="handleSubmit"
@@ -267,7 +267,7 @@ const navigateToAnchor = (url) => {
 
         <div
           class="open-link-icon"
-          :class="{ disabled: !validUrl }"
+          :class="{ 'sd-disabled': !validUrl }"
           v-html="toolbarIcons.openLink"
           @click="openLink"
           data-item="btn-link-open"
@@ -279,7 +279,7 @@ const navigateToAnchor = (url) => {
           Remove
         </button>
         <button
-          class="submit-btn"
+          class="sd-submit-btn"
           @click="handleSubmit"
           :class="{ 'disable-btn': isDisabled }"
           data-item="btn-link-apply"
@@ -406,7 +406,7 @@ const navigateToAnchor = (url) => {
   height: 15px;
 }
 
-.disabled {
+.sd-disabled {
   opacity: 0.6;
   cursor: not-allowed;
   pointer-events: none;
@@ -477,7 +477,7 @@ const navigateToAnchor = (url) => {
   background-color: var(--sd-ui-hover-bg, #dbdbdb);
 }
 
-.submit-btn {
+.sd-submit-btn {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -500,12 +500,8 @@ const navigateToAnchor = (url) => {
   }
 }
 
-.error {
+.sd-error {
   border-color: red !important;
   background-color: #ff00001a;
 }
-
-.submit {
-  cursor: pointer;
-}
 </style>
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/SearchInput.vue b/packages/super-editor/src/editors/v1/components/toolbar/SearchInput.vue
index 55d7b85dab..d650e172fd 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/SearchInput.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/SearchInput.vue
@@ -17,7 +17,7 @@ const handleSubmit = () => {
 
 <template>
   <div class="search-input-ctn">
-    <div class="row">
+    <div class="sd-row">
       <input
         :ref="searchRef"
         v-model="searchValue"
@@ -28,8 +28,8 @@ const handleSubmit = () => {
         @keydown.enter.stop.prevent="handleSubmit"
       />
     </div>
-    <div class="row submit">
-      <button class="submit-btn" @click="handleSubmit">Apply</button>
+    <div class="sd-row sd-submit">
+      <button class="sd-submit-btn" @click="handleSubmit">Apply</button>
     </div>
   </div>
 </template>
@@ -57,15 +57,15 @@ const handleSubmit = () => {
     }
   }
 
-  .row {
+  .sd-row {
     display: flex;
-    &.submit {
+    &.sd-submit {
       margin-top: 10px;
       flex-direction: row-reverse;
     }
   }
 
-  .submit-btn {
+  .sd-submit-btn {
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/StyleButtonsList.vue b/packages/super-editor/src/editors/v1/components/toolbar/StyleButtonsList.vue
index ae52363778..6417f0458a 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/StyleButtonsList.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/StyleButtonsList.vue
@@ -79,8 +79,8 @@ onMounted(() => {
     <div
       v-for="(button, index) in props.buttons"
       :key="button.key"
-      class="button-icon"
-      :class="{ selected: props.selectedStyle === button.key }"
+      class="sd-button-icon"
+      :class="{ 'sd-selected': props.selectedStyle === button.key }"
       :style="iconStyle"
       @click="select(button.key)"
       v-html="button.icon"
@@ -100,7 +100,7 @@ onMounted(() => {
   padding: 8px;
   box-sizing: border-box;
 
-  .button-icon {
+  .sd-button-icon {
     cursor: pointer;
     padding: 5px;
     font-size: var(--sd-ui-font-size-600, 16px);
@@ -123,16 +123,16 @@ onMounted(() => {
       fill: currentColor;
     }
 
-    &.selected {
+    &.sd-selected {
       background-color: var(--sd-ui-dropdown-active-bg, #d8dee5);
       color: var(--sd-ui-dropdown-selected-text, #47484a);
     }
   }
 
   &.high-contrast {
-    .button-icon {
+    .sd-button-icon {
       &:hover,
-      &.selected {
+      &.sd-selected {
         background-color: #000;
         color: #fff;
       }
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/TableGrid.vue b/packages/super-editor/src/editors/v1/components/toolbar/TableGrid.vue
index 5aa1b591be..e48e957d98 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/TableGrid.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/TableGrid.vue
@@ -35,9 +35,9 @@ const selectGridItems = (allItems, cols, rows) => {
     let itemsRows = parseInt(item.dataset.rows, 10);
 
     if (itemsCols <= cols && itemsRows <= rows) {
-      item.classList.add('selected');
+      item.classList.add('sd-selected');
     } else {
-      item.classList.remove('selected');
+      item.classList.remove('sd-selected');
     }
   }
 };
@@ -162,7 +162,7 @@ onMounted(() => {
     transition: all 0.15s;
   }
 
-  .toolbar-table-grid__item.selected {
+  .toolbar-table-grid__item.sd-selected {
     background-color: var(--sd-ui-dropdown-hover-bg, #d8dee5);
   }
 
@@ -171,7 +171,7 @@ onMounted(() => {
       border-color: #000;
     }
 
-    .toolbar-table-grid__item.selected {
+    .toolbar-table-grid__item.sd-selected {
       background: #000;
     }
   }
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue b/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue
index d6dc0ca991..82e5165afa 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue
@@ -138,6 +138,7 @@ const handleToolbarMousedown = (e) => {
     :key="toolbarKey"
     role="toolbar"
     aria-label="Toolbar"
+    data-sd-part="toolbar"
     data-editor-ui-surface
     @mousedown="handleToolbarMousedown"
   >
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/ToolbarButton.vue b/packages/super-editor/src/editors/v1/components/toolbar/ToolbarButton.vue
index d1e9e7338f..f73ec83b19 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/ToolbarButton.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/ToolbarButton.vue
@@ -132,19 +132,20 @@ const caretIcon = computed(() => {
 
 <template>
   <div
-    :class="['toolbar-item', attributes.className]"
+    :class="['sd-toolbar-item', attributes.className]"
     :style="getStyle"
     :role="isOverflowItem ? 'menuitem' : 'button'"
     :aria-label="attributes.ariaLabel"
+    data-sd-part="toolbar-item"
     @click="handleOuterClick"
     @keydown.enter="onEnterKeydown($event)"
     tabindex="0"
   >
     <div
-      class="toolbar-button"
+      class="sd-toolbar-button"
       :class="{
-        active,
-        disabled,
+        'sd-active': active,
+        'sd-disabled': disabled,
         narrow: isNarrow,
         wide: isWide,
         split: isSplit,
@@ -155,31 +156,31 @@ const caretIcon = computed(() => {
     >
       <div
         v-if="isSplit"
-        class="toolbar-button__main"
+        class="sd-toolbar-button__main"
         :data-item="`btn-${name || ''}-main`"
         @click="handleSplitMainClick($event)"
       >
-        <ToolbarButtonIcon v-if="icon" :color="iconColor" class="toolbar-icon" :icon="icon" :name="name">
+        <ToolbarButtonIcon v-if="icon" :color="iconColor" class="sd-toolbar-icon" :icon="icon" :name="name">
         </ToolbarButtonIcon>
-        <div class="button-label" v-if="label && !hideLabel && !inlineTextInputVisible">
+        <div class="sd-button-label" v-if="label && !hideLabel && !inlineTextInputVisible">
           {{ label }}
         </div>
       </div>
       <div
         v-if="isSplit"
-        class="toolbar-button__caret"
+        class="sd-toolbar-button__caret"
         :data-item="`btn-${name || ''}-caret`"
         :aria-label="`${attributes.ariaLabel} options`"
         role="button"
       >
-        <div class="dropdown-caret" v-html="caretIcon" :style="{ opacity: disabled ? 0.6 : 1 }"></div>
+        <div class="sd-dropdown-caret" v-html="caretIcon" :style="{ opacity: disabled ? 0.6 : 1 }"></div>
       </div>
 
       <template v-else>
-        <ToolbarButtonIcon v-if="icon" :color="iconColor" class="toolbar-icon" :icon="icon" :name="name">
+        <ToolbarButtonIcon v-if="icon" :color="iconColor" class="sd-toolbar-icon" :icon="icon" :name="name">
         </ToolbarButtonIcon>
 
-        <div class="button-label" v-if="label && !hideLabel && !inlineTextInputVisible">
+        <div class="sd-button-label" v-if="label && !hideLabel && !inlineTextInputVisible">
           {{ label }}
         </div>
 
@@ -208,10 +209,15 @@ const caretIcon = computed(() => {
           />
         </span>
 
-        <div v-if="hasCaret" class="dropdown-caret" v-html="caretIcon" :style="{ opacity: disabled ? 0.6 : 1 }"></div>
+        <div
+          v-if="hasCaret"
+          class="sd-dropdown-caret"
+          v-html="caretIcon"
+          :style="{ opacity: disabled ? 0.6 : 1 }"
+        ></div>
       </template>
 
-      <div aria-live="polite" class="visually-hidden">
+      <div aria-live="polite" class="sd-visually-hidden">
         {{ `${attributes.ariaLabel} ${active ? 'selected' : 'unset'}` }}
       </div>
     </div>
@@ -219,14 +225,14 @@ const caretIcon = computed(() => {
 </template>
 
 <style scoped>
-.toolbar-item {
+.sd-toolbar-item {
   position: relative;
   z-index: 1;
   min-width: 30px;
   margin: 0 calc(var(--sd-ui-toolbar-item-gap, 2px) / 2);
 }
 
-.visually-hidden {
+.sd-visually-hidden {
   position: absolute;
   left: -9999px;
   height: 1px;
@@ -234,7 +240,7 @@ const caretIcon = computed(() => {
   overflow: hidden;
 }
 
-.toolbar-button {
+.sd-toolbar-button {
   padding: var(--sd-ui-toolbar-item-padding, 5px);
   height: var(--sd-ui-toolbar-height, 32px);
   max-height: var(--sd-ui-toolbar-height, 32px);
@@ -251,10 +257,10 @@ const caretIcon = computed(() => {
   box-sizing: border-box;
 }
 
-.toolbar-button:hover {
+.sd-toolbar-button:hover {
   background-color: var(--sd-ui-toolbar-button-hover-bg, var(--sd-ui-hover-bg, #dbdbdb));
 
-  .toolbar-icon {
+  .sd-toolbar-icon {
     &.high-contrast {
       color: #fff;
     }
@@ -266,12 +272,12 @@ const caretIcon = computed(() => {
   }
 }
 
-.toolbar-button:active,
-.active {
+.sd-toolbar-button:active,
+.sd-active {
   background-color: var(--sd-ui-toolbar-button-active-bg, var(--sd-ui-active-bg, #c8d0d8));
 }
 
-.button-label {
+.sd-button-label {
   overflow: hidden;
   width: 100%;
   text-align: center;
@@ -282,17 +288,17 @@ const caretIcon = computed(() => {
   margin: 5px;
 }
 
-.toolbar-icon + .dropdown-caret {
+.sd-toolbar-icon + .sd-dropdown-caret {
   margin-left: 4px;
 }
 
-.toolbar-button.split {
+.sd-toolbar-button.split {
   padding: 0;
   gap: 0;
 }
 
-.toolbar-button.split .toolbar-button__main,
-.toolbar-button.split .toolbar-button__caret {
+.sd-toolbar-button.split .sd-toolbar-button__main,
+.sd-toolbar-button.split .sd-toolbar-button__caret {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -302,13 +308,13 @@ const caretIcon = computed(() => {
   z-index: 1;
 }
 
-.toolbar-button.split .toolbar-button__main {
+.sd-toolbar-button.split .sd-toolbar-button__main {
   padding: 0 3px 0 var(--sd-ui-toolbar-item-padding, 5px);
   border-top-left-radius: var(--sd-ui-radius, 6px);
   border-bottom-left-radius: var(--sd-ui-radius, 6px);
 }
 
-.toolbar-button.split .toolbar-button__caret {
+.sd-toolbar-button.split .sd-toolbar-button__caret {
   padding: 0 4px 0 2px;
   border-top-right-radius: var(--sd-ui-radius, 6px);
   border-bottom-right-radius: var(--sd-ui-radius, 6px);
@@ -317,18 +323,18 @@ const caretIcon = computed(() => {
 /* Unified hover: hovering anywhere on the split button highlights the whole
    button so it reads as a single grouped item, with a slightly darker tint
    on the half the cursor is actually over. */
-.toolbar-button.split:hover {
+.sd-toolbar-button.split:hover {
   background-color: var(--sd-ui-toolbar-button-hover-bg, var(--sd-ui-hover-bg, #dbdbdb));
 }
 
-.toolbar-button.split .toolbar-button__main:hover,
-.toolbar-button.split .toolbar-button__caret:hover {
+.sd-toolbar-button.split .sd-toolbar-button__main:hover,
+.sd-toolbar-button.split .sd-toolbar-button__caret:hover {
   background-color: var(--sd-ui-toolbar-button-active-bg, var(--sd-ui-active-bg, #c8d0d8));
 }
 
 /* Subtle divider only appears on hover, hinting at the two affordances
    without making them look like separate buttons at rest. */
-.toolbar-button.split .toolbar-button__caret::before {
+.sd-toolbar-button.split .sd-toolbar-button__caret::before {
   content: '';
   position: absolute;
   left: 0;
@@ -339,26 +345,26 @@ const caretIcon = computed(() => {
   transition: background-color 0.15s ease-out;
 }
 
-.toolbar-button.split:hover .toolbar-button__caret::before {
+.sd-toolbar-button.split:hover .sd-toolbar-button__caret::before {
   background-color: var(--sd-ui-border, rgba(71, 72, 74, 0.2));
 }
 
-.toolbar-button.split.disabled,
-.toolbar-button.split.disabled:hover {
+.sd-toolbar-button.split.sd-disabled,
+.sd-toolbar-button.split.sd-disabled:hover {
   background-color: initial;
 }
 
-.toolbar-button.split.disabled .toolbar-button__main,
-.toolbar-button.split.disabled .toolbar-button__caret {
+.sd-toolbar-button.split.sd-disabled .sd-toolbar-button__main,
+.sd-toolbar-button.split.sd-disabled .sd-toolbar-button__caret {
   cursor: default;
 }
 
-.toolbar-button.split.disabled .toolbar-button__main:hover,
-.toolbar-button.split.disabled .toolbar-button__caret:hover {
+.sd-toolbar-button.split.sd-disabled .sd-toolbar-button__main:hover,
+.sd-toolbar-button.split.sd-disabled .sd-toolbar-button__caret:hover {
   background-color: initial;
 }
 
-.toolbar-button.split.disabled .toolbar-button__caret::before {
+.sd-toolbar-button.split.sd-disabled .sd-toolbar-button__caret::before {
   background-color: transparent;
 }
 
@@ -374,27 +380,20 @@ const caretIcon = computed(() => {
   cursor: text;
 }
 
-.disabled {
+.sd-disabled {
   cursor: default;
 }
 
-.disabled:hover {
+.sd-disabled:hover {
   cursor: default;
   background-color: initial;
 }
 
-.disabled .toolbar-icon,
-.disabled .caret,
-.disabled .button-label {
+.sd-disabled .sd-toolbar-icon,
+.sd-disabled .sd-button-label {
   opacity: 0.35;
 }
 
-.caret {
-  font-size: 1em;
-  padding-left: 2px;
-  padding-right: 2px;
-}
-
 .button-text-input {
   color: var(--sd-ui-toolbar-button-text, #47484a);
   border-radius: 4px;
@@ -422,7 +421,7 @@ const caretIcon = computed(() => {
   color: var(--sd-ui-toolbar-button-text, #47484a);
 }
 
-.dropdown-caret {
+.sd-dropdown-caret {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -432,19 +431,19 @@ const caretIcon = computed(() => {
   height: 10px;
 }
 
-.toolbar-item--doc-mode-compact .button-label {
+.sd-toolbar-item--doc-mode-compact .sd-button-label {
   display: none;
 }
 
-.toolbar-item--doc-mode-compact .toolbar-icon {
+.sd-toolbar-item--doc-mode-compact .sd-toolbar-icon {
   margin-right: 5px;
 }
 
-.toolbar-item--linked-styles-compact {
+.sd-toolbar-item--linked-styles-compact {
   width: auto !important;
 }
 
-.toolbar-item--linked-styles-compact .button-label {
+.sd-toolbar-item--linked-styles-compact .sd-button-label {
   display: none;
 }
 </style>
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/ToolbarButtonIcon.vue b/packages/super-editor/src/editors/v1/components/toolbar/ToolbarButtonIcon.vue
index d0f6739150..dcc9289a03 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/ToolbarButtonIcon.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/ToolbarButtonIcon.vue
@@ -27,21 +27,21 @@ const hasColorBar = computed(() => {
 </script>
 
 <template>
-  <div class="toolbar-icon">
-    <div class="toolbar-icon__icon" :class="[`toolbar-icon__icon--${props.name}`]" v-html="icon"></div>
+  <div class="sd-toolbar-icon">
+    <div class="sd-toolbar-icon__icon" :class="[`sd-toolbar-icon__icon--${props.name}`]" v-html="icon"></div>
     <div class="color-bar" v-if="hasColorBar" :style="getBarColor"></div>
   </div>
 </template>
 
 <style scoped>
-.toolbar-icon {
+.sd-toolbar-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
-.toolbar-icon__icon {
+.sd-toolbar-icon__icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -54,12 +54,12 @@ const hasColorBar = computed(() => {
   }
 }
 
-.toolbar-icon__icon :deep(svg) {
+.sd-toolbar-icon__icon :deep(svg) {
   width: auto; /* needed for safari */
   max-height: 16px;
 }
 
-.toolbar-icon__icon--color :deep(svg) {
+.sd-toolbar-icon__icon--color :deep(svg) {
   max-height: 14px;
   margin-top: -3px;
 }
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/ToolbarDropdown.test.js b/packages/super-editor/src/editors/v1/components/toolbar/ToolbarDropdown.test.js
index d2d862e1b3..ae1f67b05d 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/ToolbarDropdown.test.js
+++ b/packages/super-editor/src/editors/v1/components/toolbar/ToolbarDropdown.test.js
@@ -19,7 +19,7 @@ describe('ToolbarDropdown keyboard focus', () => {
       setup() {
         const show = ref(false);
         const options = [
-          { key: 'georgia', label: 'Georgia', props: { class: 'selected' } },
+          { key: 'georgia', label: 'Georgia', props: { class: 'sd-selected' } },
           { key: 'arial', label: 'Arial', props: {} },
           { key: 'courier', label: 'Courier New', props: {} },
         ];
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/ToolbarDropdown.vue b/packages/super-editor/src/editors/v1/components/toolbar/ToolbarDropdown.vue
index 5502a7d199..7ac0030fe5 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/ToolbarDropdown.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/ToolbarDropdown.vue
@@ -135,13 +135,13 @@ const renderIcon = (option) => {
 const classHasSelected = (value) => {
   if (!value) return false;
   if (typeof value === 'string') {
-    return value.split(/\s+/).includes('selected');
+    return value.split(/\s+/).includes('sd-selected');
   }
   if (Array.isArray(value)) {
     return value.some(classHasSelected);
   }
   if (typeof value === 'object') {
-    return Boolean(value.selected);
+    return Boolean(value['sd-selected']);
   }
   return false;
 };
@@ -376,19 +376,30 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="toolbar-dropdown">
-    <div ref="triggerRef" class="toolbar-dropdown-trigger" @click="onTriggerClick">
+    <div ref="triggerRef" class="toolbar-dropdown-trigger" data-sd-part="dropdown-trigger" @click="onTriggerClick">
       <slot name="trigger" />
     </div>
 
     <Teleport to="body">
       <Transition name="fade-in-scale-up-transition">
-        <div v-if="isOpen" ref="menuRef" :class="mergedMenuClass" :style="menuStyle" v-bind="computedMenuAttrs">
+        <div
+          v-if="isOpen"
+          ref="menuRef"
+          data-sd-part="dropdown-menu"
+          :class="mergedMenuClass"
+          :style="menuStyle"
+          v-bind="computedMenuAttrs"
+        >
           <div
             v-for="(option, index) in options"
             :key="option.key"
             :ref="(el) => setOptionRef(el, index)"
             class="toolbar-dropdown-option"
-            :class="[option.class, option.props?.class, { disabled: option.disabled, render: isRenderOption(option) }]"
+            :class="[
+              option.class,
+              option.props?.class,
+              { 'sd-disabled': option.disabled, 'sd-render': isRenderOption(option) },
+            ]"
             tabindex="-1"
             @click="onOptionClick(option)"
             v-bind="{ ...option.props, ...getNodeProps(option) }"
@@ -464,35 +475,35 @@ onBeforeUnmount(() => {
   color: var(--sd-ui-dropdown-hover-text, #47484a);
 }
 
-.toolbar-dropdown-option.selected {
+.toolbar-dropdown-option.sd-selected {
   background: var(--sd-ui-dropdown-active-bg, #d8dee5);
   color: var(--sd-ui-dropdown-selected-text, #47484a);
 }
 
-.toolbar-dropdown-menu.high-contrast .toolbar-dropdown-option:not(.render):hover {
+.toolbar-dropdown-menu.high-contrast .toolbar-dropdown-option:not(.sd-render):hover {
   background: #000;
   color: #fff;
 }
 
-.toolbar-dropdown-menu.high-contrast .toolbar-dropdown-option:not(.render).selected {
+.toolbar-dropdown-menu.high-contrast .toolbar-dropdown-option:not(.sd-render).sd-selected {
   background: #000;
   color: #fff;
 }
 
-.toolbar-dropdown-option.disabled {
+.toolbar-dropdown-option.sd-disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.toolbar-dropdown-option.render {
+.toolbar-dropdown-option.sd-render {
   padding: 0;
   cursor: default;
   background: transparent;
   color: inherit;
 }
 
-.toolbar-dropdown-option.render:hover,
-.toolbar-dropdown-option.render.selected {
+.toolbar-dropdown-option.sd-render:hover,
+.toolbar-dropdown-option.sd-render.sd-selected {
   background: transparent;
   color: inherit;
 }
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/defaultItems.js b/packages/super-editor/src/editors/v1/components/toolbar/defaultItems.js
index 26c606e4a3..3c5159c5be 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/defaultItems.js
+++ b/packages/super-editor/src/editors/v1/components/toolbar/defaultItems.js
@@ -895,7 +895,7 @@ export const makeDefaultItems = ({
     disabled: role !== 'editor',
     attributes: {
       dropdownPosition: 'right',
-      className: 'toolbar-item--doc-mode',
+      className: 'sd-toolbar-item--doc-mode',
       ariaLabel: 'Document mode',
     },
     options: [
@@ -994,7 +994,7 @@ export const makeDefaultItems = ({
     suppressActiveHighlight: true,
     disabled: false,
     attributes: {
-      className: 'toolbar-item--linked-styles',
+      className: 'sd-toolbar-item--linked-styles',
       ariaLabel: 'Linked styles',
     },
     options: [
@@ -1091,14 +1091,14 @@ export const makeDefaultItems = ({
   if (shouldUseLgCompactStyles) {
     documentMode.attributes.value = {
       ...documentMode.attributes.value,
-      className: `${documentMode.attributes.value.className} toolbar-item--doc-mode-compact`,
+      className: `${documentMode.attributes.value.className} sd-toolbar-item--doc-mode-compact`,
     };
   }
 
   if (shouldUseLgCompactStyles) {
     linkedStyles.attributes.value = {
       ...linkedStyles.attributes.value,
-      className: `${linkedStyles.attributes.value.className} toolbar-item--linked-styles-compact`,
+      className: `${linkedStyles.attributes.value.className} sd-toolbar-item--linked-styles-compact`,
     };
   }
 
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/defaultItems.test.js b/packages/super-editor/src/editors/v1/components/toolbar/defaultItems.test.js
index 6f1da73deb..c853071989 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/defaultItems.test.js
+++ b/packages/super-editor/src/editors/v1/components/toolbar/defaultItems.test.js
@@ -121,8 +121,8 @@ describe('makeDefaultItems LG compact styles', () => {
     const documentMode = getItem(defaultItems, overflowItems, 'documentMode');
     const linkedStyles = getItem(defaultItems, overflowItems, 'linkedStyles');
 
-    expect(documentMode.attributes.value.className).toContain('toolbar-item--doc-mode-compact');
-    expect(linkedStyles.attributes.value.className).toContain('toolbar-item--linked-styles-compact');
+    expect(documentMode.attributes.value.className).toContain('sd-toolbar-item--doc-mode-compact');
+    expect(linkedStyles.attributes.value.className).toContain('sd-toolbar-item--linked-styles-compact');
   });
 
   it(`does not apply compact classes at ${LG_BREAKPOINT + 1}px (above breakpoint)`, () => {
@@ -130,8 +130,8 @@ describe('makeDefaultItems LG compact styles', () => {
     const documentMode = getItem(defaultItems, overflowItems, 'documentMode');
     const linkedStyles = getItem(defaultItems, overflowItems, 'linkedStyles');
 
-    expect(documentMode.attributes.value.className).not.toContain('toolbar-item--doc-mode-compact');
-    expect(linkedStyles.attributes.value.className).not.toContain('toolbar-item--linked-styles-compact');
+    expect(documentMode.attributes.value.className).not.toContain('sd-toolbar-item--doc-mode-compact');
+    expect(linkedStyles.attributes.value.className).not.toContain('sd-toolbar-item--linked-styles-compact');
   });
 });
 
diff --git a/packages/super-editor/src/editors/v1/extensions/custom-selection/custom-selection.js b/packages/super-editor/src/editors/v1/extensions/custom-selection/custom-selection.js
index 2b6515bb9c..5d238d4181 100644
--- a/packages/super-editor/src/editors/v1/extensions/custom-selection/custom-selection.js
+++ b/packages/super-editor/src/editors/v1/extensions/custom-selection/custom-selection.js
@@ -144,7 +144,12 @@ const isToolbarInput = (target) => {
  * @returns {boolean} True if toolbar button
  */
 const isToolbarButton = (target) => {
-  return !!target?.closest('.toolbar-button') || target?.classList?.contains('toolbar-button');
+  return (
+    !!target?.closest('.sd-toolbar-button') ||
+    !!target?.closest('.toolbar-button') ||
+    target?.classList?.contains('sd-toolbar-button') ||
+    target?.classList?.contains('toolbar-button')
+  );
 };
 
 /**
diff --git a/packages/super-editor/src/editors/v1/tests/css-no-bleed.test.js b/packages/super-editor/src/editors/v1/tests/css-no-bleed.test.js
index e77fbf9697..074ba00587 100644
--- a/packages/super-editor/src/editors/v1/tests/css-no-bleed.test.js
+++ b/packages/super-editor/src/editors/v1/tests/css-no-bleed.test.js
@@ -11,6 +11,8 @@ import { resolve, join } from 'path';
  */
 
 const SUPER_EDITOR_STYLES_DIR = resolve(__dirname, '../assets/styles');
+const SUPER_EDITOR_V1_DIR = resolve(__dirname, '..');
+const SUPERDOC_COMPONENTS_DIR = resolve(__dirname, '../../../../../superdoc/src/components');
 
 /**
  * Recursively find all .css files in a directory.
@@ -28,6 +30,33 @@ function findCssFiles(dir, prefix = '') {
   return results;
 }
 
+function findVueFiles(dir, prefix = '') {
+  const results = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const rel = prefix ? `${prefix}/${entry.name}` : entry.name;
+    if (entry.isDirectory()) {
+      results.push(...findVueFiles(join(dir, entry.name), rel));
+    } else if (entry.name.endsWith('.vue')) {
+      results.push(rel);
+    }
+  }
+  return results;
+}
+
+function extractStyleBlocks(vueText) {
+  const blocks = [];
+  const styleTagPattern = /<style\b[^>]*>([\s\S]*?)<\/style>/gi;
+  let match;
+  while ((match = styleTagPattern.exec(vueText)) !== null) {
+    blocks.push(match[1] ?? '');
+  }
+  return blocks;
+}
+
+function escapeRegExp(text) {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
 /**
  * Parse top-level CSS selectors from a CSS file string.
  * Returns an array of selector strings (only top-level, not inside @media/@keyframes).
@@ -258,4 +287,71 @@ describe('CSS Bleed Prevention (SD-1850)', () => {
       );
     }
   });
+
+  it('should not reintroduce legacy un-namespaced class names in Vue SFC styles', () => {
+    const vueTargets = [
+      { root: SUPER_EDITOR_V1_DIR, label: 'super-editor' },
+      { root: SUPERDOC_COMPONENTS_DIR, label: 'superdoc' },
+    ];
+    const blockedClassNames = [
+      '.button-icon',
+      '.toolbar-item',
+      '.button-label',
+      '.dropdown-caret',
+      '.disabled',
+      '.is-disabled',
+      '.active',
+      '.selected',
+      '.error',
+      '.row',
+      '.submit',
+      '.submit-btn',
+      '.option',
+      '.option-row',
+      '.option-item',
+      '.option-state',
+      '.toolbar-button',
+      '.toolbar-icon',
+      '.caret',
+      '.visually-hidden',
+    ];
+    const allowlistedLegacyClassUsages = new Set([
+      // pdf.js applies `.selected` on text-layer highlights; keep compatibility.
+      'superdoc/PdfViewer/PdfViewerPage.vue::.selected',
+    ]);
+    const violations = [];
+
+    for (const target of vueTargets) {
+      const vueFiles = findVueFiles(target.root);
+      for (const file of vueFiles) {
+        const fullPath = join(target.root, file);
+        const vueText = readFileSync(fullPath, 'utf8');
+        const styleBlocks = extractStyleBlocks(vueText);
+
+        for (const block of styleBlocks) {
+          for (const blocked of blockedClassNames) {
+            const blockedPattern = new RegExp(`${escapeRegExp(blocked)}(?![\\w-])`);
+            if (blockedPattern.test(block)) {
+              const allowlistKey = `${target.label}/${file}::${blocked}`;
+              if (allowlistedLegacyClassUsages.has(allowlistKey)) {
+                continue;
+              }
+              violations.push({
+                file: `${target.label}/${file}`,
+                blocked,
+              });
+              break;
+            }
+          }
+        }
+      }
+    }
+
+    if (violations.length > 0) {
+      const message = violations.map((v) => `  ${v.file}: contains legacy "${v.blocked}"`).join('\n');
+      expect.fail(
+        `Found legacy un-namespaced class names in Vue SFC styles:\n${message}\n\nUse sd-* class names instead.`,
+      );
+    }
+  });
 });
diff --git a/packages/superdoc/src/assets/styles/elements/superdoc.css b/packages/superdoc/src/assets/styles/elements/superdoc.css
index eff079537d..971dc46fb7 100644
--- a/packages/superdoc/src/assets/styles/elements/superdoc.css
+++ b/packages/superdoc/src/assets/styles/elements/superdoc.css
@@ -5,11 +5,6 @@
   fill: currentColor;
 }
 
-/* Override global svg styles above for AI Writer error state */
-.superdoc .ai-textarea-icon.error > svg {
-  fill: #ed4337;
-}
-
 /* Web Layout Mode (OOXML ST_View 'web') - content reflows to container width */
 .superdoc--web-layout,
 .superdoc--web-layout .superdoc__layers,
diff --git a/packages/superdoc/src/assets/styles/layout/global.css b/packages/superdoc/src/assets/styles/layout/global.css
index 10b7e63a10..40ab583d80 100644
--- a/packages/superdoc/src/assets/styles/layout/global.css
+++ b/packages/superdoc/src/assets/styles/layout/global.css
@@ -7,9 +7,9 @@
   box-sizing: border-box;
 }
 
-.superdoc .disabled,
-.super-editor .disabled,
-.superdoc-toolbar .disabled {
+.superdoc .sd-disabled,
+.super-editor .sd-disabled,
+.superdoc-toolbar .sd-disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
index 58f861ef48..ebb6b05386 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
@@ -778,6 +778,7 @@ watch(editingCommentId, (commentId) => {
     :style="getSidebarCommentStyle"
     ref="commentDialogElement"
     role="dialog"
+    data-sd-part="comment-thread"
     data-editor-ui-surface
     :data-comment-instance-id="props.floatingInstanceId ?? ''"
     :data-comment-thread-id="props.comment.commentId ?? ''"
@@ -789,7 +790,7 @@ watch(editingCommentId, (commentId) => {
       <div v-if="shouldShowInternalExternal" class="existing-internal-input">
         <InternalDropdown
           @click.stop.prevent
-          class="internal-dropdown"
+          class="sd-internal-dropdown"
           :is-disabled="false"
           :state="pendingComment.isInternal ? 'internal' : 'external'"
           @select="handleInternalExternalSelect"
@@ -813,7 +814,7 @@ watch(editingCommentId, (commentId) => {
           class="sd-button primary reply-btn-primary"
           @click.stop.prevent="handleAddComment"
           :disabled="!hasTextContent"
-          :class="{ 'is-disabled': !hasTextContent }"
+          :class="{ 'sd-is-disabled': !hasTextContent }"
         >
           Comment
         </button>
@@ -831,7 +832,7 @@ watch(editingCommentId, (commentId) => {
       <div v-if="shouldShowInternalExternal" class="existing-internal-input">
         <InternalDropdown
           @click.stop.prevent
-          class="internal-dropdown"
+          class="sd-internal-dropdown"
           :is-disabled="isInternalDropdownDisabled"
           :state="comment.isInternal ? 'internal' : 'external'"
           @select="handleInternalExternalSelect"
@@ -929,7 +930,7 @@ watch(editingCommentId, (commentId) => {
                 class="sd-button primary reply-btn-primary"
                 @click.stop.prevent="handleCommentUpdate(comment)"
                 :disabled="!hasTextContent"
-                :class="{ 'is-disabled': !hasTextContent }"
+                :class="{ 'sd-is-disabled': !hasTextContent }"
               >
                 Update
               </button>
@@ -989,7 +990,7 @@ watch(editingCommentId, (commentId) => {
               class="sd-button primary reply-btn-primary"
               @click.stop.prevent="handleAddComment"
               :disabled="!hasTextContent"
-              :class="{ 'is-disabled': !hasTextContent }"
+              :class="{ 'sd-is-disabled': !hasTextContent }"
             >
               Reply
             </button>
@@ -1257,7 +1258,7 @@ watch(editingCommentId, (commentId) => {
 .reply-btn-primary:hover {
   background: var(--sd-ui-action-hover, #0f44cc);
 }
-.reply-btn-primary.is-disabled {
+.reply-btn-primary.sd-is-disabled {
   background: var(--sd-color-gray-400, #dbdbdb);
   color: var(--sd-color-gray-600, #888888);
   cursor: default;
@@ -1268,7 +1269,7 @@ watch(editingCommentId, (commentId) => {
   margin-bottom: 10px;
 }
 
-.internal-dropdown {
+.sd-internal-dropdown {
   display: inline-block;
 }
 </style>
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentsDropdown.vue b/packages/superdoc/src/components/CommentsLayer/CommentsDropdown.vue
index a6bbd3d911..58565f330f 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentsDropdown.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentsDropdown.vue
@@ -150,7 +150,7 @@ onBeforeUnmount(() => {
           v-for="option in options"
           :key="option.key"
           class="comments-dropdown__option"
-          :class="{ disabled: option.disabled }"
+          :class="{ 'sd-disabled': option.disabled }"
           @click="onOptionClick(option)"
         >
           <span v-if="hasIcon(option)" class="comments-dropdown__option-icon">
@@ -201,7 +201,7 @@ onBeforeUnmount(() => {
   color: var(--sd-ui-comments-option-hover-text, #212121);
 }
 
-.comments-dropdown__option.disabled {
+.comments-dropdown__option.sd-disabled {
   opacity: 0.5;
   pointer-events: none;
 }
diff --git a/packages/superdoc/src/components/CommentsLayer/InternalDropdown.vue b/packages/superdoc/src/components/CommentsLayer/InternalDropdown.vue
index 38ecc5c3f3..2dd952251e 100644
--- a/packages/superdoc/src/components/CommentsLayer/InternalDropdown.vue
+++ b/packages/superdoc/src/components/CommentsLayer/InternalDropdown.vue
@@ -76,36 +76,36 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="internal-dropdown" :style="getStyle">
+  <div class="sd-internal-dropdown" :style="getStyle" data-sd-part="dropdown-trigger">
     <CommentsDropdown
       :options="options"
       @select="handleSelect($event)"
       :disabled="isDisabled"
       :content-style="{ fontFamily: uiFontFamily }"
     >
-      <div class="comment-option">
-        <div class="active-icon" v-html="activeIcon"></div>
-        <div class="option-state">{{ getState }}</div>
-        <div class="dropdown-caret" v-html="superdocIcons.caretDown"></div>
+      <div class="sd-comment-option">
+        <div class="sd-active-icon" v-html="activeIcon"></div>
+        <div class="sd-option-state">{{ getState }}</div>
+        <div class="sd-dropdown-caret" v-html="superdocIcons.caretDown"></div>
       </div>
     </CommentsDropdown>
   </div>
 </template>
 
 <style scoped>
-.comment-option {
+.sd-comment-option {
   display: flex;
   align-items: center;
   font-size: 11px;
 }
-.comment-option i {
+.sd-comment-option i {
   font-size: 11px;
 }
-.option-state {
+.sd-option-state {
   margin: 0 7px;
 }
 
-.active-icon {
+.sd-active-icon {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -114,14 +114,14 @@ onMounted(() => {
   height: 16px;
 }
 
-.active-icon :deep(svg) {
+.sd-active-icon :deep(svg) {
   width: 100%;
   height: 100%;
   display: block;
   fill: currentColor;
 }
 
-.dropdown-caret {
+.sd-dropdown-caret {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -130,21 +130,21 @@ onMounted(() => {
   height: 16px;
 }
 
-.dropdown-caret :deep(svg) {
+.sd-dropdown-caret :deep(svg) {
   width: 100%;
   height: 100%;
   display: block;
   fill: currentColor;
 }
 
-.internal-dropdown {
+.sd-internal-dropdown {
   transition: all 250ms ease;
   display: inline-flex;
   cursor: pointer;
   border-radius: 50px;
   padding: 2px 8px;
 }
-.internal-dropdown:hover {
+.sd-internal-dropdown:hover {
   background-color: #f3f3f5;
 }
 </style>
diff --git a/tests/behavior/tests/comments/reject-format-suggestion.spec.ts b/tests/behavior/tests/comments/reject-format-suggestion.spec.ts
index d0b23b4d85..ce194ec951 100644
--- a/tests/behavior/tests/comments/reject-format-suggestion.spec.ts
+++ b/tests/behavior/tests/comments/reject-format-suggestion.spec.ts
@@ -172,7 +172,7 @@ for (const tc of ALL_CASES) {
     if (tc.restoredFontFamily) {
       await superdoc.selectAll();
       await superdoc.waitForStable();
-      await expect(superdoc.page.locator('[data-item="btn-fontFamily"] .button-label')).toHaveText(
+      await expect(superdoc.page.locator('[data-item="btn-fontFamily"] .sd-button-label')).toHaveText(
         tc.restoredFontFamily,
       );
     }
diff --git a/tests/behavior/tests/formatting/apply-font.spec.ts b/tests/behavior/tests/formatting/apply-font.spec.ts
index 1b5926f3a5..c94a280327 100644
--- a/tests/behavior/tests/formatting/apply-font.spec.ts
+++ b/tests/behavior/tests/formatting/apply-font.spec.ts
@@ -33,7 +33,7 @@ test('apply Courier New font to selected text in loaded document', async ({ supe
   await superdoc.assertTextContains(originalText.substring(0, 20));
 
   // Verify font applied via toolbar state for the current selection.
-  await expect(superdoc.page.locator('[data-item="btn-fontFamily"] .button-label')).toHaveText('Courier New');
+  await expect(superdoc.page.locator('[data-item="btn-fontFamily"] .sd-button-label')).toHaveText('Courier New');
 
   await superdoc.snapshot('apply-font-courier');
 });
diff --git a/tests/behavior/tests/formatting/toggle-formatting-off.spec.ts b/tests/behavior/tests/formatting/toggle-formatting-off.spec.ts
index 21315c3a52..88a7142529 100644
--- a/tests/behavior/tests/formatting/toggle-formatting-off.spec.ts
+++ b/tests/behavior/tests/formatting/toggle-formatting-off.spec.ts
@@ -46,8 +46,8 @@ test('toggle bold off retains other formatting', async ({ superdoc }) => {
   await superdoc.type('hello italic');
   await superdoc.waitForStable();
 
-  await expect(superdoc.page.locator('[data-item="btn-italic"]')).toHaveClass(/active/);
-  await expect(superdoc.page.locator('[data-item="btn-bold"]')).not.toHaveClass(/active/);
+  await expect(superdoc.page.locator('[data-item="btn-italic"]')).toHaveClass(/sd-active/);
+  await expect(superdoc.page.locator('[data-item="btn-bold"]')).not.toHaveClass(/sd-active/);
 
   await superdoc.snapshot('toggle-formatting-off');
 });
diff --git a/tests/behavior/tests/lists/bullet-style-export.spec.ts b/tests/behavior/tests/lists/bullet-style-export.spec.ts
index 799b50b831..ee57be67c6 100644
--- a/tests/behavior/tests/lists/bullet-style-export.spec.ts
+++ b/tests/behavior/tests/lists/bullet-style-export.spec.ts
@@ -3,7 +3,7 @@ import JSZip from 'jszip';
 
 test.use({ config: { toolbar: 'full' } });
 
-const BULLET_DROPDOWN_CARET = '[aria-label="Bullet list"] .dropdown-caret';
+const BULLET_DROPDOWN_CARET = '[aria-label="Bullet list"] .sd-dropdown-caret';
 const STYLE_OPTION = (label: string) => `.style-buttons-list [aria-label="${label}"]`;
 
 const STYLE_LABEL = {
diff --git a/tests/behavior/tests/lists/bullet-style-picker.spec.ts b/tests/behavior/tests/lists/bullet-style-picker.spec.ts
index 2e86946b07..da0c0f2830 100644
--- a/tests/behavior/tests/lists/bullet-style-picker.spec.ts
+++ b/tests/behavior/tests/lists/bullet-style-picker.spec.ts
@@ -3,7 +3,7 @@ import { LIST_MARKER_SELECTOR, getParagraphNumberingByText } from '../../helpers
 
 test.use({ config: { toolbar: 'full' } });
 
-const BULLET_DROPDOWN_CARET = '[aria-label="Bullet list"] .dropdown-caret';
+const BULLET_DROPDOWN_CARET = '[aria-label="Bullet list"] .sd-dropdown-caret';
 const STYLE_OPTION = (label: string) => `.style-buttons-list [aria-label="${label}"]`;
 
 const STYLE_LABEL = {
diff --git a/tests/behavior/tests/lists/bullet-style-undo-redo.spec.ts b/tests/behavior/tests/lists/bullet-style-undo-redo.spec.ts
index f6b70d9a9d..c880452eb1 100644
--- a/tests/behavior/tests/lists/bullet-style-undo-redo.spec.ts
+++ b/tests/behavior/tests/lists/bullet-style-undo-redo.spec.ts
@@ -2,7 +2,7 @@ import { test, expect, type SuperDocFixture } from '../../fixtures/superdoc.js';
 
 test.use({ config: { toolbar: 'full' } });
 
-const BULLET_DROPDOWN_CARET = '[aria-label="Bullet list"] .dropdown-caret';
+const BULLET_DROPDOWN_CARET = '[aria-label="Bullet list"] .sd-dropdown-caret';
 const STYLE_OPTION = (label: string) => `.style-buttons-list [aria-label="${label}"]`;
 
 const STYLE_LABEL = {
diff --git a/tests/behavior/tests/lists/list-style-changes.spec.ts b/tests/behavior/tests/lists/list-style-changes.spec.ts
index b23f33a6ff..6a564f7be5 100644
--- a/tests/behavior/tests/lists/list-style-changes.spec.ts
+++ b/tests/behavior/tests/lists/list-style-changes.spec.ts
@@ -73,8 +73,8 @@ test.describe('PR-2873 list style changes', () => {
       await superdoc.waitForStable();
       await placeCursorIn(superdoc, 'item');
 
-      await expect(superdoc.page.locator('[data-item="btn-list"]').first()).toHaveClass(/active/);
-      await expect(superdoc.page.locator('[data-item="btn-numberedlist"]').first()).not.toHaveClass(/active/);
+      await expect(superdoc.page.locator('[data-item="btn-list"]').first()).toHaveClass(/sd-active/);
+      await expect(superdoc.page.locator('[data-item="btn-numberedlist"]').first()).not.toHaveClass(/sd-active/);
     });
 
     test('numbered list button is active when caret is in an ordered list', async ({ superdoc }) => {
@@ -83,16 +83,16 @@ test.describe('PR-2873 list style changes', () => {
       await superdoc.waitForStable();
       await placeCursorIn(superdoc, 'item');
 
-      await expect(superdoc.page.locator('[data-item="btn-numberedlist"]').first()).toHaveClass(/active/);
-      await expect(superdoc.page.locator('[data-item="btn-list"]').first()).not.toHaveClass(/active/);
+      await expect(superdoc.page.locator('[data-item="btn-numberedlist"]').first()).toHaveClass(/sd-active/);
+      await expect(superdoc.page.locator('[data-item="btn-list"]').first()).not.toHaveClass(/sd-active/);
     });
 
     test('neither button is active when caret is on a plain paragraph', async ({ superdoc }) => {
       await superdoc.type('plain');
       await superdoc.waitForStable();
 
-      await expect(superdoc.page.locator('[data-item="btn-list"]').first()).not.toHaveClass(/active/);
-      await expect(superdoc.page.locator('[data-item="btn-numberedlist"]').first()).not.toHaveClass(/active/);
+      await expect(superdoc.page.locator('[data-item="btn-list"]').first()).not.toHaveClass(/sd-active/);
+      await expect(superdoc.page.locator('[data-item="btn-numberedlist"]').first()).not.toHaveClass(/sd-active/);
     });
   });
 
diff --git a/tests/behavior/tests/tables/add-row-formatting.spec.ts b/tests/behavior/tests/tables/add-row-formatting.spec.ts
index 3ca0b8dc0d..1686e26d51 100644
--- a/tests/behavior/tests/tables/add-row-formatting.spec.ts
+++ b/tests/behavior/tests/tables/add-row-formatting.spec.ts
@@ -11,7 +11,7 @@ test('adding a row after bold cell preserves formatting in new row', async ({ su
   await superdoc.type('Bold header');
   await superdoc.waitForStable();
 
-  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/active/);
+  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/sd-active/);
 
   // Add a row after the current one
   await superdoc.executeCommand('addRowAfter');
@@ -26,5 +26,5 @@ test('adding a row after bold cell preserves formatting in new row', async ({ su
   await superdoc.assertTextContains('Bold header');
 
   // The new text inherits bold from the row it was cloned from.
-  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/active/);
+  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/sd-active/);
 });
diff --git a/tests/behavior/tests/toolbar/basic-styles.spec.ts b/tests/behavior/tests/toolbar/basic-styles.spec.ts
index 938f394ff0..92e3b96499 100644
--- a/tests/behavior/tests/toolbar/basic-styles.spec.ts
+++ b/tests/behavior/tests/toolbar/basic-styles.spec.ts
@@ -28,7 +28,7 @@ test('bold button applies bold', async ({ superdoc }) => {
   await boldButton.click();
   await superdoc.waitForStable();
 
-  await expect(boldButton).toHaveClass(/active/);
+  await expect(boldButton).toHaveClass(/sd-active/);
   await superdoc.snapshot('bold applied');
 
   await superdoc.assertTextHasMarks('is a sentence', ['bold']);
@@ -42,7 +42,7 @@ test('italic button applies italic', async ({ superdoc }) => {
   await italicButton.click();
   await superdoc.waitForStable();
 
-  await expect(italicButton).toHaveClass(/active/);
+  await expect(italicButton).toHaveClass(/sd-active/);
   await superdoc.snapshot('italic applied');
 
   await superdoc.assertTextHasMarks('is a sentence', ['italic']);
@@ -56,7 +56,7 @@ test('underline button applies underline', async ({ superdoc }) => {
   await underlineButton.click();
   await superdoc.waitForStable();
 
-  await expect(underlineButton).toHaveClass(/active/);
+  await expect(underlineButton).toHaveClass(/sd-active/);
   await superdoc.snapshot('underline applied');
 
   await superdoc.assertTextHasMarks('is a sentence', ['underline']);
@@ -70,7 +70,7 @@ test('strikethrough button applies strike', async ({ superdoc }) => {
   await strikeButton.click();
   await superdoc.waitForStable();
 
-  await expect(strikeButton).toHaveClass(/active/);
+  await expect(strikeButton).toHaveClass(/sd-active/);
   await superdoc.snapshot('strikethrough applied');
 
   await superdoc.assertTextHasMarks('is a sentence', ['strike']);
@@ -92,7 +92,7 @@ test('font family dropdown changes font', async ({ superdoc }) => {
   await superdoc.waitForStable();
 
   // Assert the toolbar displays "Georgia"
-  await expect(fontButton.locator('.button-label')).toHaveText('Georgia');
+  await expect(fontButton.locator('.sd-button-label')).toHaveText('Georgia');
   await superdoc.snapshot('Georgia font applied');
 
   await superdoc.assertTextMarkAttrs('is a sentence', 'textStyle', { fontFamily: 'Georgia' });
@@ -132,7 +132,7 @@ test('color dropdown changes text color', async ({ superdoc }) => {
   await superdoc.snapshot('color dropdown open');
 
   // Click the red color swatch (#D2003F)
-  const redSwatch = superdoc.page.locator('.option[aria-label="red"]').first();
+  const redSwatch = superdoc.page.locator('.sd-option[aria-label="red"]').first();
   await redSwatch.click();
   await superdoc.waitForStable();
 
@@ -155,7 +155,7 @@ test('highlight dropdown changes background color', async ({ superdoc }) => {
   await superdoc.snapshot('highlight dropdown open');
 
   // Click a highlight color swatch (#ECCF35)
-  const yellowSwatch = superdoc.page.locator('.option[aria-label="yellow"]').first();
+  const yellowSwatch = superdoc.page.locator('.sd-option[aria-label="yellow"]').first();
   await yellowSwatch.click();
   await superdoc.waitForStable();
 
diff --git a/tests/behavior/tests/toolbar/composite-styles.spec.ts b/tests/behavior/tests/toolbar/composite-styles.spec.ts
index 35a9397d72..63d8445bb3 100644
--- a/tests/behavior/tests/toolbar/composite-styles.spec.ts
+++ b/tests/behavior/tests/toolbar/composite-styles.spec.ts
@@ -28,7 +28,7 @@ async function selectDropdownOption(superdoc: SuperDocFixture, dataItem: string,
 async function selectColorSwatch(superdoc: SuperDocFixture, dataItem: string, label: string): Promise<void> {
   await superdoc.page.locator(`[data-item="btn-${dataItem}"]`).click();
   await superdoc.waitForStable();
-  await superdoc.page.locator(`.option[aria-label="${label}"]`).first().click();
+  await superdoc.page.locator(`.sd-option[aria-label="${label}"]`).first().click();
   await superdoc.waitForStable();
 }
 
@@ -41,8 +41,8 @@ test('bold + italic', async ({ superdoc }) => {
   await clickToolbarButton(superdoc, 'bold');
   await clickToolbarButton(superdoc, 'italic');
 
-  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/active/);
-  await expect(superdoc.page.locator('[data-item="btn-italic"]')).toHaveClass(/active/);
+  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/sd-active/);
+  await expect(superdoc.page.locator('[data-item="btn-italic"]')).toHaveClass(/sd-active/);
   await superdoc.snapshot('bold + italic applied');
 
   await superdoc.assertTextHasMarks('is a sentence', ['bold', 'italic']);
@@ -55,8 +55,8 @@ test('bold + underline', async ({ superdoc }) => {
   await clickToolbarButton(superdoc, 'bold');
   await clickToolbarButton(superdoc, 'underline');
 
-  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/active/);
-  await expect(superdoc.page.locator('[data-item="btn-underline"]')).toHaveClass(/active/);
+  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/sd-active/);
+  await expect(superdoc.page.locator('[data-item="btn-underline"]')).toHaveClass(/sd-active/);
   await superdoc.snapshot('bold + underline applied');
 
   await superdoc.assertTextHasMarks('is a sentence', ['bold', 'underline']);
@@ -69,8 +69,8 @@ test('italic + strikethrough', async ({ superdoc }) => {
   await clickToolbarButton(superdoc, 'italic');
   await clickToolbarButton(superdoc, 'strike');
 
-  await expect(superdoc.page.locator('[data-item="btn-italic"]')).toHaveClass(/active/);
-  await expect(superdoc.page.locator('[data-item="btn-strike"]')).toHaveClass(/active/);
+  await expect(superdoc.page.locator('[data-item="btn-italic"]')).toHaveClass(/sd-active/);
+  await expect(superdoc.page.locator('[data-item="btn-strike"]')).toHaveClass(/sd-active/);
   await superdoc.snapshot('italic + strikethrough applied');
 
   await superdoc.assertTextHasMarks('is a sentence', ['italic', 'strike']);
@@ -87,10 +87,10 @@ test('bold + italic + underline + strikethrough', async ({ superdoc }) => {
   await clickToolbarButton(superdoc, 'underline');
   await clickToolbarButton(superdoc, 'strike');
 
-  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/active/);
-  await expect(superdoc.page.locator('[data-item="btn-italic"]')).toHaveClass(/active/);
-  await expect(superdoc.page.locator('[data-item="btn-underline"]')).toHaveClass(/active/);
-  await expect(superdoc.page.locator('[data-item="btn-strike"]')).toHaveClass(/active/);
+  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/sd-active/);
+  await expect(superdoc.page.locator('[data-item="btn-italic"]')).toHaveClass(/sd-active/);
+  await expect(superdoc.page.locator('[data-item="btn-underline"]')).toHaveClass(/sd-active/);
+  await expect(superdoc.page.locator('[data-item="btn-strike"]')).toHaveClass(/sd-active/);
   await superdoc.snapshot('all four toggles applied');
 
   await superdoc.assertTextHasMarks('is a sentence', ['bold', 'italic', 'underline', 'strike']);
@@ -106,8 +106,8 @@ test('bold + font family + font size', async ({ superdoc }) => {
   await selectDropdownOption(superdoc, 'fontFamily', 'Georgia');
   await selectDropdownOption(superdoc, 'fontSize', '24');
 
-  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/active/);
-  await expect(superdoc.page.locator('[data-item="btn-fontFamily"] .button-label')).toHaveText('Georgia');
+  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/sd-active/);
+  await expect(superdoc.page.locator('[data-item="btn-fontFamily"] .sd-button-label')).toHaveText('Georgia');
   await expect(superdoc.page.locator('#inlineTextInput-fontSize')).toHaveValue('24');
   await superdoc.snapshot('bold + Georgia 24pt applied');
 
@@ -123,7 +123,7 @@ test('italic + color', async ({ superdoc }) => {
   await clickToolbarButton(superdoc, 'italic');
   await selectColorSwatch(superdoc, 'color', 'red');
 
-  await expect(superdoc.page.locator('[data-item="btn-italic"]')).toHaveClass(/active/);
+  await expect(superdoc.page.locator('[data-item="btn-italic"]')).toHaveClass(/sd-active/);
   const colorBar = superdoc.page.locator('[data-item="btn-color"] .color-bar');
   await expect(colorBar).toHaveCSS('background-color', 'rgb(210, 0, 63)');
   await superdoc.snapshot('italic + red color applied');
@@ -142,7 +142,7 @@ test('font family + font size + color', async ({ superdoc }) => {
   await selectDropdownOption(superdoc, 'fontSize', '18');
   await selectColorSwatch(superdoc, 'color', 'dark red');
 
-  await expect(superdoc.page.locator('[data-item="btn-fontFamily"] .button-label')).toHaveText('Georgia');
+  await expect(superdoc.page.locator('[data-item="btn-fontFamily"] .sd-button-label')).toHaveText('Georgia');
   await expect(superdoc.page.locator('#inlineTextInput-fontSize')).toHaveValue('18');
   const colorBar = superdoc.page.locator('[data-item="btn-color"] .color-bar');
   await expect(colorBar).toHaveCSS('background-color', 'rgb(134, 0, 40)');
@@ -173,11 +173,11 @@ test('all styles combined', async ({ superdoc }) => {
   await selectColorSwatch(superdoc, 'highlight', 'yellow');
 
   // Assert all toolbar button states
-  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/active/);
-  await expect(superdoc.page.locator('[data-item="btn-italic"]')).toHaveClass(/active/);
-  await expect(superdoc.page.locator('[data-item="btn-underline"]')).toHaveClass(/active/);
-  await expect(superdoc.page.locator('[data-item="btn-strike"]')).toHaveClass(/active/);
-  await expect(superdoc.page.locator('[data-item="btn-fontFamily"] .button-label')).toHaveText('Courier New');
+  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/sd-active/);
+  await expect(superdoc.page.locator('[data-item="btn-italic"]')).toHaveClass(/sd-active/);
+  await expect(superdoc.page.locator('[data-item="btn-underline"]')).toHaveClass(/sd-active/);
+  await expect(superdoc.page.locator('[data-item="btn-strike"]')).toHaveClass(/sd-active/);
+  await expect(superdoc.page.locator('[data-item="btn-fontFamily"] .sd-button-label')).toHaveText('Courier New');
   await expect(superdoc.page.locator('#inlineTextInput-fontSize')).toHaveValue('24');
   const colorBar = superdoc.page.locator('[data-item="btn-color"] .color-bar');
   await expect(colorBar).toHaveCSS('background-color', 'rgb(210, 0, 63)');
diff --git a/tests/behavior/tests/toolbar/link.spec.ts b/tests/behavior/tests/toolbar/link.spec.ts
index d4ea8c695d..aef99cb455 100644
--- a/tests/behavior/tests/toolbar/link.spec.ts
+++ b/tests/behavior/tests/toolbar/link.spec.ts
@@ -140,7 +140,7 @@ test('link is not editable in viewing mode', async ({ superdoc }) => {
 
   // Link toolbar button should be disabled in viewing mode
   const linkButton = superdoc.page.locator('[data-item="btn-link"]');
-  await expect(linkButton).toHaveClass(/disabled/);
+  await expect(linkButton).toHaveClass(/sd-disabled/);
 
   // Stub window.open so we can assert navigation without depending on popup handling
   await superdoc.page.evaluate(() => {
diff --git a/tests/behavior/tests/toolbar/responsive-container-overflow.spec.ts b/tests/behavior/tests/toolbar/responsive-container-overflow.spec.ts
index eb3bdc9a38..4a5d2b7603 100644
--- a/tests/behavior/tests/toolbar/responsive-container-overflow.spec.ts
+++ b/tests/behavior/tests/toolbar/responsive-container-overflow.spec.ts
@@ -37,7 +37,7 @@ test('toolbar buttons stay inside the container when it narrows (SD-2328)', asyn
     const container = document.getElementById('toolbar');
     if (!container) return null;
     const containerRect = container.getBoundingClientRect();
-    const items = Array.from(container.querySelectorAll('.button-group > .toolbar-item-ctn'));
+    const items = Array.from(container.querySelectorAll('.button-group > .sd-toolbar-item-ctn'));
     const overflowing = items
       .map((el) => {
         const rect = (el as HTMLElement).getBoundingClientRect();
diff --git a/tests/behavior/tests/toolbar/table-styles.spec.ts b/tests/behavior/tests/toolbar/table-styles.spec.ts
index ba8f47af35..70c2997428 100644
--- a/tests/behavior/tests/toolbar/table-styles.spec.ts
+++ b/tests/behavior/tests/toolbar/table-styles.spec.ts
@@ -25,7 +25,7 @@ test('bold inside a table cell', async ({ superdoc }) => {
   await boldButton.click();
   await superdoc.waitForStable();
 
-  await expect(boldButton).toHaveClass(/active/);
+  await expect(boldButton).toHaveClass(/sd-active/);
   await superdoc.snapshot('bold applied in cell');
 
   await superdoc.assertTextHasMarks('table text', ['bold']);
@@ -46,12 +46,12 @@ test('multiple styles in one cell', async ({ superdoc }) => {
   // Open color dropdown and pick red
   await superdoc.page.locator('[data-item="btn-color"]').click();
   await superdoc.waitForStable();
-  await superdoc.page.locator('.option[aria-label="red"]').first().click();
+  await superdoc.page.locator('.sd-option[aria-label="red"]').first().click();
   await superdoc.waitForStable();
 
   // Assert all toolbar states
-  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/active/);
-  await expect(superdoc.page.locator('[data-item="btn-italic"]')).toHaveClass(/active/);
+  await expect(superdoc.page.locator('[data-item="btn-bold"]')).toHaveClass(/sd-active/);
+  await expect(superdoc.page.locator('[data-item="btn-italic"]')).toHaveClass(/sd-active/);
   const colorBar = superdoc.page.locator('[data-item="btn-color"] .color-bar');
   await expect(colorBar).toHaveCSS('background-color', 'rgb(210, 0, 63)');
   await superdoc.snapshot('bold + italic + red color applied');
@@ -117,7 +117,7 @@ test('font family and size in a table cell', async ({ superdoc }) => {
   await superdoc.waitForStable();
 
   // Assert toolbar
-  await expect(superdoc.page.locator('[data-item="btn-fontFamily"] .button-label')).toHaveText('Georgia');
+  await expect(superdoc.page.locator('[data-item="btn-fontFamily"] .sd-button-label')).toHaveText('Georgia');
   await expect(superdoc.page.locator('#inlineTextInput-fontSize')).toHaveValue('24');
   await superdoc.snapshot('Georgia 24pt applied in cell');
 
diff --git a/tests/behavior/tests/toolbar/undo-redo.spec.ts b/tests/behavior/tests/toolbar/undo-redo.spec.ts
index d4d6b62fce..31dcea4bfd 100644
--- a/tests/behavior/tests/toolbar/undo-redo.spec.ts
+++ b/tests/behavior/tests/toolbar/undo-redo.spec.ts
@@ -13,11 +13,11 @@ async function clickBodySurface(page: Page) {
 
 async function expectToolbarButtonDisabledState(button: Locator, disabled: boolean) {
   if (disabled) {
-    await expect(button).toHaveClass(/disabled/);
+    await expect(button).toHaveClass(/sd-disabled/);
     return;
   }
 
-  await expect(button).not.toHaveClass(/disabled/);
+  await expect(button).not.toHaveClass(/sd-disabled/);
 }
 
 test('undo button removes last typed text', async ({ superdoc }) => {