diff --git a/README.md b/README.md
index 39b7b52e..130219ec 100644
--- a/README.md
+++ b/README.md
@@ -226,6 +226,9 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**OpenSFTP**](https://opensftp.com): Super beautiful SSH and SFTP integrated workspace client.
 - [**balena**](https://www.balena.io/): Balena is a full-stack solution for developing, deploying, updating, and troubleshooting IoT Edge devices. We use xterm.js to manage & debug devices on [balenaCloud](https://www.balena.io/cloud).
 - [**Filet Cloud**](https://github.com/fuglaro/filet-cloud): The lean and powerful personal cloud ⛅.
+- [**pyTermTk**](https://github.com/ceccopierangiolieugenio/pyTermTk): Python Terminal Toolkit - a Spiced Up Cross Compatible TUI Library 🌶️, use xterm.js for the [HTML5 exporter](https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html).
+- [**ecmaOS**](https://ecmaos.sh): A kernel and suite of applications tying modern web technologies into a browser-based operating system.
+- [**LabEx**](https://labex.io): Interactive learning platform with hands-on labs and xterm.js-based online terminals, focused on learn-by-doing approach.
 - [And much more...](https://github.com/xtermjs/xterm.js/network/dependents?package_id=UGFja2FnZS0xNjYzMjc4OQ%3D%3D)
 
 Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it on our list. Note: Please add any new contributions to the end of the list only.
diff --git a/addons/addon-fit/typings/addon-fit.d.ts b/addons/addon-fit/typings/addon-fit.d.ts
index e3d20e29..784b55d1 100644
--- a/addons/addon-fit/typings/addon-fit.d.ts
+++ b/addons/addon-fit/typings/addon-fit.d.ts
@@ -39,7 +39,7 @@ declare module '@xterm/addon-fit' {
   }
 
   /**
-   * Reprepresents the dimensions of a terminal.
+   * Represents the dimensions of a terminal.
    */
   export interface ITerminalDimensions {
     /**
diff --git a/addons/addon-ligatures/src/LigaturesAddon.ts b/addons/addon-ligatures/src/LigaturesAddon.ts
index 47fbc323..2bde9cf6 100644
--- a/addons/addon-ligatures/src/LigaturesAddon.ts
+++ b/addons/addon-ligatures/src/LigaturesAddon.ts
@@ -15,19 +15,22 @@ export interface ITerminalAddon {
 
 export class LigaturesAddon implements ITerminalAddon , ILigaturesApi {
   private readonly _fallbackLigatures: string[];
+  private readonly _fontFeatureSettings?: string;
 
   private _terminal: Terminal | undefined;
   private _characterJoinerId: number | undefined;
 
   constructor(options?: Partial<ILigatureOptions>) {
+    // Source: calt set from https://github.com/be5invis/Iosevka?tab=readme-ov-file#ligations
     this._fallbackLigatures = (options?.fallbackLigatures || [
       '<--', '<---', '<<-', '<-', '->', '->>', '-->', '--->',
       '<==', '<===', '<<=', '<=', '=>', '=>>', '==>', '===>', '>=', '>>=',
-      '<->', '<-->', '<--->', '<---->', '<=>', '<==>', '<===>', '<====>', '-------->',
-      '<~~', '<~', '~>', '~~>', '::', ':::', '==', '!=', '===', '!==',
-      ':=', ':-', ':+', '<*', '<*>', '*>', '<|', '<|>', '|>', '+:', '-:', '=:', ':>',
-      '++', '+++', '<!--', '<!---', '<***>'
+      '<->', '<-->', '<--->', '<---->', '<=>', '<==>', '<===>', '<====>', '::', ':::',
+      '<~~', '</', '</>', '/>', '~~>', '==', '!=', '/=', '~=', '<>', '===', '!==', '!===',
+      '<:', ':=', '*=', '*+', '<*', '<*>', '*>', '<|', '<|>', '|>', '+*', '=*', '=:', ':>',
+      '/*', '*/', '+++', '<!--', '<!---'
     ]).sort((a, b) => b.length - a.length);
+    this._fontFeatureSettings = options?.fontFeatureSettings;
   }
 
   public activate(terminal: Terminal): void {
@@ -36,7 +39,7 @@ export class LigaturesAddon implements ITerminalAddon , ILigaturesApi {
     }
     this._terminal = terminal;
     this._characterJoinerId = enableLigatures(terminal, this._fallbackLigatures);
-    terminal.element.style.fontFeatureSettings = '"liga" on, "calt" on';
+    terminal.element.style.fontFeatureSettings = this._fontFeatureSettings ?? '"calt" on';
   }
 
   public dispose(): void {
diff --git a/addons/addon-ligatures/src/Types.ts b/addons/addon-ligatures/src/Types.ts
index 09ad68c7..91bb916e 100644
--- a/addons/addon-ligatures/src/Types.ts
+++ b/addons/addon-ligatures/src/Types.ts
@@ -5,4 +5,5 @@
 
 export interface ILigatureOptions {
   fallbackLigatures: string[];
+  fontFeatureSettings: string;
 }
diff --git a/addons/addon-ligatures/typings/addon-ligatures.d.ts b/addons/addon-ligatures/typings/addon-ligatures.d.ts
index 2fd4f3e7..cdf182db 100644
--- a/addons/addon-ligatures/typings/addon-ligatures.d.ts
+++ b/addons/addon-ligatures/typings/addon-ligatures.d.ts
@@ -23,7 +23,10 @@ declare module '@xterm/addon-ligatures' {
     constructor(options?: Partial<ILigatureOptions>);
 
     /**
-     * Activates the addon
+     * Activates the addon. Note that if webgl is also being used, that addon
+     * should be reactivated after ligatures is activated in order to apply
+     * {@link ILigatureOptions.fontFeatureSettings} to the texture atlas.
+     *
      *
      * @param terminal The terminal the addon is being loaded in.
      */
@@ -40,19 +43,28 @@ declare module '@xterm/addon-ligatures' {
    */
   export interface ILigatureOptions {
     /**
-     * Fallback ligatures to use when the font access API is either not supported by the browser or
-     * access is denied. The default set of ligatures is taken from Iosevka's default "calt"
-     * ligation set: https://typeof.net/Iosevka/
+     * Fallback ligatures to use when the font access API is either not
+     * supported by the browser or access is denied. The default set of
+     * ligatures is taken from Iosevka's default "calt" ligation set:
+     * https://typeof.net/Iosevka/
      *
      * ```
      * <-- <--- <<- <- -> ->> --> --->
      * <== <=== <<= <= => =>> ==> ===> >= >>=
-     * <-> <--> <---> <----> <=> <==> <===> <====> -------->
-     * <~~ <~ ~> ~~> :: ::: == != === !==
-     * := :- :+ <* <*> *> <| <|> |> +: -: =: :>
-     * ++ +++ <!-- <!--- <***>
-     * ```
+     * <-> <--> <---> <----> <=> <==> <===> <====> :: :::
+     * <~~ </ </> /> ~~> == != /= ~= <> === !== !===
+     * <: := *= *+ <* <*> *> <| <|> |> +* =* =: :>
+     * /* <close block comment> +++ <!-- <!---
      */
     fallbackLigatures: string[]
+
+    /**
+     * The CSS `font-feature-settings` value to use for enabling ligatures. This
+     * also supports font variants for example with a value like
+     * `"calt" on, "ss03"`.
+     *
+     * The default value is `"calt" on`.
+     */
+    fontFeatureSettings: string;
   }
 }
diff --git a/src/browser/renderer/shared/CellColorResolver.ts b/addons/addon-webgl/src/CellColorResolver.ts
similarity index 100%
rename from src/browser/renderer/shared/CellColorResolver.ts
rename to addons/addon-webgl/src/CellColorResolver.ts
diff --git a/src/browser/renderer/shared/CharAtlasCache.ts b/addons/addon-webgl/src/CharAtlasCache.ts
similarity index 92%
rename from src/browser/renderer/shared/CharAtlasCache.ts
rename to addons/addon-webgl/src/CharAtlasCache.ts
index 33e58078..ea02581b 100644
--- a/src/browser/renderer/shared/CharAtlasCache.ts
+++ b/addons/addon-webgl/src/CharAtlasCache.ts
@@ -3,11 +3,11 @@
  * @license MIT
  */
 
-import { TextureAtlas } from 'browser/renderer/shared/TextureAtlas';
+import { TextureAtlas } from './TextureAtlas';
 import { ITerminalOptions, Terminal } from '@xterm/xterm';
 import { ITerminal, ReadonlyColorSet } from 'browser/Types';
-import { ICharAtlasConfig, ITextureAtlas } from 'browser/renderer/shared/Types';
-import { generateConfig, configEquals } from 'browser/renderer/shared/CharAtlasUtils';
+import { ICharAtlasConfig, ITextureAtlas } from './Types';
+import { generateConfig, configEquals } from './CharAtlasUtils';
 
 interface ITextureAtlasCacheEntry {
   atlas: ITextureAtlas;
diff --git a/src/browser/renderer/shared/CharAtlasUtils.ts b/addons/addon-webgl/src/CharAtlasUtils.ts
similarity index 100%
rename from src/browser/renderer/shared/CharAtlasUtils.ts
rename to addons/addon-webgl/src/CharAtlasUtils.ts
diff --git a/addons/addon-webgl/src/Constants.ts b/addons/addon-webgl/src/Constants.ts
new file mode 100644
index 00000000..a00434d6
--- /dev/null
+++ b/addons/addon-webgl/src/Constants.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { isFirefox, isLegacyEdge } from 'common/Platform';
+
+export const DIM_OPACITY = 0.5;
+// The text baseline is set conditionally by browser. Using 'ideographic' for Firefox or Legacy Edge
+// would result in truncated text (Issue 3353). Using 'bottom' for Chrome would result in slightly
+// unaligned Powerline fonts (PR 3356#issuecomment-850928179).
+export const TEXT_BASELINE: CanvasTextBaseline = isFirefox || isLegacyEdge ? 'bottom' : 'ideographic';
diff --git a/src/browser/renderer/shared/CursorBlinkStateManager.ts b/addons/addon-webgl/src/CursorBlinkStateManager.ts
similarity index 100%
rename from src/browser/renderer/shared/CursorBlinkStateManager.ts
rename to addons/addon-webgl/src/CursorBlinkStateManager.ts
diff --git a/src/browser/renderer/shared/CustomGlyphs.ts b/addons/addon-webgl/src/CustomGlyphs.ts
similarity index 100%
rename from src/browser/renderer/shared/CustomGlyphs.ts
rename to addons/addon-webgl/src/CustomGlyphs.ts
diff --git a/src/browser/renderer/shared/DevicePixelObserver.ts b/addons/addon-webgl/src/DevicePixelObserver.ts
similarity index 100%
rename from src/browser/renderer/shared/DevicePixelObserver.ts
rename to addons/addon-webgl/src/DevicePixelObserver.ts
diff --git a/addons/addon-webgl/src/GlyphRenderer.ts b/addons/addon-webgl/src/GlyphRenderer.ts
index a6a74025..10c9ad72 100644
--- a/addons/addon-webgl/src/GlyphRenderer.ts
+++ b/addons/addon-webgl/src/GlyphRenderer.ts
@@ -2,16 +2,15 @@
  * Copyright (c) 2018 The xterm.js authors. All rights reserved.
  * @license MIT
  */
-
-import { allowRescaling, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
-import { TextureAtlas } from 'browser/renderer/shared/TextureAtlas';
-import { IRasterizedGlyph, IRenderDimensions, ITextureAtlas } from 'browser/renderer/shared/Types';
+import { TextureAtlas } from './TextureAtlas';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { NULL_CELL_CODE } from 'common/buffer/Constants';
 import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import { Terminal } from '@xterm/xterm';
-import { IRenderModel, IWebGL2RenderingContext, IWebGLVertexArrayObject } from './Types';
+import { IRenderModel, IWebGL2RenderingContext, IWebGLVertexArrayObject, type IRasterizedGlyph, type ITextureAtlas } from './Types';
 import { createProgram, GLTexture, PROJECTION_MATRIX } from './WebglUtils';
 import type { IOptionsService } from 'common/services/Services';
+import { allowRescaling, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 
 interface IVertices {
   attributes: Float32Array;
@@ -238,9 +237,9 @@ export class GlyphRenderer extends Disposable {
 
     // Get the glyph
     if (chars && chars.length > 1) {
-      $glyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg, ext, false);
+      $glyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg, ext, false, this._terminal.element);
     } else {
-      $glyph = this._atlas.getRasterizedGlyph(code, bg, fg, ext, false);
+      $glyph = this._atlas.getRasterizedGlyph(code, bg, fg, ext, false, this._terminal.element);
     }
 
     $leftCellPadding = Math.floor((this._dimensions.device.cell.width - this._dimensions.device.char.width) / 2);
diff --git a/addons/addon-webgl/src/RectangleRenderer.ts b/addons/addon-webgl/src/RectangleRenderer.ts
index 6dbedf09..8ace9076 100644
--- a/addons/addon-webgl/src/RectangleRenderer.ts
+++ b/addons/addon-webgl/src/RectangleRenderer.ts
@@ -3,7 +3,6 @@
  * @license MIT
  */
 
-import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { IThemeService } from 'browser/services/Services';
 import { ReadonlyColorSet } from 'browser/Types';
@@ -14,6 +13,7 @@ import { Terminal } from '@xterm/xterm';
 import { RENDER_MODEL_BG_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL } from './RenderModel';
 import { IRenderModel, IWebGL2RenderingContext, IWebGLVertexArrayObject } from './Types';
 import { createProgram, expandFloat32Array, PROJECTION_MATRIX } from './WebglUtils';
+import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 
 const enum VertexAttribLocations {
   POSITION = 0,
diff --git a/src/browser/renderer/shared/TextureAtlas.ts b/addons/addon-webgl/src/TextureAtlas.ts
similarity index 97%
rename from src/browser/renderer/shared/TextureAtlas.ts
rename to addons/addon-webgl/src/TextureAtlas.ts
index c692aece..a7d1138e 100644
--- a/src/browser/renderer/shared/TextureAtlas.ts
+++ b/addons/addon-webgl/src/TextureAtlas.ts
@@ -4,10 +4,10 @@
  */
 
 import { IColorContrastCache } from 'browser/Types';
-import { DIM_OPACITY, TEXT_BASELINE } from 'browser/renderer/shared/Constants';
-import { tryDrawCustomChar } from 'browser/renderer/shared/CustomGlyphs';
+import { DIM_OPACITY, TEXT_BASELINE } from './Constants';
+import { tryDrawCustomChar } from './CustomGlyphs';
 import { computeNextVariantOffset, treatGlyphAsBackgroundColor, isPowerlineGlyph, isRestrictedPowerlineGlyph, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
-import { IBoundingBox, ICharAtlasConfig, IRasterizedGlyph, ITextureAtlas } from 'browser/renderer/shared/Types';
+import { IBoundingBox, ICharAtlasConfig, IRasterizedGlyph, ITextureAtlas } from './Types';
 import { NULL_COLOR, channels, color, rgba } from 'common/Color';
 import { FourKeyMap } from 'common/MultiKeyMap';
 import { IdleTaskQueue } from 'common/TaskQueue';
@@ -103,6 +103,7 @@ export class TextureAtlas implements ITextureAtlas {
   }
 
   public dispose(): void {
+    this._tmpCanvas.remove();
     for (const page of this.pages) {
       page.canvas.remove();
     }
@@ -122,7 +123,7 @@ export class TextureAtlas implements ITextureAtlas {
     for (let i = 33; i < 126; i++) {
       queue.enqueue(() => {
         if (!this._cacheMap.get(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT)) {
-          const rasterizedGlyph = this._drawToCache(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT);
+          const rasterizedGlyph = this._drawToCache(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT, false, undefined);
           this._cacheMap.set(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT, rasterizedGlyph);
         }
       });
@@ -242,12 +243,12 @@ export class TextureAtlas implements ITextureAtlas {
     }
   }
 
-  public getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean): IRasterizedGlyph {
-    return this._getFromCacheMap(this._cacheMapCombined, chars, bg, fg, ext, restrictToCellHeight);
+  public getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean, domContainer: HTMLElement | undefined): IRasterizedGlyph {
+    return this._getFromCacheMap(this._cacheMapCombined, chars, bg, fg, ext, restrictToCellHeight, domContainer);
   }
 
-  public getRasterizedGlyph(code: number, bg: number, fg: number, ext: number, restrictToCellHeight: boolean): IRasterizedGlyph {
-    return this._getFromCacheMap(this._cacheMap, code, bg, fg, ext, restrictToCellHeight);
+  public getRasterizedGlyph(code: number, bg: number, fg: number, ext: number, restrictToCellHeight: boolean, domContainer: HTMLElement | undefined): IRasterizedGlyph {
+    return this._getFromCacheMap(this._cacheMap, code, bg, fg, ext, restrictToCellHeight, domContainer);
   }
 
   /**
@@ -259,11 +260,12 @@ export class TextureAtlas implements ITextureAtlas {
     bg: number,
     fg: number,
     ext: number,
-    restrictToCellHeight: boolean = false
+    restrictToCellHeight: boolean,
+    domContainer: HTMLElement | undefined
   ): IRasterizedGlyph {
     $glyph = cacheMap.get(key, bg, fg, ext);
     if (!$glyph) {
-      $glyph = this._drawToCache(key, bg, fg, ext, restrictToCellHeight);
+      $glyph = this._drawToCache(key, bg, fg, ext, restrictToCellHeight, domContainer);
       cacheMap.set(key, bg, fg, ext, $glyph);
     }
     return $glyph;
@@ -423,12 +425,20 @@ export class TextureAtlas implements ITextureAtlas {
     return this._config.colors.contrastCache;
   }
 
-  private _drawToCache(codeOrChars: number | string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean = false): IRasterizedGlyph {
+  private _drawToCache(codeOrChars: number | string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean, domContainer: HTMLElement | undefined): IRasterizedGlyph {
     const chars = typeof codeOrChars === 'number' ? String.fromCharCode(codeOrChars) : codeOrChars;
 
     // Uncomment for debugging
     // console.log(`draw to cache "${chars}"`, bg, fg, ext);
 
+    // Attach the canvas to the DOM in order to inherit font-feature-settings
+    // from the parent elements. This is necessary for ligatures and variants to
+    // work.
+    if (domContainer && this._tmpCanvas.parentElement !== domContainer) {
+      this._tmpCanvas.style.display = 'none';
+      domContainer.append(this._tmpCanvas);
+    }
+
     // Allow 1 cell width per character, with a minimum of 2 (CJK), plus some padding. This is used
     // to draw the glyph to the canvas as well as to restrict the bounding box search to ensure
     // giant ligatures (eg. =====>) don't impact overall performance.
diff --git a/addons/addon-webgl/src/Types.ts b/addons/addon-webgl/src/Types.ts
index fe6e10c7..e030e579 100644
--- a/addons/addon-webgl/src/Types.ts
+++ b/addons/addon-webgl/src/Types.ts
@@ -3,8 +3,11 @@
  * @license MIT
  */
 
+import { FontWeight } from '@xterm/xterm';
+import { IColorSet } from 'browser/Types';
 import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
-import { CursorInactiveStyle, CursorStyle } from 'common/Types';
+import { CursorInactiveStyle, CursorStyle, type IDisposable } from 'common/Types';
+import type { Event } from 'vs/base/common/event';
 
 export interface IRenderModel {
   cells: Uint32Array;
@@ -31,3 +34,93 @@ export interface IWebGL2RenderingContext extends WebGLRenderingContext {
 
 export interface IWebGLVertexArrayObject {
 }
+
+export interface ICharAtlasConfig {
+  customGlyphs: boolean;
+  devicePixelRatio: number;
+  deviceMaxTextureSize: number;
+  letterSpacing: number;
+  lineHeight: number;
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: FontWeight;
+  fontWeightBold: FontWeight;
+  deviceCellWidth: number;
+  deviceCellHeight: number;
+  deviceCharWidth: number;
+  deviceCharHeight: number;
+  allowTransparency: boolean;
+  drawBoldTextInBrightColors: boolean;
+  minimumContrastRatio: number;
+  colors: IColorSet;
+}
+
+export interface ITextureAtlas extends IDisposable {
+  readonly pages: { canvas: HTMLCanvasElement, version: number }[];
+
+  onAddTextureAtlasCanvas: Event<HTMLCanvasElement>;
+  onRemoveTextureAtlasCanvas: Event<HTMLCanvasElement>;
+
+  /**
+   * Warm up the texture atlas, adding common glyphs to avoid slowing early frame.
+   */
+  warmUp(): void;
+
+  /**
+   * Call when a frame is being drawn, this will return true if the atlas was cleared to make room
+   * for a new set of glyphs.
+   */
+  beginFrame(): boolean;
+
+  /**
+   * Clear all glyphs from the texture atlas.
+   */
+  clearTexture(): void;
+  getRasterizedGlyph(code: number, bg: number, fg: number, ext: number, restrictToCellHeight: boolean, domContainer: HTMLElement | undefined): IRasterizedGlyph;
+  getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean, domContainer: HTMLElement | undefined): IRasterizedGlyph;
+}
+
+/**
+ * Represents a rasterized glyph within a texture atlas. Some numbers are
+ * tracked in CSS pixels as well in order to reduce calculations during the
+ * render loop.
+ */
+export interface IRasterizedGlyph {
+  /**
+   * The x and y offset between the glyph's top/left and the top/left of a cell
+   * in pixels.
+   */
+  offset: IVector;
+  /**
+   * The index of the texture page that the glyph is on.
+   */
+  texturePage: number;
+  /**
+   * the x and y position of the glyph in the texture in pixels.
+   */
+  texturePosition: IVector;
+  /**
+   * the x and y position of the glyph in the texture in clip space coordinates.
+   */
+  texturePositionClipSpace: IVector;
+  /**
+   * The width and height of the glyph in the texture in pixels.
+   */
+  size: IVector;
+  /**
+   * The width and height of the glyph in the texture in clip space coordinates.
+   */
+  sizeClipSpace: IVector;
+}
+
+export interface IVector {
+  x: number;
+  y: number;
+}
+
+export interface IBoundingBox {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+}
diff --git a/addons/addon-webgl/src/WebglRenderer.ts b/addons/addon-webgl/src/WebglRenderer.ts
index 4be864c1..398594d9 100644
--- a/addons/addon-webgl/src/WebglRenderer.ts
+++ b/addons/addon-webgl/src/WebglRenderer.ts
@@ -4,12 +4,11 @@
  */
 
 import { ITerminal } from 'browser/Types';
-import { CellColorResolver } from 'browser/renderer/shared/CellColorResolver';
-import { acquireTextureAtlas, removeTerminalFromCache } from 'browser/renderer/shared/CharAtlasCache';
-import { CursorBlinkStateManager } from 'browser/renderer/shared/CursorBlinkStateManager';
-import { observeDevicePixelDimensions } from 'browser/renderer/shared/DevicePixelObserver';
-import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
-import { IRenderDimensions, IRenderer, IRequestRedrawEvent, ITextureAtlas } from 'browser/renderer/shared/Types';
+import { CellColorResolver } from './CellColorResolver';
+import { acquireTextureAtlas, removeTerminalFromCache } from './CharAtlasCache';
+import { CursorBlinkStateManager } from './CursorBlinkStateManager';
+import { observeDevicePixelDimensions } from './DevicePixelObserver';
+import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
 import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { CharData, IBufferLine, ICellData } from 'common/Types';
 import { AttributeData } from 'common/buffer/AttributeData';
@@ -20,12 +19,13 @@ import { Terminal } from '@xterm/xterm';
 import { GlyphRenderer } from './GlyphRenderer';
 import { RectangleRenderer } from './RectangleRenderer';
 import { COMBINED_CHAR_BIT_MASK, RENDER_MODEL_BG_OFFSET, RENDER_MODEL_EXT_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL, RenderModel } from './RenderModel';
-import { IWebGL2RenderingContext } from './Types';
+import { IWebGL2RenderingContext, type ITextureAtlas } from './Types';
 import { LinkRenderLayer } from './renderLayer/LinkRenderLayer';
 import { IRenderLayer } from './renderLayer/Types';
 import { Emitter, Event } from 'vs/base/common/event';
 import { addDisposableListener } from 'vs/base/browser/dom';
 import { combinedDisposable, Disposable, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
+import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
 
 export class WebglRenderer extends Disposable implements IRenderer {
   private _renderLayers: IRenderLayer[];
diff --git a/addons/addon-webgl/src/renderLayer/BaseRenderLayer.ts b/addons/addon-webgl/src/renderLayer/BaseRenderLayer.ts
index 0cac7eb3..85b170e7 100644
--- a/addons/addon-webgl/src/renderLayer/BaseRenderLayer.ts
+++ b/addons/addon-webgl/src/renderLayer/BaseRenderLayer.ts
@@ -4,16 +4,17 @@
  */
 
 import { ReadonlyColorSet } from 'browser/Types';
-import { acquireTextureAtlas } from 'browser/renderer/shared/CharAtlasCache';
-import { TEXT_BASELINE } from 'browser/renderer/shared/Constants';
-import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
-import { IRenderDimensions, ITextureAtlas } from 'browser/renderer/shared/Types';
+import { acquireTextureAtlas } from '../CharAtlasCache';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import { CellData } from 'common/buffer/CellData';
 import { IOptionsService } from 'common/services/Services';
 import { Terminal } from '@xterm/xterm';
 import { IRenderLayer } from './Types';
+import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { TEXT_BASELINE } from '../Constants';
+import type { ITextureAtlas } from '../Types';
 
 export abstract class BaseRenderLayer extends Disposable implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
diff --git a/addons/addon-webgl/src/renderLayer/LinkRenderLayer.ts b/addons/addon-webgl/src/renderLayer/LinkRenderLayer.ts
index 1357dec6..faceac44 100644
--- a/addons/addon-webgl/src/renderLayer/LinkRenderLayer.ts
+++ b/addons/addon-webgl/src/renderLayer/LinkRenderLayer.ts
@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { is256Color } from 'browser/renderer/shared/CharAtlasUtils';
+import { is256Color } from '../CharAtlasUtils';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
 import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
diff --git a/bin/publish.js b/bin/publish.js
index e2fcf9ad..395b52bd 100644
--- a/bin/publish.js
+++ b/bin/publish.js
@@ -115,8 +115,7 @@ function checkAndPublishPackage(packageDir, repoCommit, peerDependencies) {
     stdio: 'inherit'
   });
   if (result.status) {
-    error(`Spawn exited with code ${result.status}`);
-    process.exit(result.status);
+    throw new Error(`Spawn exited with code ${result.status}`);
   }
 
   return { isStableRelease, nextVersion };
diff --git a/demo/client.ts b/demo/client.ts
index 6c7b53ff..f5903aa4 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -646,17 +646,25 @@ function initAddons(term: Terminal): void {
         }
         return;
       }
+      function postInitWebgl(): void {
+        setTimeout(() => {
+          setTextureAtlas(addons.webgl.instance.textureAtlas);
+          addons.webgl.instance.onChangeTextureAtlas(e => setTextureAtlas(e));
+          addons.webgl.instance.onAddTextureAtlasCanvas(e => appendTextureAtlas(e));
+        }, 500);
+      }
+      function preDisposeWebgl(): void {
+        if (addons.webgl.instance.textureAtlas) {
+          addons.webgl.instance.textureAtlas.remove();
+        }
+      }
       if (checkbox.checked) {
         // HACK: Manually remove addons that cannot be changes
         addon.instance = new (addon as IDemoAddon<Exclude<AddonType, 'attach'>>).ctor();
         try {
           term.loadAddon(addon.instance);
           if (name === 'webgl') {
-            setTimeout(() => {
-              setTextureAtlas(addons.webgl.instance.textureAtlas);
-              addons.webgl.instance.onChangeTextureAtlas(e => setTextureAtlas(e));
-              addons.webgl.instance.onAddTextureAtlasCanvas(e => appendTextureAtlas(e));
-            }, 0);
+            postInitWebgl();
           } else if (name === 'unicode11') {
             term.unicode.activeVersion = '11';
           } else if (name === 'unicodeGraphemes') {
@@ -672,13 +680,24 @@ function initAddons(term: Terminal): void {
         }
       } else {
         if (name === 'webgl') {
-          addons.webgl.instance.textureAtlas.remove();
+          preDisposeWebgl();
         } else if (name === 'unicode11' || name === 'unicodeGraphemes') {
           term.unicode.activeVersion = '6';
         }
         addon.instance!.dispose();
         addon.instance = undefined;
       }
+      if (name === 'ligatures') {
+        // Recreate webgl when ligatures are toggled so texture atlas picks up any font feature
+        // settings changes
+        if (addons.webgl.instance) {
+          preDisposeWebgl();
+          addons.webgl.instance.dispose();
+          addons.webgl.instance = new addons.webgl.ctor();
+          term.loadAddon(addons.webgl.instance);
+          postInitWebgl();
+        }
+      }
     });
     const label = document.createElement('label');
     label.classList.add('addon');
diff --git a/src/browser/input/CompositionHelper.ts b/src/browser/input/CompositionHelper.ts
index 9891709f..b87ebbea 100644
--- a/src/browser/input/CompositionHelper.ts
+++ b/src/browser/input/CompositionHelper.ts
@@ -93,7 +93,8 @@ export class CompositionHelper {
    */
   public keydown(ev: KeyboardEvent): boolean {
     if (this._isComposing || this._isSendingComposition) {
-      if (ev.keyCode === 229) {
+      if (ev.keyCode === 20 || ev.keyCode === 229) {
+        // 20 is CapsLock, 229 is Enter
         // Continue composing if the keyCode is the "composition character"
         return false;
       }
diff --git a/src/browser/renderer/shared/Constants.ts b/src/browser/renderer/shared/Constants.ts
index b5105ec7..4bc4f985 100644
--- a/src/browser/renderer/shared/Constants.ts
+++ b/src/browser/renderer/shared/Constants.ts
@@ -3,12 +3,4 @@
  * @license MIT
  */
 
-import { isFirefox, isLegacyEdge } from 'common/Platform';
-
 export const INVERTED_DEFAULT_COLOR = 257;
-
-export const DIM_OPACITY = 0.5;
-// The text baseline is set conditionally by browser. Using 'ideographic' for Firefox or Legacy Edge
-// would result in truncated text (Issue 3353). Using 'bottom' for Chrome would result in slightly
-// unaligned Powerline fonts (PR 3356#issuecomment-850928179).
-export const TEXT_BASELINE: CanvasTextBaseline = isFirefox || isLegacyEdge ? 'bottom' : 'ideographic';
diff --git a/src/browser/renderer/shared/README.md b/src/browser/renderer/shared/README.md
index 58084235..25b9a239 100644
--- a/src/browser/renderer/shared/README.md
+++ b/src/browser/renderer/shared/README.md
@@ -1 +1 @@
-This folder contains files that are shared between the renderer addons, but not necessarily bundled into the `xterm` module.
+This folder contains files that are shared between the renderers.
diff --git a/src/browser/renderer/shared/Types.ts b/src/browser/renderer/shared/Types.ts
index 47681a4c..f783ffec 100644
--- a/src/browser/renderer/shared/Types.ts
+++ b/src/browser/renderer/shared/Types.ts
@@ -3,31 +3,11 @@
  * @license MIT
  */
 
-import { FontWeight, Terminal } from '@xterm/xterm';
-import { IColorSet, ITerminal } from 'browser/Types';
+import { Terminal } from '@xterm/xterm';
+import { ITerminal } from 'browser/Types';
 import { IDisposable } from 'common/Types';
 import type { Event } from 'vs/base/common/event';
 
-export interface ICharAtlasConfig {
-  customGlyphs: boolean;
-  devicePixelRatio: number;
-  deviceMaxTextureSize: number;
-  letterSpacing: number;
-  lineHeight: number;
-  fontSize: number;
-  fontFamily: string;
-  fontWeight: FontWeight;
-  fontWeightBold: FontWeight;
-  deviceCellWidth: number;
-  deviceCellHeight: number;
-  deviceCharWidth: number;
-  deviceCharHeight: number;
-  allowTransparency: boolean;
-  drawBoldTextInBrightColors: boolean;
-  minimumContrastRatio: number;
-  colors: IColorSet;
-}
-
 export interface IDimensions {
   width: number;
   height: number;
@@ -87,76 +67,6 @@ export interface IRenderer extends IDisposable {
   clearTextureAtlas?(): void;
 }
 
-export interface ITextureAtlas extends IDisposable {
-  readonly pages: { canvas: HTMLCanvasElement, version: number }[];
-
-  onAddTextureAtlasCanvas: Event<HTMLCanvasElement>;
-  onRemoveTextureAtlasCanvas: Event<HTMLCanvasElement>;
-
-  /**
-   * Warm up the texture atlas, adding common glyphs to avoid slowing early frame.
-   */
-  warmUp(): void;
-
-  /**
-   * Call when a frame is being drawn, this will return true if the atlas was cleared to make room
-   * for a new set of glyphs.
-   */
-  beginFrame(): boolean;
-
-  /**
-   * Clear all glyphs from the texture atlas.
-   */
-  clearTexture(): void;
-  getRasterizedGlyph(code: number, bg: number, fg: number, ext: number, restrictToCellHeight: boolean): IRasterizedGlyph;
-  getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean): IRasterizedGlyph;
-}
-
-/**
- * Represents a rasterized glyph within a texture atlas. Some numbers are
- * tracked in CSS pixels as well in order to reduce calculations during the
- * render loop.
- */
-export interface IRasterizedGlyph {
-  /**
-   * The x and y offset between the glyph's top/left and the top/left of a cell
-   * in pixels.
-   */
-  offset: IVector;
-  /**
-   * The index of the texture page that the glyph is on.
-   */
-  texturePage: number;
-  /**
-   * the x and y position of the glyph in the texture in pixels.
-   */
-  texturePosition: IVector;
-  /**
-   * the x and y position of the glyph in the texture in clip space coordinates.
-   */
-  texturePositionClipSpace: IVector;
-  /**
-   * The width and height of the glyph in the texture in pixels.
-   */
-  size: IVector;
-  /**
-   * The width and height of the glyph in the texture in clip space coordinates.
-   */
-  sizeClipSpace: IVector;
-}
-
-export interface IVector {
-  x: number;
-  y: number;
-}
-
-export interface IBoundingBox {
-  top: number;
-  left: number;
-  right: number;
-  bottom: number;
-}
-
 export interface ISelectionRenderModel {
   readonly hasSelection: boolean;
   readonly columnSelectMode: boolean;
diff --git a/yarn.lock b/yarn.lock
index 777abc0a..5ed534e8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1669,9 +1669,9 @@ cross-env@^7.0.3:
     cross-spawn "^7.0.1"
 
 cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
-  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
   dependencies:
     path-key "^3.1.0"
     shebang-command "^2.0.0"