From 91a987838d6d71ee3394c660ccf949116e50286d Mon Sep 17 00:00:00 2001
From: Gabriel Chittolina <gabrielchittolina1@gmail.com>
Date: Fri, 17 Apr 2026 14:39:49 -0300
Subject: [PATCH 1/6] feat: implement 2 extra types of bullet lists (square,
 circle)

---
 .../components/toolbar/BulletStyleButtons.vue | 136 ++++++++++++++++++
 .../v1/components/toolbar/defaultItems.js     |  25 +++-
 .../v1/components/toolbar/super-toolbar.js    |  10 ++
 .../v1/components/toolbar/toolbarIcons.js     |   5 +
 .../editors/v1/core/commands/toggleList.js    |  18 ++-
 .../v1/core/helpers/list-numbering-helpers.js |  14 +-
 .../parts/adapters/numbering-transforms.ts    |  31 +++-
 .../v1/extensions/paragraph/paragraph.js      |  12 ++
 .../v1/extensions/types/paragraph-commands.ts |   3 +
 .../create-headless-toolbar.test.ts           |   6 +-
 .../src/headless-toolbar/helpers/paragraph.ts |   5 +
 .../headless-toolbar/toolbar-registry.test.ts |   1 +
 .../src/headless-toolbar/toolbar-registry.ts  |   2 +-
 shared/common/icons/list-circle-solid.svg     |   1 +
 shared/common/icons/list-square-solid.svg     |   1 +
 15 files changed, 256 insertions(+), 14 deletions(-)
 create mode 100644 packages/super-editor/src/editors/v1/components/toolbar/BulletStyleButtons.vue
 create mode 100644 shared/common/icons/list-circle-solid.svg
 create mode 100644 shared/common/icons/list-square-solid.svg

diff --git a/packages/super-editor/src/editors/v1/components/toolbar/BulletStyleButtons.vue b/packages/super-editor/src/editors/v1/components/toolbar/BulletStyleButtons.vue
new file mode 100644
index 0000000000..e9dc1e5e9b
--- /dev/null
+++ b/packages/super-editor/src/editors/v1/components/toolbar/BulletStyleButtons.vue
@@ -0,0 +1,136 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useHighContrastMode } from '../../composables/use-high-contrast-mode';
+import { toolbarIcons } from './toolbarIcons.js';
+
+const { isHighContrastMode } = useHighContrastMode();
+const emit = defineEmits(['select']);
+
+const props = defineProps({
+  selectedStyle: {
+    type: String,
+    default: null,
+  },
+});
+
+const buttonRefs = ref([]);
+const bulletButtons = [
+  { key: 'disc', icon: toolbarIcons.bulletListDisc, ariaLabel: 'Opaque circle' },
+  { key: 'circle', icon: toolbarIcons.bulletListCircle, ariaLabel: 'Outline circle' },
+  { key: 'square', icon: toolbarIcons.bulletListSquare, ariaLabel: 'Opaque square' },
+];
+
+const select = (key) => {
+  emit('select', key);
+};
+
+const moveToNextButton = (index) => {
+  if (index === buttonRefs.value.length - 1) return;
+  const next = buttonRefs.value[index + 1];
+  if (next) {
+    next.setAttribute('tabindex', '0');
+    next.focus();
+  }
+};
+
+const moveToPreviousButton = (index) => {
+  if (index === 0) return;
+  const prev = buttonRefs.value[index - 1];
+  if (prev) {
+    prev.setAttribute('tabindex', '0');
+    prev.focus();
+  }
+};
+
+const handleKeyDown = (e, index) => {
+  switch (e.key) {
+    case 'ArrowLeft':
+      moveToPreviousButton(index);
+      break;
+    case 'ArrowRight':
+      moveToNextButton(index);
+      break;
+    case 'Enter':
+      select(bulletButtons[index].key);
+      break;
+    default:
+      break;
+  }
+};
+
+onMounted(() => {
+  const first = buttonRefs.value[0];
+  if (first) {
+    first.setAttribute('tabindex', '0');
+    first.focus();
+  }
+});
+</script>
+
+<template>
+  <div class="bullet-style-buttons" :class="{ 'high-contrast': isHighContrastMode }">
+    <div
+      v-for="(button, index) in bulletButtons"
+      :key="button.key"
+      class="button-icon"
+      :class="{ selected: props.selectedStyle === button.key }"
+      @click="select(button.key)"
+      v-html="button.icon"
+      role="menuitem"
+      :aria-label="button.ariaLabel"
+      ref="buttonRefs"
+      @keydown.prevent="(event) => handleKeyDown(event, index)"
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+.bullet-style-buttons {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+
+  .button-icon {
+    cursor: pointer;
+    padding: 5px;
+    font-size: var(--sd-ui-font-size-600, 16px);
+    color: var(--sd-ui-dropdown-text, #47484a);
+    width: 25px;
+    height: 25px;
+    border-radius: var(--sd-ui-dropdown-option-radius, 3px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+
+    &:hover {
+      background-color: var(--sd-ui-dropdown-hover-bg, #d8dee5);
+      color: var(--sd-ui-dropdown-hover-text, #47484a);
+    }
+
+    :deep(svg) {
+      width: 100%;
+      height: 100%;
+      display: block;
+      fill: currentColor;
+    }
+
+    &.selected {
+      background-color: var(--sd-ui-dropdown-active-bg, #d8dee5);
+      color: var(--sd-ui-dropdown-selected-text, #47484a);
+    }
+  }
+
+  &.high-contrast {
+    .button-icon {
+      &:hover,
+      &.selected {
+        background-color: #000;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
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 a16e4b00dc..f9c6206b8a 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/defaultItems.js
+++ b/packages/super-editor/src/editors/v1/components/toolbar/defaultItems.js
@@ -4,6 +4,7 @@ import { sanitizeNumber } from './helpers';
 import { useToolbarItem } from './use-toolbar-item';
 import AIWriter from './AIWriter.vue';
 import AlignmentButtons from './AlignmentButtons.vue';
+import BulletStyleButtons from './BulletStyleButtons.vue';
 import DocumentMode from './DocumentMode.vue';
 import LinkedStyle from './LinkedStyle.vue';
 import LinkInput from './LinkInput.vue';
@@ -630,16 +631,34 @@ export const makeDefaultItems = ({
 
   // bullet list
   const bulletedList = useToolbarItem({
-    type: 'button',
+    type: 'dropdown',
     name: 'list',
-    command: 'toggleBulletList',
+    command: 'toggleBulletListStyle',
     icon: toolbarIcons.bulletList,
-    active: false,
+    hasCaret: true,
     tooltip: toolbarTexts.bulletList,
     restoreEditorFocus: true,
+    suppressActiveHighlight: true,
     attributes: {
       ariaLabel: 'Bullet list',
     },
+    options: [
+      {
+        type: 'render',
+        key: 'bullet-style-buttons',
+        render: () => {
+          const handleSelect = (style) => {
+            closeDropdown(bulletedList);
+            const item = { ...bulletedList, command: 'toggleBulletListStyle' };
+            superToolbar.emitCommand({ item, argument: style });
+          };
+          return h(BulletStyleButtons, {
+            selectedStyle: bulletedList.selectedValue.value,
+            onSelect: handleSelect,
+          });
+        },
+      },
+    ],
   });
 
   // number list
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js b/packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js
index c290c31ad7..9a98bd28de 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js
+++ b/packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js
@@ -622,6 +622,16 @@ export class SuperToolbar extends EventEmitter {
         if (commandState?.value != null) item.activate({ styleId: commandState.value });
         else item.label.value = this.config.texts?.formatText || 'Format text';
       },
+      list: () => {
+        const markerToStyle = { '•': 'disc', '◦': 'circle', '▪': 'square' };
+        if (commandState?.active) {
+          item.activate();
+          item.selectedValue.value = markerToStyle[commandState.value] ?? null;
+        } else {
+          item.deactivate();
+          item.selectedValue.value = null;
+        }
+      },
       default: () => {
         if (commandState?.active) item.activate();
         else item.deactivate();
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/toolbarIcons.js b/packages/super-editor/src/editors/v1/components/toolbar/toolbarIcons.js
index 70f62342f4..8b8caf0f08 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/toolbarIcons.js
+++ b/packages/super-editor/src/editors/v1/components/toolbar/toolbarIcons.js
@@ -2,6 +2,8 @@ import boldIconSvg from '@superdoc/common/icons/bold-solid.svg?raw';
 import italicIconSvg from '@superdoc/common/icons/italic-solid.svg?raw';
 import underlineIconSvg from '@superdoc/common/icons/underline-solid.svg?raw';
 import listIconSvg from '@superdoc/common/icons/list-solid.svg?raw';
+import listCircleIconSvg from '@superdoc/common/icons/list-circle-solid.svg?raw';
+import listSquareIconSvg from '@superdoc/common/icons/list-square-solid.svg?raw';
 import listOlIconSvg from '@superdoc/common/icons/list-ol-solid.svg?raw';
 import imageIconSvg from '@superdoc/common/icons/image-solid.svg?raw';
 import linkIconSvg from '@superdoc/common/icons/link-solid.svg?raw';
@@ -64,6 +66,9 @@ export const toolbarIcons = {
   alignCenter: alignCenterIconSvg,
   alignJustify: alignJustifyIconSvg,
   bulletList: listIconSvg,
+  bulletListDisc: listIconSvg,
+  bulletListCircle: listCircleIconSvg,
+  bulletListSquare: listSquareIconSvg,
   numberedList: listOlIconSvg,
   indentLeft: outdentIconSvg,
   indentRight: indentIconSvg,
diff --git a/packages/super-editor/src/editors/v1/core/commands/toggleList.js b/packages/super-editor/src/editors/v1/core/commands/toggleList.js
index 048bd03ec0..0c689911d9 100644
--- a/packages/super-editor/src/editors/v1/core/commands/toggleList.js
+++ b/packages/super-editor/src/editors/v1/core/commands/toggleList.js
@@ -26,10 +26,18 @@ function getParagraphListKind(node, editor) {
   return numFmtIsBullet(fmt) ? 'bullet' : 'ordered';
 }
 
-function paragraphMatchesToggleListType(node, editor, listType) {
+/** @type {Record<string, string>} */
+const MARKER_TEXT_TO_STYLE = { '•': 'disc', '◦': 'circle', '▪': 'square' };
+
+function paragraphMatchesToggleListType(node, editor, listType, bulletStyle) {
   const kind = getParagraphListKind(node, editor);
   if (!kind) return false;
-  if (listType === 'bulletList') return kind === 'bullet';
+  if (listType === 'bulletList') {
+    if (kind !== 'bullet') return false;
+    if (!bulletStyle) return true;
+    const markerText = node.attrs.listRendering?.markerText;
+    return MARKER_TEXT_TO_STYLE[markerText] === bulletStyle;
+  }
   if (listType === 'orderedList') return kind === 'ordered';
   return false;
 }
@@ -60,13 +68,13 @@ function getPrecedingParagraphForListReuse(doc, from, paragraphsInSelection) {
 }
 
 export const toggleList =
-  (listType) =>
+  (listType, bulletStyle) =>
   ({ editor, state, tr, dispatch }) => {
     if (listType !== 'orderedList' && listType !== 'bulletList') {
       return false;
     }
 
-    const predicate = (n) => paragraphMatchesToggleListType(n, editor, listType);
+    const predicate = (n) => paragraphMatchesToggleListType(n, editor, listType, bulletStyle);
     const { selection } = state;
     const { from, to } = selection;
     let firstListNode = null;
@@ -127,7 +135,7 @@ export const toggleList =
 
     if (mode === 'create') {
       const numId = ListHelpers.getNewListId(editor);
-      ListHelpers.generateNewListDefinition({ numId: Number(numId), listType, editor });
+      ListHelpers.generateNewListDefinition({ numId: Number(numId), listType, editor, bulletStyle });
       sharedNumberingProperties = {
         numId: Number(numId),
         ilvl: 0,
diff --git a/packages/super-editor/src/editors/v1/core/helpers/list-numbering-helpers.js b/packages/super-editor/src/editors/v1/core/helpers/list-numbering-helpers.js
index 016e536f55..b571958183 100644
--- a/packages/super-editor/src/editors/v1/core/helpers/list-numbering-helpers.js
+++ b/packages/super-editor/src/editors/v1/core/helpers/list-numbering-helpers.js
@@ -39,10 +39,21 @@ import { mutateNumbering } from '@core/parts/adapters/numbering-mutation';
  * @param {string} [param0.text]
  * @param {string} [param0.fmt]
  * @param {string} [param0.markerFontFamily]
+ * @param {'disc'|'circle'|'square'} [param0.bulletStyle]
  * @param {import('../Editor').Editor} param0.editor
  * @returns {Object} The new abstract and num definitions.
  */
-export const generateNewListDefinition = ({ numId, listType, level, start, text, fmt, editor, markerFontFamily }) => {
+export const generateNewListDefinition = ({
+  numId,
+  listType,
+  level,
+  start,
+  text,
+  fmt,
+  editor,
+  markerFontFamily,
+  bulletStyle,
+}) => {
   /** @type {{ abstractDef: any, numDef: any }} */
   let resultDefs;
 
@@ -55,6 +66,7 @@ export const generateNewListDefinition = ({ numId, listType, level, start, text,
       text,
       fmt,
       markerFontFamily,
+      bulletStyle,
     });
     resultDefs = { abstractDef: result.abstractDef, numDef: result.numDef };
   });
diff --git a/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts b/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts
index 84d16a318f..9dfa065e42 100644
--- a/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts
+++ b/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts
@@ -30,8 +30,15 @@ interface GenerateOptions {
   text?: string | null;
   fmt?: string | null;
   markerFontFamily?: string | null;
+  bulletStyle?: 'disc' | 'circle' | 'square' | null;
 }
 
+const BULLET_STYLE_CHARS: Record<string, { char: string; font: string }> = {
+  disc: { char: '\uf0b7', font: 'Symbol' },
+  circle: { char: 'o', font: 'Courier New' },
+  square: { char: '\uf0a7', font: 'Wingdings' },
+};
+
 interface GenerateResult {
   numId: number;
   abstractId: number;
@@ -72,7 +79,7 @@ function buildNumDef(numId: number, abstractId: number): any {
  */
 export function generateNewListDefinition(numbering: NumberingModel, options: GenerateOptions): GenerateResult {
   let { listType } = options;
-  const { numId, level, start, text, fmt, markerFontFamily } = options;
+  const { numId, level, start, text, fmt, markerFontFamily, bulletStyle } = options;
   if (typeof listType !== 'string') listType = (listType as any).name;
 
   const definition = listType === 'orderedList' ? baseOrderedListDef : baseBulletList;
@@ -86,6 +93,28 @@ export function generateNewListDefinition(numbering: NumberingModel, options: Ge
     }),
   );
 
+  if (bulletStyle && listType !== 'orderedList') {
+    const styleChars = BULLET_STYLE_CHARS[bulletStyle];
+    if (styleChars) {
+      const lvl0 = newAbstractDef.elements.find((el: any) => el.name === 'w:lvl' && el.attributes['w:ilvl'] === '0');
+      if (lvl0) {
+        const lvlText = lvl0.elements.find((el: any) => el.name === 'w:lvlText');
+        if (lvlText) lvlText.attributes['w:val'] = styleChars.char;
+        let rPr = lvl0.elements.find((el: any) => el.name === 'w:rPr');
+        if (!rPr) {
+          rPr = { type: 'element', name: 'w:rPr', elements: [] };
+          lvl0.elements.push(rPr);
+        }
+        rPr.elements = rPr.elements.filter((el: any) => el.name !== 'w:rFonts');
+        rPr.elements.push({
+          type: 'element',
+          name: 'w:rFonts',
+          attributes: { 'w:ascii': styleChars.font, 'w:hAnsi': styleChars.font, 'w:hint': 'default' },
+        });
+      }
+    }
+  }
+
   if (level != null && start != null && text != null && fmt != null) {
     if (numbering.definitions[numId]) {
       const abstractId = numbering.definitions[numId]?.elements[0]?.attributes['w:val'];
diff --git a/packages/super-editor/src/editors/v1/extensions/paragraph/paragraph.js b/packages/super-editor/src/editors/v1/extensions/paragraph/paragraph.js
index 62525501c8..0d51b7e617 100644
--- a/packages/super-editor/src/editors/v1/extensions/paragraph/paragraph.js
+++ b/packages/super-editor/src/editors/v1/extensions/paragraph/paragraph.js
@@ -173,6 +173,7 @@ export const Paragraph = OxmlNode.create({
       listRendering: {
         keepOnSplit: false,
         renderDOM: ({ listRendering }) => {
+          console.log('listRendering', listRendering);
           return {
             'data-marker-type': listRendering?.markerText,
             'data-list-level': listRendering?.path ? JSON.stringify(listRendering.path) : null,
@@ -323,6 +324,17 @@ export const Paragraph = OxmlNode.create({
         return toggleList('bulletList')(params);
       },
 
+      /**
+       * Toggle a bullet list with a specific bullet style at the current selection
+       * @category Command
+       * @example
+       * editor.commands.toggleBulletListStyle('disc')
+       * @note Style can be 'disc' (•), 'circle' (◦), or 'square' (▪)
+       */
+      toggleBulletListStyle: (style) => (params) => {
+        return toggleList('bulletList', style)(params);
+      },
+
       /**
        * Restart numbering for the current list
        * @category Command
diff --git a/packages/super-editor/src/editors/v1/extensions/types/paragraph-commands.ts b/packages/super-editor/src/editors/v1/extensions/types/paragraph-commands.ts
index a8f68ec827..06681a3037 100644
--- a/packages/super-editor/src/editors/v1/extensions/types/paragraph-commands.ts
+++ b/packages/super-editor/src/editors/v1/extensions/types/paragraph-commands.ts
@@ -15,6 +15,9 @@ export interface ParagraphCommands {
   /** Toggle bullet list formatting on the current selection */
   toggleBulletList: () => boolean;
 
+  /** Toggle a bullet list with a specific style ('disc' | 'circle' | 'square') */
+  toggleBulletListStyle: (style: 'disc' | 'circle' | 'square') => boolean;
+
   /** Restart numbering for the current list item */
   restartNumbering: () => boolean;
 
diff --git a/packages/super-editor/src/headless-toolbar/create-headless-toolbar.test.ts b/packages/super-editor/src/headless-toolbar/create-headless-toolbar.test.ts
index 53019dbe9d..41a057582c 100644
--- a/packages/super-editor/src/headless-toolbar/create-headless-toolbar.test.ts
+++ b/packages/super-editor/src/headless-toolbar/create-headless-toolbar.test.ts
@@ -473,10 +473,10 @@ describe('createHeadlessToolbar', () => {
   });
 
   it('executes bullet-list through the registry direct command path', () => {
-    const toggleBulletList = vi.fn(() => true);
+    const toggleBulletListStyle = vi.fn(() => true);
     const superdoc = createActiveEditorHost({
       commands: {
-        toggleBulletList,
+        toggleBulletListStyle,
       },
       state: createSelectionState({
         empty: true,
@@ -495,7 +495,7 @@ describe('createHeadlessToolbar', () => {
     });
 
     expect(controller.execute?.('bullet-list')).toBe(true);
-    expect(toggleBulletList).toHaveBeenCalledTimes(1);
+    expect(toggleBulletListStyle).toHaveBeenCalledTimes(1);
 
     controller.destroy();
   });
diff --git a/packages/super-editor/src/headless-toolbar/helpers/paragraph.ts b/packages/super-editor/src/headless-toolbar/helpers/paragraph.ts
index 9327cb71fd..8ff4b0598c 100644
--- a/packages/super-editor/src/headless-toolbar/helpers/paragraph.ts
+++ b/packages/super-editor/src/headless-toolbar/helpers/paragraph.ts
@@ -117,6 +117,11 @@ export const createListStateDeriver =
         ? activeNumberingType === 'bullet'
         : activeNumberingType != null && activeNumberingType !== 'bullet';
 
+    if (numberingType === 'bullet') {
+      const markerText = isActive ? (paragraphNode?.attrs?.listRendering?.markerText ?? null) : null;
+      return { active: isActive, disabled: false, value: markerText };
+    }
+
     return {
       active: isActive,
       disabled: false,
diff --git a/packages/super-editor/src/headless-toolbar/toolbar-registry.test.ts b/packages/super-editor/src/headless-toolbar/toolbar-registry.test.ts
index a0a75f3510..9d705a752f 100644
--- a/packages/super-editor/src/headless-toolbar/toolbar-registry.test.ts
+++ b/packages/super-editor/src/headless-toolbar/toolbar-registry.test.ts
@@ -542,6 +542,7 @@ describe('createToolbarRegistry', () => {
     expect(state).toEqual({
       active: true,
       disabled: false,
+      value: null,
     });
   });
 
diff --git a/packages/super-editor/src/headless-toolbar/toolbar-registry.ts b/packages/super-editor/src/headless-toolbar/toolbar-registry.ts
index a06a49ef71..a4026e9422 100644
--- a/packages/super-editor/src/headless-toolbar/toolbar-registry.ts
+++ b/packages/super-editor/src/headless-toolbar/toolbar-registry.ts
@@ -119,7 +119,7 @@ export const createToolbarRegistry = (): Partial<Record<PublicToolbarItemId, Bui
     },
     'bullet-list': {
       id: 'bullet-list',
-      directCommandName: 'toggleBulletList',
+      directCommandName: 'toggleBulletListStyle',
       state: createListStateDeriver('bullet'),
     },
     'numbered-list': {
diff --git a/shared/common/icons/list-circle-solid.svg b/shared/common/icons/list-circle-solid.svg
new file mode 100644
index 0000000000..5672a75c9f
--- /dev/null
+++ b/shared/common/icons/list-circle-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. (bullet shapes modified)--><path fill-rule="evenodd" d="M192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 48 A48 48 0 1 0 64 144 A48 48 0 1 0 64 48 Z M64 68 A28 28 0 1 1 64 124 A28 28 0 1 1 64 68 Z M64 208 A48 48 0 1 0 64 304 A48 48 0 1 0 64 208 Z M64 228 A28 28 0 1 1 64 284 A28 28 0 1 1 64 228 Z M64 368 A48 48 0 1 0 64 464 A48 48 0 1 0 64 368 Z M64 388 A28 28 0 1 1 64 444 A28 28 0 1 1 64 388 Z"/></svg>
diff --git a/shared/common/icons/list-square-solid.svg b/shared/common/icons/list-square-solid.svg
new file mode 100644
index 0000000000..dd35473232
--- /dev/null
+++ b/shared/common/icons/list-square-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. (bullet shapes modified)--><path d="M192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM16 48 L112 48 L112 144 L16 144 Z M16 208 L112 208 L112 304 L16 304 Z M16 368 L112 368 L112 464 L16 464 Z"/></svg>

From 8137744afbcf0b0dec668fc7c2eadac5abbf871c Mon Sep 17 00:00:00 2001
From: Gabriel Chittolina <gabrielchittolina1@gmail.com>
Date: Fri, 17 Apr 2026 14:50:30 -0300
Subject: [PATCH 2/6] refactor: code reuse

---
 .../editors/v1/components/toolbar/super-toolbar.js    |  4 ++--
 .../src/editors/v1/core/commands/toggleList.js        |  7 ++-----
 .../editors/v1/core/helpers/list-numbering-helpers.js | 11 +++++++++++
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js b/packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js
index 9a98bd28de..28db7b3885 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js
+++ b/packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js
@@ -20,6 +20,7 @@ import { useToolbarItem } from '@components/toolbar/use-toolbar-item';
 import { calculateResolvedParagraphProperties } from '@extensions/paragraph/resolvedPropertiesCache.js';
 import { parseSizeUnit } from '@core/utilities';
 import { findElementBySelector, getParagraphFontFamilyFromProperties } from './helpers/general.js';
+import { markerTextToBulletStyle } from '@helpers/list-numbering-helpers.js';
 
 /**
  * @typedef {function(CommandItem): void} CommandCallback
@@ -623,10 +624,9 @@ export class SuperToolbar extends EventEmitter {
         else item.label.value = this.config.texts?.formatText || 'Format text';
       },
       list: () => {
-        const markerToStyle = { '•': 'disc', '◦': 'circle', '▪': 'square' };
         if (commandState?.active) {
           item.activate();
-          item.selectedValue.value = markerToStyle[commandState.value] ?? null;
+          item.selectedValue.value = markerTextToBulletStyle(commandState.value);
         } else {
           item.deactivate();
           item.selectedValue.value = null;
diff --git a/packages/super-editor/src/editors/v1/core/commands/toggleList.js b/packages/super-editor/src/editors/v1/core/commands/toggleList.js
index 0c689911d9..7aebd43a76 100644
--- a/packages/super-editor/src/editors/v1/core/commands/toggleList.js
+++ b/packages/super-editor/src/editors/v1/core/commands/toggleList.js
@@ -1,6 +1,6 @@
 // @ts-check
 import { updateNumberingProperties } from './changeListLevel.js';
-import { ListHelpers } from '@helpers/list-numbering-helpers.js';
+import { ListHelpers, markerTextToBulletStyle } from '@helpers/list-numbering-helpers.js';
 import { getResolvedParagraphProperties } from '@extensions/paragraph/resolvedPropertiesCache.js';
 import { isVisuallyEmptyParagraph } from './removeNumberingProperties.js';
 import { Selection, TextSelection } from 'prosemirror-state';
@@ -26,9 +26,6 @@ function getParagraphListKind(node, editor) {
   return numFmtIsBullet(fmt) ? 'bullet' : 'ordered';
 }
 
-/** @type {Record<string, string>} */
-const MARKER_TEXT_TO_STYLE = { '•': 'disc', '◦': 'circle', '▪': 'square' };
-
 function paragraphMatchesToggleListType(node, editor, listType, bulletStyle) {
   const kind = getParagraphListKind(node, editor);
   if (!kind) return false;
@@ -36,7 +33,7 @@ function paragraphMatchesToggleListType(node, editor, listType, bulletStyle) {
     if (kind !== 'bullet') return false;
     if (!bulletStyle) return true;
     const markerText = node.attrs.listRendering?.markerText;
-    return MARKER_TEXT_TO_STYLE[markerText] === bulletStyle;
+    return markerTextToBulletStyle(markerText) === bulletStyle;
   }
   if (listType === 'orderedList') return kind === 'ordered';
   return false;
diff --git a/packages/super-editor/src/editors/v1/core/helpers/list-numbering-helpers.js b/packages/super-editor/src/editors/v1/core/helpers/list-numbering-helpers.js
index b571958183..3c584f2b70 100644
--- a/packages/super-editor/src/editors/v1/core/helpers/list-numbering-helpers.js
+++ b/packages/super-editor/src/editors/v1/core/helpers/list-numbering-helpers.js
@@ -29,6 +29,17 @@ import { mutateNumbering } from '@core/parts/adapters/numbering-mutation';
 // Shims will be removed as callers migrate in Phases 1b–1d.
 // ---------------------------------------------------------------------------
 
+/**
+ * Maps a bullet marker character (from `listRendering.markerText`) to its named bullet style.
+ * Returns null for unrecognized markers.
+ * @param {string|null|undefined} markerText
+ * @returns {'disc'|'circle'|'square'|null}
+ */
+export function markerTextToBulletStyle(markerText) {
+  const map = { '•': 'disc', '◦': 'circle', '▪': 'square' };
+  return map[markerText] ?? null;
+}
+
 /**
  * Generate a new list definition for the given list type.
  * @param {Object} param0

From 778c18e51af1ee3cf382473bcd062273bfd7be86 Mon Sep 17 00:00:00 2001
From: Gabriel Chittolina <gabrielchittolina1@gmail.com>
Date: Fri, 17 Apr 2026 15:14:03 -0300
Subject: [PATCH 3/6] refactor: simplified code removing font override

---
 .../parts/adapters/numbering-transforms.ts    | 33 ++++++++-----------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts b/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts
index 9dfa065e42..2d5280df17 100644
--- a/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts
+++ b/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts
@@ -33,10 +33,10 @@ interface GenerateOptions {
   bulletStyle?: 'disc' | 'circle' | 'square' | null;
 }
 
-const BULLET_STYLE_CHARS: Record<string, { char: string; font: string }> = {
-  disc: { char: '\uf0b7', font: 'Symbol' },
-  circle: { char: 'o', font: 'Courier New' },
-  square: { char: '\uf0a7', font: 'Wingdings' },
+const BULLET_STYLE_CHARS: Record<string, string> = {
+  disc: '•',
+  circle: '◦',
+  square: '▪',
 };
 
 interface GenerateResult {
@@ -93,24 +93,19 @@ export function generateNewListDefinition(numbering: NumberingModel, options: Ge
     }),
   );
 
-  if (bulletStyle && listType !== 'orderedList') {
-    const styleChars = BULLET_STYLE_CHARS[bulletStyle];
-    if (styleChars) {
+  // Override the bullet style for the new list if a bullet style is provided
+  const shouldOverrideBulletStyle = bulletStyle && listType !== 'orderedList';
+  if (shouldOverrideBulletStyle) {
+    const char = BULLET_STYLE_CHARS[bulletStyle];
+    if (char) {
       const lvl0 = newAbstractDef.elements.find((el: any) => el.name === 'w:lvl' && el.attributes['w:ilvl'] === '0');
       if (lvl0) {
         const lvlText = lvl0.elements.find((el: any) => el.name === 'w:lvlText');
-        if (lvlText) lvlText.attributes['w:val'] = styleChars.char;
-        let rPr = lvl0.elements.find((el: any) => el.name === 'w:rPr');
-        if (!rPr) {
-          rPr = { type: 'element', name: 'w:rPr', elements: [] };
-          lvl0.elements.push(rPr);
-        }
-        rPr.elements = rPr.elements.filter((el: any) => el.name !== 'w:rFonts');
-        rPr.elements.push({
-          type: 'element',
-          name: 'w:rFonts',
-          attributes: { 'w:ascii': styleChars.font, 'w:hAnsi': styleChars.font, 'w:hint': 'default' },
-        });
+        if (lvlText) lvlText.attributes['w:val'] = char;
+
+        // Remove any inherited font so the Unicode char renders in the document's default font
+        const rPr = lvl0.elements.find((el: any) => el.name === 'w:rPr');
+        if (rPr) rPr.elements = rPr.elements.filter((el: any) => el.name !== 'w:rFonts');
       }
     }
   }

From ce505e4c06582fb38bf7171a16048b4b5be26d01 Mon Sep 17 00:00:00 2001
From: Gabriel Chittolina <gabrielchittolina1@gmail.com>
Date: Fri, 17 Apr 2026 15:17:56 -0300
Subject: [PATCH 4/6] chore: small code tweaks

---
 .../src/editors/v1/core/parts/adapters/numbering-transforms.ts  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts b/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts
index 2d5280df17..487a80a99e 100644
--- a/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts
+++ b/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts
@@ -97,8 +97,10 @@ export function generateNewListDefinition(numbering: NumberingModel, options: Ge
   const shouldOverrideBulletStyle = bulletStyle && listType !== 'orderedList';
   if (shouldOverrideBulletStyle) {
     const char = BULLET_STYLE_CHARS[bulletStyle];
+
     if (char) {
       const lvl0 = newAbstractDef.elements.find((el: any) => el.name === 'w:lvl' && el.attributes['w:ilvl'] === '0');
+
       if (lvl0) {
         const lvlText = lvl0.elements.find((el: any) => el.name === 'w:lvlText');
         if (lvlText) lvlText.attributes['w:val'] = char;

From a1e646077727d26f3b704f7cdef0051f119bf42c Mon Sep 17 00:00:00 2001
From: Gabriel Chittolina <gabrielchittolina1@gmail.com>
Date: Mon, 20 Apr 2026 15:46:35 -0300
Subject: [PATCH 5/6] feat: extra ordered list types

---
 .../toolbar/NumberedStyleButtons.vue          | 140 ++++++++++++++++++
 .../v1/components/toolbar/defaultItems.js     |  25 +++-
 .../v1/components/toolbar/super-toolbar.js    |   9 ++
 .../v1/components/toolbar/toolbarIcons.js     |  14 ++
 .../editors/v1/core/commands/toggleList.js    |  29 +++-
 .../v1/core/helpers/list-numbering-helpers.js |  24 ++-
 .../parts/adapters/numbering-transforms.ts    |  32 +++-
 .../v1/extensions/paragraph/paragraph.js      |   9 ++
 .../v1/extensions/types/paragraph-commands.ts |  12 ++
 .../create-headless-toolbar.test.ts           |   6 +-
 .../src/headless-toolbar/helpers/paragraph.ts |  12 +-
 .../headless-toolbar/toolbar-registry.test.ts |   2 +
 .../src/headless-toolbar/toolbar-registry.ts  |   2 +-
 .../common/icons/list-decimal-paren-solid.svg |  13 ++
 shared/common/icons/list-decimal-solid.svg    |  13 ++
 .../icons/list-lower-alpha-paren-solid.svg    |   6 +
 .../common/icons/list-lower-alpha-solid.svg   |   6 +
 .../common/icons/list-lower-roman-solid.svg   |   6 +
 .../common/icons/list-upper-alpha-solid.svg   |   6 +
 .../common/icons/list-upper-roman-solid.svg   |   6 +
 20 files changed, 353 insertions(+), 19 deletions(-)
 create mode 100644 packages/super-editor/src/editors/v1/components/toolbar/NumberedStyleButtons.vue
 create mode 100644 shared/common/icons/list-decimal-paren-solid.svg
 create mode 100644 shared/common/icons/list-decimal-solid.svg
 create mode 100644 shared/common/icons/list-lower-alpha-paren-solid.svg
 create mode 100644 shared/common/icons/list-lower-alpha-solid.svg
 create mode 100644 shared/common/icons/list-lower-roman-solid.svg
 create mode 100644 shared/common/icons/list-upper-alpha-solid.svg
 create mode 100644 shared/common/icons/list-upper-roman-solid.svg

diff --git a/packages/super-editor/src/editors/v1/components/toolbar/NumberedStyleButtons.vue b/packages/super-editor/src/editors/v1/components/toolbar/NumberedStyleButtons.vue
new file mode 100644
index 0000000000..1226159611
--- /dev/null
+++ b/packages/super-editor/src/editors/v1/components/toolbar/NumberedStyleButtons.vue
@@ -0,0 +1,140 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useHighContrastMode } from '../../composables/use-high-contrast-mode';
+import { toolbarIcons } from './toolbarIcons.js';
+
+const { isHighContrastMode } = useHighContrastMode();
+const emit = defineEmits(['select']);
+
+const props = defineProps({
+  selectedStyle: {
+    type: String,
+    default: null,
+  },
+});
+
+const buttonRefs = ref([]);
+const numberedButtons = [
+  { key: 'decimal', icon: toolbarIcons.numberedListDecimal, ariaLabel: '1. 2. 3.' },
+  { key: 'decimal-paren', icon: toolbarIcons.numberedListDecimalParen, ariaLabel: '1) 2) 3)' },
+  { key: 'upper-roman', icon: toolbarIcons.numberedListUpperRoman, ariaLabel: 'I. II. III.' },
+  { key: 'lower-roman', icon: toolbarIcons.numberedListLowerRoman, ariaLabel: 'i. ii. iii.' },
+  { key: 'upper-alpha', icon: toolbarIcons.numberedListUpperAlpha, ariaLabel: 'A. B. C.' },
+  { key: 'lower-alpha', icon: toolbarIcons.numberedListLowerAlpha, ariaLabel: 'a. b. c.' },
+  { key: 'lower-alpha-paren', icon: toolbarIcons.numberedListLowerAlphaParen, ariaLabel: 'a) b) c)' },
+];
+
+const select = (key) => {
+  emit('select', key);
+};
+
+const moveToNextButton = (index) => {
+  if (index === buttonRefs.value.length - 1) return;
+  const next = buttonRefs.value[index + 1];
+  if (next) {
+    next.setAttribute('tabindex', '0');
+    next.focus();
+  }
+};
+
+const moveToPreviousButton = (index) => {
+  if (index === 0) return;
+  const prev = buttonRefs.value[index - 1];
+  if (prev) {
+    prev.setAttribute('tabindex', '0');
+    prev.focus();
+  }
+};
+
+const handleKeyDown = (e, index) => {
+  switch (e.key) {
+    case 'ArrowLeft':
+      moveToPreviousButton(index);
+      break;
+    case 'ArrowRight':
+      moveToNextButton(index);
+      break;
+    case 'Enter':
+      select(numberedButtons[index].key);
+      break;
+    default:
+      break;
+  }
+};
+
+onMounted(() => {
+  const first = buttonRefs.value[0];
+  if (first) {
+    first.setAttribute('tabindex', '0');
+    first.focus();
+  }
+});
+</script>
+
+<template>
+  <div class="numbered-style-buttons" :class="{ 'high-contrast': isHighContrastMode }">
+    <div
+      v-for="(button, index) in numberedButtons"
+      :key="button.key"
+      class="button-icon"
+      :class="{ selected: props.selectedStyle === button.key }"
+      @click="select(button.key)"
+      v-html="button.icon"
+      role="menuitem"
+      :aria-label="button.ariaLabel"
+      ref="buttonRefs"
+      @keydown.prevent="(event) => handleKeyDown(event, index)"
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+.numbered-style-buttons {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+
+  .button-icon {
+    cursor: pointer;
+    padding: 5px;
+    font-size: var(--sd-ui-font-size-600, 16px);
+    color: var(--sd-ui-dropdown-text, #47484a);
+    width: 40px;
+    height: 40px;
+    border-radius: var(--sd-ui-dropdown-option-radius, 3px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+
+    &:hover {
+      background-color: var(--sd-ui-dropdown-hover-bg, #d8dee5);
+      color: var(--sd-ui-dropdown-hover-text, #47484a);
+    }
+
+    :deep(svg) {
+      width: 100%;
+      height: 100%;
+      display: block;
+      fill: currentColor;
+    }
+
+    &.selected {
+      background-color: var(--sd-ui-dropdown-active-bg, #d8dee5);
+      color: var(--sd-ui-dropdown-selected-text, #47484a);
+    }
+  }
+
+  &.high-contrast {
+    .button-icon {
+      &:hover,
+      &.selected {
+        background-color: #000;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
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 f9c6206b8a..5ae142f028 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/defaultItems.js
+++ b/packages/super-editor/src/editors/v1/components/toolbar/defaultItems.js
@@ -5,6 +5,7 @@ import { useToolbarItem } from './use-toolbar-item';
 import AIWriter from './AIWriter.vue';
 import AlignmentButtons from './AlignmentButtons.vue';
 import BulletStyleButtons from './BulletStyleButtons.vue';
+import NumberedStyleButtons from './NumberedStyleButtons.vue';
 import DocumentMode from './DocumentMode.vue';
 import LinkedStyle from './LinkedStyle.vue';
 import LinkInput from './LinkInput.vue';
@@ -663,16 +664,34 @@ export const makeDefaultItems = ({
 
   // number list
   const numberedList = useToolbarItem({
-    type: 'button',
+    type: 'dropdown',
     name: 'numberedlist',
-    command: 'toggleOrderedList',
+    command: 'toggleOrderedListStyle',
     icon: toolbarIcons.numberedList,
-    active: false,
+    hasCaret: true,
     tooltip: toolbarTexts.numberedList,
     restoreEditorFocus: true,
+    suppressActiveHighlight: true,
     attributes: {
       ariaLabel: 'Numbered list',
     },
+    options: [
+      {
+        type: 'render',
+        key: 'numbered-style-buttons',
+        render: () => {
+          const handleSelect = (style) => {
+            closeDropdown(numberedList);
+            const item = { ...numberedList, command: 'toggleOrderedListStyle' };
+            superToolbar.emitCommand({ item, argument: style });
+          };
+          return h(NumberedStyleButtons, {
+            selectedStyle: numberedList.selectedValue.value,
+            onSelect: handleSelect,
+          });
+        },
+      },
+    ],
   });
 
   // indent left
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js b/packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js
index 28db7b3885..11ff4ab090 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js
+++ b/packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js
@@ -632,6 +632,15 @@ export class SuperToolbar extends EventEmitter {
           item.selectedValue.value = null;
         }
       },
+      numberedlist: () => {
+        if (commandState?.active) {
+          item.activate();
+          item.selectedValue.value = commandState.value;
+        } else {
+          item.deactivate();
+          item.selectedValue.value = null;
+        }
+      },
       default: () => {
         if (commandState?.active) item.activate();
         else item.deactivate();
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/toolbarIcons.js b/packages/super-editor/src/editors/v1/components/toolbar/toolbarIcons.js
index 8b8caf0f08..275a39e5e8 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/toolbarIcons.js
+++ b/packages/super-editor/src/editors/v1/components/toolbar/toolbarIcons.js
@@ -5,6 +5,13 @@ import listIconSvg from '@superdoc/common/icons/list-solid.svg?raw';
 import listCircleIconSvg from '@superdoc/common/icons/list-circle-solid.svg?raw';
 import listSquareIconSvg from '@superdoc/common/icons/list-square-solid.svg?raw';
 import listOlIconSvg from '@superdoc/common/icons/list-ol-solid.svg?raw';
+import listDecimalIconSvg from '@superdoc/common/icons/list-decimal-solid.svg?raw';
+import listDecimalParenIconSvg from '@superdoc/common/icons/list-decimal-paren-solid.svg?raw';
+import listUpperRomanIconSvg from '@superdoc/common/icons/list-upper-roman-solid.svg?raw';
+import listLowerRomanIconSvg from '@superdoc/common/icons/list-lower-roman-solid.svg?raw';
+import listUpperAlphaIconSvg from '@superdoc/common/icons/list-upper-alpha-solid.svg?raw';
+import listLowerAlphaIconSvg from '@superdoc/common/icons/list-lower-alpha-solid.svg?raw';
+import listLowerAlphaParenIconSvg from '@superdoc/common/icons/list-lower-alpha-paren-solid.svg?raw';
 import imageIconSvg from '@superdoc/common/icons/image-solid.svg?raw';
 import linkIconSvg from '@superdoc/common/icons/link-solid.svg?raw';
 import alignLeftIconSvg from '@superdoc/common/icons/align-left-solid.svg?raw';
@@ -70,6 +77,13 @@ export const toolbarIcons = {
   bulletListCircle: listCircleIconSvg,
   bulletListSquare: listSquareIconSvg,
   numberedList: listOlIconSvg,
+  numberedListDecimal: listDecimalIconSvg,
+  numberedListDecimalParen: listDecimalParenIconSvg,
+  numberedListUpperRoman: listUpperRomanIconSvg,
+  numberedListLowerRoman: listLowerRomanIconSvg,
+  numberedListUpperAlpha: listUpperAlphaIconSvg,
+  numberedListLowerAlpha: listLowerAlphaIconSvg,
+  numberedListLowerAlphaParen: listLowerAlphaParenIconSvg,
   indentLeft: outdentIconSvg,
   indentRight: indentIconSvg,
   pageBreak: fileHalfDashedIconSvg,
diff --git a/packages/super-editor/src/editors/v1/core/commands/toggleList.js b/packages/super-editor/src/editors/v1/core/commands/toggleList.js
index 7aebd43a76..4eeccdbb9f 100644
--- a/packages/super-editor/src/editors/v1/core/commands/toggleList.js
+++ b/packages/super-editor/src/editors/v1/core/commands/toggleList.js
@@ -1,6 +1,6 @@
 // @ts-check
 import { updateNumberingProperties } from './changeListLevel.js';
-import { ListHelpers, markerTextToBulletStyle } from '@helpers/list-numbering-helpers.js';
+import { ListHelpers, markerTextToBulletStyle, numberingInfoToOrderedStyle } from '@helpers/list-numbering-helpers.js';
 import { getResolvedParagraphProperties } from '@extensions/paragraph/resolvedPropertiesCache.js';
 import { isVisuallyEmptyParagraph } from './removeNumberingProperties.js';
 import { Selection, TextSelection } from 'prosemirror-state';
@@ -26,7 +26,14 @@ function getParagraphListKind(node, editor) {
   return numFmtIsBullet(fmt) ? 'bullet' : 'ordered';
 }
 
-function paragraphMatchesToggleListType(node, editor, listType, bulletStyle) {
+/**
+ * @param {any} node
+ * @param {any} editor
+ * @param {string} listType
+ * @param {'disc'|'circle'|'square'|null} [bulletStyle]
+ * @param {import('../../extensions/types/paragraph-commands.js').OrderedListStyle|null} [orderedStyle]
+ */
+function paragraphMatchesToggleListType(node, editor, listType, bulletStyle, orderedStyle) {
   const kind = getParagraphListKind(node, editor);
   if (!kind) return false;
   if (listType === 'bulletList') {
@@ -35,7 +42,12 @@ function paragraphMatchesToggleListType(node, editor, listType, bulletStyle) {
     const markerText = node.attrs.listRendering?.markerText;
     return markerTextToBulletStyle(markerText) === bulletStyle;
   }
-  if (listType === 'orderedList') return kind === 'ordered';
+  if (listType === 'orderedList') {
+    if (kind !== 'ordered') return false;
+    if (!orderedStyle) return true;
+    const { numberingType, markerText } = node.attrs.listRendering ?? {};
+    return numberingInfoToOrderedStyle(numberingType, markerText) === orderedStyle;
+  }
   return false;
 }
 
@@ -64,14 +76,19 @@ function getPrecedingParagraphForListReuse(doc, from, paragraphsInSelection) {
   return nb?.type?.name === 'paragraph' ? nb : null;
 }
 
+/**
+ * @param {string} listType
+ * @param {'disc'|'circle'|'square'|null} [bulletStyle]
+ * @param {import('../../extensions/types/paragraph-commands.js').OrderedListStyle|null} [orderedStyle]
+ */
 export const toggleList =
-  (listType, bulletStyle) =>
+  (listType, bulletStyle, orderedStyle) =>
   ({ editor, state, tr, dispatch }) => {
     if (listType !== 'orderedList' && listType !== 'bulletList') {
       return false;
     }
 
-    const predicate = (n) => paragraphMatchesToggleListType(n, editor, listType, bulletStyle);
+    const predicate = (n) => paragraphMatchesToggleListType(n, editor, listType, bulletStyle, orderedStyle);
     const { selection } = state;
     const { from, to } = selection;
     let firstListNode = null;
@@ -132,7 +149,7 @@ export const toggleList =
 
     if (mode === 'create') {
       const numId = ListHelpers.getNewListId(editor);
-      ListHelpers.generateNewListDefinition({ numId: Number(numId), listType, editor, bulletStyle });
+      ListHelpers.generateNewListDefinition({ numId: Number(numId), listType, editor, bulletStyle, orderedStyle });
       sharedNumberingProperties = {
         numId: Number(numId),
         ilvl: 0,
diff --git a/packages/super-editor/src/editors/v1/core/helpers/list-numbering-helpers.js b/packages/super-editor/src/editors/v1/core/helpers/list-numbering-helpers.js
index 3c584f2b70..84cddff10a 100644
--- a/packages/super-editor/src/editors/v1/core/helpers/list-numbering-helpers.js
+++ b/packages/super-editor/src/editors/v1/core/helpers/list-numbering-helpers.js
@@ -5,7 +5,6 @@ import { translator as wNumTranslator } from '@core/super-converter/v3/handlers/
 import { baseBulletList, baseOrderedListDef } from './baseListDefinitions';
 import { updateNumberingProperties } from '@core/commands/changeListLevel';
 import { findParentNode } from './findParentNode.js';
-
 import {
   generateNewListDefinition as pureGenerateNewListDefinition,
   changeNumIdSameAbstract as pureChangeNumIdSameAbstract,
@@ -40,6 +39,26 @@ export function markerTextToBulletStyle(markerText) {
   return map[markerText] ?? null;
 }
 
+/**
+ * Maps `listRendering.numberingType` + last char of `listRendering.markerText` to a named ordered style.
+ * Returns null for unrecognized combinations.
+ * @param {import('../../extensions/types/paragraph-commands.js').OrderedListStyle|null|undefined} numberingType
+ * @param {string|null|undefined} markerText
+ * @returns {import('../../extensions/types/paragraph-commands.js').OrderedListStyle|null}
+ */
+export function numberingInfoToOrderedStyle(numberingType, markerText) {
+  const suffix = markerText?.slice(-1);
+  /** @type {Record<string, Record<string, import('../../extensions/types/paragraph-commands.js').OrderedListStyle>>} */
+  const map = {
+    decimal: { '.': 'decimal', ')': 'decimal-paren' },
+    upperRoman: { '.': 'upper-roman' },
+    lowerRoman: { '.': 'lower-roman' },
+    upperLetter: { '.': 'upper-alpha' },
+    lowerLetter: { '.': 'lower-alpha', ')': 'lower-alpha-paren' },
+  };
+  return map[numberingType]?.[suffix] ?? null;
+}
+
 /**
  * Generate a new list definition for the given list type.
  * @param {Object} param0
@@ -51,6 +70,7 @@ export function markerTextToBulletStyle(markerText) {
  * @param {string} [param0.fmt]
  * @param {string} [param0.markerFontFamily]
  * @param {'disc'|'circle'|'square'} [param0.bulletStyle]
+ * @param {import('../../extensions/types/paragraph-commands.js').OrderedListStyle} [param0.orderedStyle]
  * @param {import('../Editor').Editor} param0.editor
  * @returns {Object} The new abstract and num definitions.
  */
@@ -64,6 +84,7 @@ export const generateNewListDefinition = ({
   editor,
   markerFontFamily,
   bulletStyle,
+  orderedStyle,
 }) => {
   /** @type {{ abstractDef: any, numDef: any }} */
   let resultDefs;
@@ -78,6 +99,7 @@ export const generateNewListDefinition = ({
       fmt,
       markerFontFamily,
       bulletStyle,
+      orderedStyle,
     });
     resultDefs = { abstractDef: result.abstractDef, numDef: result.numDef };
   });
diff --git a/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts b/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts
index 487a80a99e..929a138b94 100644
--- a/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts
+++ b/packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts
@@ -12,6 +12,7 @@
  */
 
 import { baseBulletList, baseOrderedListDef } from '../../helpers/baseListDefinitions.js';
+import type { OrderedListStyle } from '../../../extensions/types/paragraph-commands.js';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -31,6 +32,7 @@ interface GenerateOptions {
   fmt?: string | null;
   markerFontFamily?: string | null;
   bulletStyle?: 'disc' | 'circle' | 'square' | null;
+  orderedStyle?: OrderedListStyle | null;
 }
 
 const BULLET_STYLE_CHARS: Record<string, string> = {
@@ -39,6 +41,16 @@ const BULLET_STYLE_CHARS: Record<string, string> = {
   square: '▪',
 };
 
+const ORDERED_LIST_STYLES: Record<string, { fmt: string; text: string }> = {
+  decimal: { fmt: 'decimal', text: '%1.' },
+  'decimal-paren': { fmt: 'decimal', text: '%1)' },
+  'upper-roman': { fmt: 'upperRoman', text: '%1.' },
+  'lower-roman': { fmt: 'lowerRoman', text: '%1.' },
+  'upper-alpha': { fmt: 'upperLetter', text: '%1.' },
+  'lower-alpha': { fmt: 'lowerLetter', text: '%1.' },
+  'lower-alpha-paren': { fmt: 'lowerLetter', text: '%1)' },
+};
+
 interface GenerateResult {
   numId: number;
   abstractId: number;
@@ -79,7 +91,7 @@ function buildNumDef(numId: number, abstractId: number): any {
  */
 export function generateNewListDefinition(numbering: NumberingModel, options: GenerateOptions): GenerateResult {
   let { listType } = options;
-  const { numId, level, start, text, fmt, markerFontFamily, bulletStyle } = options;
+  const { numId, level, start, text, fmt, markerFontFamily, bulletStyle, orderedStyle } = options;
   if (typeof listType !== 'string') listType = (listType as any).name;
 
   const definition = listType === 'orderedList' ? baseOrderedListDef : baseBulletList;
@@ -112,6 +124,24 @@ export function generateNewListDefinition(numbering: NumberingModel, options: Ge
     }
   }
 
+  // Override the ordered list style for the new list if an ordered style is provided
+  const shouldOverrideOrderedStyle = orderedStyle && listType === 'orderedList';
+  if (shouldOverrideOrderedStyle) {
+    const styleConfig = ORDERED_LIST_STYLES[orderedStyle];
+
+    if (styleConfig) {
+      const lvl0 = newAbstractDef.elements.find((el: any) => el.name === 'w:lvl' && el.attributes['w:ilvl'] === '0');
+
+      if (lvl0) {
+        const numFmt = lvl0.elements.find((el: any) => el.name === 'w:numFmt');
+        if (numFmt) numFmt.attributes['w:val'] = styleConfig.fmt;
+
+        const lvlText = lvl0.elements.find((el: any) => el.name === 'w:lvlText');
+        if (lvlText) lvlText.attributes['w:val'] = styleConfig.text;
+      }
+    }
+  }
+
   if (level != null && start != null && text != null && fmt != null) {
     if (numbering.definitions[numId]) {
       const abstractId = numbering.definitions[numId]?.elements[0]?.attributes['w:val'];
diff --git a/packages/super-editor/src/editors/v1/extensions/paragraph/paragraph.js b/packages/super-editor/src/editors/v1/extensions/paragraph/paragraph.js
index 0d51b7e617..f8e8de976a 100644
--- a/packages/super-editor/src/editors/v1/extensions/paragraph/paragraph.js
+++ b/packages/super-editor/src/editors/v1/extensions/paragraph/paragraph.js
@@ -334,6 +334,15 @@ export const Paragraph = OxmlNode.create({
       toggleBulletListStyle: (style) => (params) => {
         return toggleList('bulletList', style)(params);
       },
+      /**
+       * Toggle an ordered list with a specific numbering style at the current selection
+       * @category Command
+       * @example
+       * editor.commands.toggleOrderedListStyle('upper-roman')
+       */
+      toggleOrderedListStyle: (style) => (params) => {
+        return toggleList('orderedList', null, style)(params);
+      },
 
       /**
        * Restart numbering for the current list
diff --git a/packages/super-editor/src/editors/v1/extensions/types/paragraph-commands.ts b/packages/super-editor/src/editors/v1/extensions/types/paragraph-commands.ts
index 06681a3037..c06b7fcc65 100644
--- a/packages/super-editor/src/editors/v1/extensions/types/paragraph-commands.ts
+++ b/packages/super-editor/src/editors/v1/extensions/types/paragraph-commands.ts
@@ -4,6 +4,15 @@
  * @module ParagraphCommands
  */
 
+export type OrderedListStyle =
+  | 'decimal'
+  | 'decimal-paren'
+  | 'upper-roman'
+  | 'lower-roman'
+  | 'upper-alpha'
+  | 'lower-alpha'
+  | 'lower-alpha-paren';
+
 export interface ParagraphCommands {
   // ============================================
   // LIST COMMANDS
@@ -18,6 +27,9 @@ export interface ParagraphCommands {
   /** Toggle a bullet list with a specific style ('disc' | 'circle' | 'square') */
   toggleBulletListStyle: (style: 'disc' | 'circle' | 'square') => boolean;
 
+  /** Toggle an ordered list with a specific numbering style */
+  toggleOrderedListStyle: (style: OrderedListStyle) => boolean;
+
   /** Restart numbering for the current list item */
   restartNumbering: () => boolean;
 
diff --git a/packages/super-editor/src/headless-toolbar/create-headless-toolbar.test.ts b/packages/super-editor/src/headless-toolbar/create-headless-toolbar.test.ts
index 41a057582c..f035397218 100644
--- a/packages/super-editor/src/headless-toolbar/create-headless-toolbar.test.ts
+++ b/packages/super-editor/src/headless-toolbar/create-headless-toolbar.test.ts
@@ -501,10 +501,10 @@ describe('createHeadlessToolbar', () => {
   });
 
   it('executes numbered-list through the registry direct command path', () => {
-    const toggleOrderedList = vi.fn(() => true);
+    const toggleOrderedListStyle = vi.fn(() => true);
     const superdoc = createActiveEditorHost({
       commands: {
-        toggleOrderedList,
+        toggleOrderedListStyle,
       },
       state: createSelectionState({
         empty: true,
@@ -523,7 +523,7 @@ describe('createHeadlessToolbar', () => {
     });
 
     expect(controller.execute?.('numbered-list')).toBe(true);
-    expect(toggleOrderedList).toHaveBeenCalledTimes(1);
+    expect(toggleOrderedListStyle).toHaveBeenCalledTimes(1);
 
     controller.destroy();
   });
diff --git a/packages/super-editor/src/headless-toolbar/helpers/paragraph.ts b/packages/super-editor/src/headless-toolbar/helpers/paragraph.ts
index 8ff4b0598c..785a7d1433 100644
--- a/packages/super-editor/src/headless-toolbar/helpers/paragraph.ts
+++ b/packages/super-editor/src/headless-toolbar/helpers/paragraph.ts
@@ -1,4 +1,6 @@
 import { isList } from '../../editors/v1/core/commands/list-helpers/is-list.js';
+import { numberingInfoToOrderedStyle } from '../../editors/v1/core/helpers/list-numbering-helpers.js';
+import type { OrderedListStyle } from '../../editors/v1/extensions/types/paragraph-commands.js';
 import { twipsToLines } from '../../editors/v1/core/super-converter/helpers.js';
 import { getQuickFormatList } from '../../editors/v1/extensions/linked-styles/index.js';
 import { getCurrentParagraphParent, getCurrentResolvedParagraphProperties, resolveStateEditor } from './context.js';
@@ -122,10 +124,12 @@ export const createListStateDeriver =
       return { active: isActive, disabled: false, value: markerText };
     }
 
-    return {
-      active: isActive,
-      disabled: false,
-    };
+    const activeNumberingFmt = isActive ? (paragraphNode?.attrs?.listRendering?.numberingType ?? null) : null;
+    const activeMarkerText = isActive ? (paragraphNode?.attrs?.listRendering?.markerText ?? null) : null;
+    const orderedStyleValue = (
+      activeNumberingFmt && activeMarkerText ? numberingInfoToOrderedStyle(activeNumberingFmt, activeMarkerText) : null
+    ) as OrderedListStyle | null;
+    return { active: isActive, disabled: false, value: orderedStyleValue };
   };
 
 export const createIndentIncreaseExecute =
diff --git a/packages/super-editor/src/headless-toolbar/toolbar-registry.test.ts b/packages/super-editor/src/headless-toolbar/toolbar-registry.test.ts
index 9d705a752f..391142e6a5 100644
--- a/packages/super-editor/src/headless-toolbar/toolbar-registry.test.ts
+++ b/packages/super-editor/src/headless-toolbar/toolbar-registry.test.ts
@@ -566,6 +566,7 @@ describe('createToolbarRegistry', () => {
                         attrs: {
                           listRendering: {
                             numberingType: 'decimal',
+                            markerText: '1.',
                           },
                           paragraphProperties: {
                             numberingProperties: {
@@ -589,6 +590,7 @@ describe('createToolbarRegistry', () => {
     expect(state).toEqual({
       active: true,
       disabled: false,
+      value: 'decimal',
     });
   });
 
diff --git a/packages/super-editor/src/headless-toolbar/toolbar-registry.ts b/packages/super-editor/src/headless-toolbar/toolbar-registry.ts
index a4026e9422..a6c7943eac 100644
--- a/packages/super-editor/src/headless-toolbar/toolbar-registry.ts
+++ b/packages/super-editor/src/headless-toolbar/toolbar-registry.ts
@@ -124,7 +124,7 @@ export const createToolbarRegistry = (): Partial<Record<PublicToolbarItemId, Bui
     },
     'numbered-list': {
       id: 'numbered-list',
-      directCommandName: 'toggleOrderedList',
+      directCommandName: 'toggleOrderedListStyle',
       state: createListStateDeriver('ordered'),
     },
     'indent-increase': {
diff --git a/shared/common/icons/list-decimal-paren-solid.svg b/shared/common/icons/list-decimal-paren-solid.svg
new file mode 100644
index 0000000000..799e9a7438
--- /dev/null
+++ b/shared/common/icons/list-decimal-paren-solid.svg
@@ -0,0 +1,13 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_12)">
+<path d="M260 54C242.3 54 228 68.3 228 86C228 103.7 242.3 118 260 118H480C497.7 118 512 103.7 512 86C512 68.3 497.7 54 480 54H260ZM260 224C242.3 224 228 238.3 228 256C228 273.7 242.3 288 260 288H480C497.7 288 512 273.7 512 256C512 238.3 497.7 224 480 224H260ZM260 394C242.3 394 228 408.3 228 426C228 443.7 242.3 458 260 458H480C497.7 458 512 443.7 512 426C512 408.3 497.7 394 480 394H260Z" fill="currentColor"/>
+<path d="M119.768 25.1818V127H98.2415V45.6151H97.6449L74.3281 60.2315V41.1406L99.5341 25.1818H119.768ZM179.863 76.0909C179.863 88.4536 178.205 99.822 174.891 110.196C171.61 120.57 166.572 130.182 159.777 139.031H139.543C142.128 135.75 144.531 131.74 146.752 127C148.972 122.26 150.911 117.09 152.569 111.489C154.226 105.854 155.518 100.021 156.446 93.9886C157.374 87.9564 157.838 81.9905 157.838 76.0909C157.838 68.2358 157.026 60.3144 155.402 52.3267C153.811 44.3059 151.624 36.8816 148.84 30.054C146.089 23.1932 142.99 17.5753 139.543 13.2003H159.777C166.572 22.0497 171.61 31.6615 174.891 42.0355C178.205 52.4096 179.863 63.7614 179.863 76.0909Z" fill="currentColor"/>
+<path d="M55.7841 300V284.489L92.027 250.93C95.1094 247.947 97.6946 245.263 99.7827 242.876C101.904 240.49 103.511 238.153 104.605 235.866C105.699 233.546 106.246 231.044 106.246 228.359C106.246 225.376 105.566 222.808 104.207 220.653C102.848 218.466 100.992 216.792 98.6392 215.632C96.286 214.439 93.6179 213.842 90.6349 213.842C87.5194 213.842 84.8016 214.472 82.4815 215.732C80.1615 216.991 78.3717 218.797 77.1122 221.151C75.8527 223.504 75.223 226.304 75.223 229.553H54.7898C54.7898 222.891 56.2978 217.107 59.3139 212.202C62.33 207.296 66.5559 203.501 71.9915 200.817C77.4271 198.132 83.6913 196.79 90.7841 196.79C98.0758 196.79 104.423 198.082 109.825 200.668C115.261 203.22 119.487 206.766 122.503 211.307C125.519 215.848 127.027 221.051 127.027 226.918C127.027 230.762 126.265 234.557 124.74 238.303C123.249 242.048 120.58 246.207 116.736 250.781C112.891 255.322 107.472 260.774 100.479 267.138L85.6136 281.705V282.401H128.369V300H55.7841ZM179.863 249.091C179.863 261.454 178.205 272.822 174.891 283.196C171.61 293.57 166.572 303.182 159.777 312.031H139.543C142.128 308.75 144.531 304.74 146.752 300C148.972 295.26 150.911 290.09 152.569 284.489C154.226 278.854 155.518 273.021 156.446 266.989C157.374 260.956 157.838 254.991 157.838 249.091C157.838 241.236 157.026 233.314 155.402 225.327C153.811 217.306 151.624 209.882 148.84 203.054C146.089 196.193 142.99 190.575 139.543 186.2H159.777C166.572 195.05 171.61 204.661 174.891 215.036C178.205 225.41 179.863 236.761 179.863 249.091Z" fill="currentColor"/>
+<path d="M89.3175 473.392C81.8932 473.392 75.281 472.116 69.4808 469.564C63.7138 466.979 59.1565 463.432 55.8089 458.925C52.4946 454.384 50.7876 449.147 50.6882 443.214H72.3643C72.4969 445.7 73.3089 447.888 74.8004 449.777C76.325 451.633 78.3468 453.075 80.8658 454.102C83.3847 455.13 86.2185 455.643 89.3672 455.643C92.6484 455.643 95.5485 455.063 98.0675 453.903C100.586 452.743 102.558 451.136 103.984 449.081C105.409 447.026 106.121 444.656 106.121 441.972C106.121 439.254 105.359 436.851 103.835 434.763C102.343 432.642 100.189 430.984 97.3715 429.791C94.5874 428.598 91.273 428.001 87.4283 428.001H77.9325V412.192H87.4283C90.6764 412.192 93.5433 411.628 96.0291 410.501C98.5481 409.375 100.504 407.817 101.896 405.828C103.288 403.806 103.984 401.453 103.984 398.768C103.984 396.216 103.371 393.979 102.144 392.057C100.951 390.101 99.2607 388.577 97.0732 387.483C94.9188 386.389 92.3999 385.842 89.5163 385.842C86.5997 385.842 83.9316 386.373 81.5121 387.433C79.0926 388.461 77.1536 389.936 75.6953 391.858C74.237 393.78 73.4581 396.034 73.3587 398.619H52.7266C52.826 392.753 54.4998 387.582 57.7479 383.108C60.996 378.634 65.371 375.137 70.8729 372.618C76.4079 370.066 82.6555 368.79 89.6158 368.79C96.6423 368.79 102.79 370.066 108.06 372.618C113.33 375.17 117.424 378.617 120.34 382.959C123.29 387.268 124.748 392.107 124.715 397.476C124.748 403.177 122.975 407.933 119.396 411.744C115.849 415.556 111.226 417.975 105.525 419.003V419.798C113.015 420.759 118.716 423.361 122.627 427.604C126.571 431.813 128.527 437.083 128.494 443.413C128.527 449.214 126.853 454.367 123.472 458.875C120.125 463.383 115.501 466.929 109.602 469.514C103.702 472.099 96.9406 473.392 89.3175 473.392ZM179.863 421.091C179.863 433.454 178.205 444.822 174.891 455.196C171.61 465.57 166.572 475.182 159.777 484.031H139.543C142.128 480.75 144.531 476.74 146.752 472C148.972 467.26 150.911 462.09 152.569 456.489C154.226 450.854 155.518 445.021 156.446 438.989C157.374 432.956 157.838 426.991 157.838 421.091C157.838 413.236 157.026 405.314 155.402 397.327C153.811 389.306 151.624 381.882 148.84 375.054C146.089 368.193 142.99 362.575 139.543 358.2H159.777C166.572 367.05 171.61 376.661 174.891 387.036C178.205 397.41 179.863 408.761 179.863 421.091Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_1_12">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/shared/common/icons/list-decimal-solid.svg b/shared/common/icons/list-decimal-solid.svg
new file mode 100644
index 0000000000..3fd9c615c1
--- /dev/null
+++ b/shared/common/icons/list-decimal-solid.svg
@@ -0,0 +1,13 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_0_1)">
+<path d="M260 54C242.3 54 228 68.3 228 86C228 103.7 242.3 118 260 118H480C497.7 118 512 103.7 512 86C512 68.3 497.7 54 480 54H260ZM260 224C242.3 224 228 238.3 228 256C228 273.7 242.3 288 260 288H480C497.7 288 512 273.7 512 256C512 238.3 497.7 224 480 224H260ZM260 394C242.3 394 228 408.3 228 426C228 443.7 242.3 458 260 458H480C497.7 458 512 443.7 512 426C512 408.3 497.7 394 480 394H260Z" fill="currentColor"/>
+<path d="M131.823 9.18182V111H110.296V29.6151H109.7L86.3828 44.2315V25.1406L111.589 9.18182H131.823ZM163.132 112.293C159.85 112.293 157.033 111.133 154.68 108.812C152.36 106.459 151.2 103.642 151.2 100.361C151.2 97.1127 152.36 94.3286 154.68 92.0085C157.033 89.6884 159.85 88.5284 163.132 88.5284C166.314 88.5284 169.098 89.6884 171.484 92.0085C173.87 94.3286 175.064 97.1127 175.064 100.361C175.064 102.548 174.5 104.554 173.373 106.376C172.279 108.166 170.838 109.608 169.048 110.702C167.258 111.762 165.286 112.293 163.132 112.293Z" fill="currentColor"/>
+<path d="M62.37 284V268.489L98.6129 234.93C101.695 231.947 104.281 229.263 106.369 226.876C108.49 224.49 110.097 222.153 111.191 219.866C112.285 217.546 112.832 215.044 112.832 212.359C112.832 209.376 112.152 206.808 110.793 204.653C109.434 202.466 107.578 200.792 105.225 199.632C102.872 198.439 100.204 197.842 97.2209 197.842C94.1054 197.842 91.3875 198.472 89.0675 199.732C86.7474 200.991 84.9576 202.797 83.6982 205.151C82.4387 207.504 81.8089 210.304 81.8089 213.553H61.3757C61.3757 206.891 62.8838 201.107 65.8999 196.202C68.916 191.296 73.1418 187.501 78.5774 184.817C84.013 182.132 90.2772 180.79 97.37 180.79C104.662 180.79 111.009 182.082 116.411 184.668C121.847 187.22 126.073 190.766 129.089 195.307C132.105 199.848 133.613 205.051 133.613 210.918C133.613 214.762 132.851 218.557 131.326 222.303C129.835 226.048 127.166 230.207 123.322 234.781C119.477 239.322 114.058 244.774 107.065 251.138L92.1996 265.705V266.401H134.955V284H62.37ZM163.132 285.293C159.85 285.293 157.033 284.133 154.68 281.812C152.36 279.459 151.2 276.642 151.2 273.361C151.2 270.113 152.36 267.329 154.68 265.009C157.033 262.688 159.85 261.528 163.132 261.528C166.314 261.528 169.098 262.688 171.484 265.009C173.87 267.329 175.064 270.113 175.064 273.361C175.064 275.548 174.5 277.554 173.373 279.376C172.279 281.166 170.838 282.608 169.048 283.702C167.258 284.762 165.286 285.293 163.132 285.293Z" fill="currentColor"/>
+<path d="M98.7745 451.392C91.3503 451.392 84.738 450.116 78.9379 447.564C73.1708 444.979 68.6135 441.432 65.266 436.925C61.9516 432.384 60.2447 427.147 60.1452 421.214H81.8214C81.954 423.7 82.766 425.888 84.2575 427.777C85.7821 429.633 87.8039 431.075 90.3228 432.102C92.8417 433.13 95.6755 433.643 98.8242 433.643C102.105 433.643 105.006 433.063 107.525 431.903C110.043 430.743 112.016 429.136 113.441 427.081C114.866 425.026 115.578 422.656 115.578 419.972C115.578 417.254 114.816 414.851 113.292 412.763C111.8 410.642 109.646 408.984 106.828 407.791C104.044 406.598 100.73 406.001 96.8853 406.001H87.3896V390.192H96.8853C100.133 390.192 103 389.628 105.486 388.501C108.005 387.375 109.961 385.817 111.353 383.828C112.745 381.806 113.441 379.453 113.441 376.768C113.441 374.216 112.828 371.979 111.601 370.057C110.408 368.101 108.718 366.577 106.53 365.483C104.376 364.389 101.857 363.842 98.9734 363.842C96.0567 363.842 93.3886 364.373 90.9691 365.433C88.5496 366.461 86.6107 367.936 85.1523 369.858C83.694 371.78 82.9151 374.034 82.8157 376.619H62.1836C62.283 370.753 63.9568 365.582 67.2049 361.108C70.453 356.634 74.828 353.137 80.3299 350.618C85.8649 348.066 92.1126 346.79 99.0728 346.79C106.099 346.79 112.248 348.066 117.517 350.618C122.787 353.17 126.881 356.617 129.797 360.959C132.747 365.268 134.205 370.107 134.172 375.476C134.205 381.177 132.432 385.933 128.853 389.744C125.306 393.556 120.683 395.975 114.982 397.003V397.798C122.472 398.759 128.173 401.361 132.084 405.604C136.028 409.813 137.984 415.083 137.951 421.413C137.984 427.214 136.31 432.367 132.929 436.875C129.582 441.383 124.958 444.929 119.059 447.514C113.159 450.099 106.398 451.392 98.7745 451.392ZM163.132 451.293C159.85 451.293 157.033 450.133 154.68 447.812C152.36 445.459 151.2 442.642 151.2 439.361C151.2 436.113 152.36 433.329 154.68 431.009C157.033 428.688 159.85 427.528 163.132 427.528C166.314 427.528 169.098 428.688 171.484 431.009C173.87 433.329 175.064 436.113 175.064 439.361C175.064 441.548 174.5 443.554 173.373 445.376C172.279 447.166 170.838 448.608 169.048 449.702C167.258 450.762 165.286 451.293 163.132 451.293Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_0_1">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/shared/common/icons/list-lower-alpha-paren-solid.svg b/shared/common/icons/list-lower-alpha-paren-solid.svg
new file mode 100644
index 0000000000..cb808f946f
--- /dev/null
+++ b/shared/common/icons/list-lower-alpha-paren-solid.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="currentColor" d="M260 54C242.3 54 228 68.3 228 86C228 103.7 242.3 118 260 118H480C497.7 118 512 103.7 512 86C512 68.3 497.7 54 480 54H260ZM260 224C242.3 224 228 238.3 228 256C228 273.7 242.3 288 260 288H480C497.7 288 512 273.7 512 256C512 238.3 497.7 224 480 224H260ZM260 394C242.3 394 228 408.3 228 426C228 443.7 242.3 458 260 458H480C497.7 458 512 443.7 512 426C512 408.3 497.7 394 480 394H260Z"/>
+  <text fill="currentColor" font-family="sans-serif" font-weight="bold" font-size="140" text-anchor="end" x="210" y="74" dominant-baseline="central">a)</text>
+  <text fill="currentColor" font-family="sans-serif" font-weight="bold" font-size="140" text-anchor="end" x="210" y="244" dominant-baseline="central">b)</text>
+  <text fill="currentColor" font-family="sans-serif" font-weight="bold" font-size="140" text-anchor="end" x="210" y="414" dominant-baseline="central">c)</text>
+</svg>
diff --git a/shared/common/icons/list-lower-alpha-solid.svg b/shared/common/icons/list-lower-alpha-solid.svg
new file mode 100644
index 0000000000..a68f8f6037
--- /dev/null
+++ b/shared/common/icons/list-lower-alpha-solid.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="currentColor" d="M260 54C242.3 54 228 68.3 228 86C228 103.7 242.3 118 260 118H480C497.7 118 512 103.7 512 86C512 68.3 497.7 54 480 54H260ZM260 224C242.3 224 228 238.3 228 256C228 273.7 242.3 288 260 288H480C497.7 288 512 273.7 512 256C512 238.3 497.7 224 480 224H260ZM260 394C242.3 394 228 408.3 228 426C228 443.7 242.3 458 260 458H480C497.7 458 512 443.7 512 426C512 408.3 497.7 394 480 394H260Z"/>
+  <text fill="currentColor" font-family="sans-serif" font-weight="bold" font-size="140" text-anchor="end" x="210" y="74" dominant-baseline="central">a.</text>
+  <text fill="currentColor" font-family="sans-serif" font-weight="bold" font-size="140" text-anchor="end" x="210" y="244" dominant-baseline="central">b.</text>
+  <text fill="currentColor" font-family="sans-serif" font-weight="bold" font-size="140" text-anchor="end" x="210" y="414" dominant-baseline="central">c.</text>
+</svg>
diff --git a/shared/common/icons/list-lower-roman-solid.svg b/shared/common/icons/list-lower-roman-solid.svg
new file mode 100644
index 0000000000..8043cb4059
--- /dev/null
+++ b/shared/common/icons/list-lower-roman-solid.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="currentColor" d="M260 54C242.3 54 228 68.3 228 86C228 103.7 242.3 118 260 118H480C497.7 118 512 103.7 512 86C512 68.3 497.7 54 480 54H260ZM260 224C242.3 224 228 238.3 228 256C228 273.7 242.3 288 260 288H480C497.7 288 512 273.7 512 256C512 238.3 497.7 224 480 224H260ZM260 394C242.3 394 228 408.3 228 426C228 443.7 242.3 458 260 458H480C497.7 458 512 443.7 512 426C512 408.3 497.7 394 480 394H260Z"/>
+  <text fill="currentColor" font-family="Georgia, serif" font-weight="bold" font-size="120" text-anchor="end" x="210" y="86" dominant-baseline="central">i.</text>
+  <text fill="currentColor" font-family="Georgia, serif" font-weight="bold" font-size="120" text-anchor="end" x="210" y="256" dominant-baseline="central">ii.</text>
+  <text fill="currentColor" font-family="Georgia, serif" font-weight="bold" font-size="120" text-anchor="end" x="210" y="426" dominant-baseline="central">iii.</text>
+</svg>
diff --git a/shared/common/icons/list-upper-alpha-solid.svg b/shared/common/icons/list-upper-alpha-solid.svg
new file mode 100644
index 0000000000..08ddfeeba1
--- /dev/null
+++ b/shared/common/icons/list-upper-alpha-solid.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="currentColor" d="M260 54c-17.7 0-32 14.3-32 32s14.3 32 32 32l220 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L260 54zm0 170c-17.7 0-32 14.3-32 32s14.3 32 32 32l220 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-220 0zm0 170c-17.7 0-32 14.3-32 32s14.3 32 32 32l220 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-220 0z"/>
+  <text fill="currentColor" font-family="sans-serif" font-weight="bold" font-size="140" text-anchor="end" x="210" y="86" dominant-baseline="central">A.</text>
+  <text fill="currentColor" font-family="sans-serif" font-weight="bold" font-size="140" text-anchor="end" x="210" y="256" dominant-baseline="central">B.</text>
+  <text fill="currentColor" font-family="sans-serif" font-weight="bold" font-size="140" text-anchor="end" x="210" y="426" dominant-baseline="central">C.</text>
+</svg>
diff --git a/shared/common/icons/list-upper-roman-solid.svg b/shared/common/icons/list-upper-roman-solid.svg
new file mode 100644
index 0000000000..e74d50cc38
--- /dev/null
+++ b/shared/common/icons/list-upper-roman-solid.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="currentColor" d="M260 54c-17.7 0-32 14.3-32 32s14.3 32 32 32l220 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L260 54zm0 170c-17.7 0-32 14.3-32 32s14.3 32 32 32l220 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-220 0zm0 170c-17.7 0-32 14.3-32 32s14.3 32 32 32l220 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-220 0z"/>
+  <text fill="currentColor" font-family="Georgia, serif" font-weight="bold" font-size="120" text-anchor="end" x="210" y="86" dominant-baseline="central">I.</text>
+  <text fill="currentColor" font-family="Georgia, serif" font-weight="bold" font-size="120" text-anchor="end" x="210" y="256" dominant-baseline="central">II.</text>
+  <text fill="currentColor" font-family="Georgia, serif" font-weight="bold" font-size="120" text-anchor="end" x="210" y="426" dominant-baseline="central">III.</text>
+</svg>

From 69b0ccbdd39b9219bc273feeb8db77a5da0805ef Mon Sep 17 00:00:00 2001
From: Gabriel Chittolina <gabrielchittolina1@gmail.com>
Date: Mon, 20 Apr 2026 15:53:39 -0300
Subject: [PATCH 6/6] chore: small UI tweaks

---
 .../editors/v1/components/toolbar/NumberedStyleButtons.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/super-editor/src/editors/v1/components/toolbar/NumberedStyleButtons.vue b/packages/super-editor/src/editors/v1/components/toolbar/NumberedStyleButtons.vue
index 1226159611..2281d02914 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/NumberedStyleButtons.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/NumberedStyleButtons.vue
@@ -101,8 +101,8 @@ onMounted(() => {
     padding: 5px;
     font-size: var(--sd-ui-font-size-600, 16px);
     color: var(--sd-ui-dropdown-text, #47484a);
-    width: 40px;
-    height: 40px;
+    width: 30px;
+    height: 30px;
     border-radius: var(--sd-ui-dropdown-option-radius, 3px);
     display: flex;
     justify-content: center;