Hierarchical/Level-aware List Bullet Styles for Nested Lists

Problem Statement

When rendering multi-level lists (common in AI-generated outlines, research summaries, or hierarchical data), all unordered list levels use the same list-disc (●) bullet style. This makes it harder to visually distinguish nesting depth at a glance.

Current behavior:
All <ul> elements use list-disc regardless of nesting depth — every level renders the same solid disc bullet (●).

Desired behavior:
Nested lists should use different bullet styles per depth level, similar to how Word/Google Docs/PowerPoint automatically cycle through bullet types (● → ○ → ■ → etc.) to indicate hierarchy.

Proposed Solution

Option 1: Add a listStyle prop/option

interface Options {
  // ... existing fields
  /**
   * Configure bullet style cycling for nested unordered lists.
   * Default: "flat" (current behavior — all levels use disc)
   */
  listStyle?:
    | "flat"            // Current behavior: disc at all levels
    | "hierarchical"    // Auto-cycle: disc → circle → square → disc ...
    | "academic"        // Word/PPT style: disc → circle → dash → diamond
    | "minimal"         // Fading: disc with decreasing opacity per level
    | ListStyleConfig;  // Custom per-level definitions
}

interface ListStyleConfig {
  levels: Array<"disc" | "circle" | "square" | "dash" | "none">;
  /** Opacity reduction per level (0-1), e.g. 0.3 means each level is 30% less opaque */
  opacityStep?: number;
}

Option 2: CSS-only via data-depth attribute on nested <ul> elements

Add a data-depth="0|1|2|..." attribute to each <ul> so users can target them with CSS:

ul[data-streamdown="unordered-list"][data-depth="0"] { list-style-type: disc; }
ul[data-streamdown="unordered-list"][data-depth="1"] { list-style-type: circle; }
ul[data-streamdown="unordered-list"][data-depth="2"] { list-style-type: square; }

Alternatives Considered

None

Use Case

Priority

Nice to have

Contribution

• I am willing to help implement this feature

Additional Context

Built-in themes could include:

No source file, test, or entry point is named. Start by locating the unordered-list rendering and existing list-disc behavior, then determine whether the prop-based or data-depth CSS approach fits the project. Done should include an agreed behavior for nested bullet levels, including defaults and customization, with coverage for the selected behavior.