diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts
index 7d9d8cc6a3..6893cbbbe2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts
@@ -1,15 +1,14 @@
-import { UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js';
+import { UMB_STYLESHEET_WORKSPACE_CONTEXT, UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js';
 import { UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL } from './stylesheet-workspace-view-rich-text-editor.element.js';
 import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { RichTextRuleModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
 @customElement('umb-stylesheet-rich-text-editor-rule')
 export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElement {
-	@property({ type: Object, attribute: false })
+	@property({ attribute: false })
 	private rule: RichTextRuleModel | null = null;
 
 	#context?: UmbStylesheetWorkspaceContext;
@@ -18,8 +17,8 @@ export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElemen
 	constructor() {
 		super();
 
-		this.consumeContext(UMB_WORKSPACE_CONTEXT, (workspaceContext) => {
-			this.#context = workspaceContext as UmbStylesheetWorkspaceContext;
+		this.consumeContext(UMB_STYLESHEET_WORKSPACE_CONTEXT, (workspaceContext) => {
+			this.#context = workspaceContext;
 		});
 
 		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
@@ -27,32 +26,32 @@ export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElemen
 		});
 	}
 
-	openModal = () => {
+	#openModal() {
 		if (!this._modalContext) throw new Error('Modal context not found');
 		const modal = this._modalContext.open(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL, {
 			value: {
 				rule: this.rule,
 			},
 		});
-		modal?.onSubmit().then((result) => {
-			if (result.rule && this.rule?.name) {
-				this.#context?.updateRule(this.rule?.name, result.rule);
+		modal?.onSubmit().then((value) => {
+			if (value.rule && this.rule?.name) {
+				this.#context?.updateRule(this.rule?.name, value.rule);
 			}
 		});
-	};
+	}
 
-	removeRule = () => {
+	#removeRule() {
 		//TODO: SPORTER BREAKS THAT - rules are removed from the data but not from the DOM
 		if (!this.#context) throw new Error('Context not found');
 		this.#context.setRules(this.#context.getRules().filter((r) => r.name !== this.rule?.name));
-	};
+	}
 
 	render() {
 		return html`
 			<div class="rule-name"><uui-icon name="icon-navigation"></uui-icon>${this.rule?.name}</div>
 			<div class="rule-actions">
-				<uui-button label="Edit" look="secondary" @click=${this.openModal}>Edit</uui-button
-				><uui-button label="Remove" look="secondary" color="danger" @click=${this.removeRule}>Remove</uui-button>
+				<uui-button label="Edit" look="secondary" @click=${this.#openModal}>Edit</uui-button
+				><uui-button label="Remove" look="secondary" color="danger" @click=${this.#removeRule}>Remove</uui-button>
 			</div>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts
index 8c1e4f1752..9e2c693ff7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts
@@ -2,7 +2,6 @@ import { RichTextRuleModelSortable } from '../../stylesheet-workspace.context.js
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, ifDefined, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import { RichTextRuleModel } from '@umbraco-cms/backoffice/backend-api';
 
 export interface StylesheetRichTextEditorStyleModalValue {
 	rule: RichTextRuleModelSortable | null;
@@ -13,40 +12,37 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 	never,
 	StylesheetRichTextEditorStyleModalValue
 > {
-	@state()
-	private _rule: RichTextRuleModel | null = null;
-
 	#updateName(event: Event) {
 		const name = (event.target as HTMLInputElement).value;
 
-		this._value = {
+		this.updateValue({
 			rule: {
 				...this._value.rule,
 				name,
 			},
-		};
+		});
 	}
 
 	#updateSelector(event: Event) {
 		const selector = (event.target as HTMLInputElement).value;
 
-		this._value = {
+		this.updateValue({
 			rule: {
 				...this._value.rule,
 				selector,
 			},
-		};
+		});
 	}
 
 	#updateStyles(event: Event) {
 		const styles = (event.target as HTMLInputElement).value;
 
-		this._value = {
+		this.updateValue({
 			rule: {
 				...this._value.rule,
 				styles,
 			},
-		};
+		});
 	}
 
 	render() {
@@ -62,7 +58,7 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 									<uui-input
 										id="name"
 										name="name"
-										.value=${this._rule?.name ?? ''}
+										.value=${this._value.rule?.name ?? ''}
 										label="Rule name"
 										required
 										@input=${this.#updateName}>
@@ -74,7 +70,7 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 									<uui-input
 										id="selector"
 										name="selector"
-										.value=${this._rule?.selector ?? ''}
+										.value=${this._value.rule?.selector ?? ''}
 										label="Rule selector"
 										@input=${this.#updateSelector}
 										required>
@@ -89,14 +85,14 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
 										@input=${this.#updateStyles}
 										id="styles"
 										name="styles"
-										.value=${this._rule?.styles ?? ''}
+										.value=${this._value.rule?.styles ?? ''}
 										label="Rule styles">
 									</uui-textarea>
 								</uui-form-layout-item>
 								<uui-form-layout-item>
 									<uui-label for="styles" slot="label" required="">Preview</uui-label>
 									<span slot="description">How the text will look like in the rich text editor.</span>
-									<div style="${ifDefined(this._rule?.styles)}">
+									<div style="${ifDefined(this._value.rule?.styles)}">
 										a b c d e f g h i j k l m n o p q r s t u v w x t z
 										<br />
 										A B C D E F G H I J K L M N O P Q R S T U V W X Y Z