diff --git a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts
index 2754963..c953be4 100644
--- a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts
+++ b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts
@@ -55,6 +55,7 @@
 import {PolymerDomRepeatEvent} from '../../../types/types';
 import {getAppContext} from '../../../services/app-context';
 import {fireEvent} from '../../../utils/event-util';
+import {PolymerDomRepeatCustomEvent} from '../../../types/types';
 
 const MAX_AUTOCOMPLETE_RESULTS = 20;
 
@@ -412,6 +413,19 @@
   _onTapExclusiveToggle(e: Event) {
     e.preventDefault();
   }
+
+  _handleRuleChanged(e: PolymerDomRepeatCustomEvent) {
+    if (
+      this._rules === undefined ||
+      (e as CustomEvent).detail.value === undefined
+    )
+      return;
+    const index = Number(e.model.index);
+    if (isNaN(index)) {
+      return;
+    }
+    this.splice('_rules', index, (e as CustomEvent).detail.value);
+  }
 }
 
 declare global {
diff --git a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission_html.ts b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission_html.ts
index a8405df..eacd5ef 100644
--- a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission_html.ts
+++ b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission_html.ts
@@ -115,9 +115,10 @@
             group-id="[[rule.id]]"
             group-name="[[_computeGroupName(groups, rule.id)]]"
             permission="[[permission.id]]"
-            rule="{{rule}}"
+            rule="[[rule]]"
             section="[[section]]"
             on-added-rule-removed="_handleAddedRuleRemoved"
+            on-rule-changed="_handleRuleChanged"
           ></gr-rule-editor>
         </template>
         <div id="addRule">
diff --git a/polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor.ts b/polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor.ts
index f811ee2..3b180df 100644
--- a/polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor.ts
+++ b/polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor.ts
@@ -15,16 +15,16 @@
  * limitations under the License.
  */
 import '@polymer/iron-autogrow-textarea/iron-autogrow-textarea';
-import '../../../styles/gr-form-styles';
-import '../../../styles/shared-styles';
 import '../../shared/gr-button/gr-button';
 import '../../shared/gr-select/gr-select';
-import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-rule-editor_html';
 import {encodeURL, getBaseUrl} from '../../../utils/url-util';
 import {AccessPermissionId} from '../../../utils/access-util';
-import {property, customElement, observe} from '@polymer/decorators';
 import {fireEvent} from '../../../utils/event-util';
+import {formStyles} from '../../../styles/gr-form-styles';
+import {sharedStyles} from '../../../styles/shared-styles';
+import {LitElement, PropertyValues, html, css} from 'lit';
+import {customElement, property, state} from 'lit/decorators';
+import {BindValueChangeEvent} from '../../../types/events';
 
 /**
  * Fired when the rule has been modified or removed.
@@ -100,18 +100,14 @@
 }
 
 @customElement('gr-rule-editor')
-export class GrRuleEditor extends PolymerElement {
-  static get template() {
-    return htmlTemplate;
-  }
-
+export class GrRuleEditor extends LitElement {
   @property({type: Boolean})
   hasRange?: boolean;
 
   @property({type: Object})
   label?: RuleLabel;
 
-  @property({type: Boolean, observer: '_handleEditingChanged'})
+  @property({type: Boolean})
   editing = false;
 
   @property({type: String})
@@ -124,97 +120,280 @@
   @property({type: String})
   permission!: AccessPermissionId;
 
-  @property({type: Object, notify: true})
+  @property({type: Object})
   rule?: Rule;
 
   @property({type: String})
   section?: string;
 
-  @property({type: Boolean})
-  _deleted = false;
+  // private but used in test
+  @state() deleted = false;
 
-  @property({type: Object})
-  _originalRuleValues?: RuleValue;
+  // private but used in test
+  @state() originalRuleValues?: RuleValue;
 
   constructor() {
     super();
-    this.addEventListener('access-saved', () => this._handleAccessSaved());
-  }
-
-  override ready() {
-    super.ready();
-    // Called on ready rather than the observer because when new rules are
-    // added, the observer is triggered prior to being ready.
-    if (!this.rule) {
-      return;
-    } // Check needed for test purposes.
-    this._setupValues(this.rule);
+    this.addEventListener('access-saved', () => this.handleAccessSaved());
   }
 
   override connectedCallback() {
     super.connectedCallback();
+    if (this.rule) {
+      this.setupValues();
+    }
     // Check needed for test purposes.
-    if (!this._originalRuleValues && this.rule) {
-      // Observer _handleValueChange is called after the ready()
-      // method finishes. Original values must be set later to
-      // avoid set .modified flag to true
-      this._setOriginalRuleValues(this.rule?.value);
+    if (!this.originalRuleValues && this.rule) {
+      this.setOriginalRuleValues();
     }
   }
 
-  _setupValues(rule?: Rule) {
-    if (!rule?.value) {
-      this._setDefaultRuleValues();
+  static override get styles() {
+    return [
+      formStyles,
+      sharedStyles,
+      css`
+        :host {
+          border-bottom: 1px solid var(--border-color);
+          padding: var(--spacing-m);
+          display: block;
+        }
+        #removeBtn {
+          display: none;
+        }
+        .editing #removeBtn {
+          display: flex;
+        }
+        #options {
+          align-items: baseline;
+          display: flex;
+        }
+        #options > * {
+          margin-right: var(--spacing-m);
+        }
+        #mainContainer {
+          align-items: baseline;
+          display: flex;
+          flex-wrap: nowrap;
+          justify-content: space-between;
+        }
+        #deletedContainer.deleted {
+          align-items: baseline;
+          display: flex;
+          justify-content: space-between;
+        }
+        #undoBtn,
+        #force,
+        #deletedContainer,
+        #mainContainer.deleted {
+          display: none;
+        }
+        #undoBtn.modified,
+        #force.force {
+          display: block;
+        }
+        .groupPath {
+          color: var(--deemphasized-text-color);
+        }
+        iron-autogrow-textarea {
+          width: 14em;
+        }
+      `,
+    ];
+  }
+
+  override render() {
+    return html`
+      <div
+        id="mainContainer"
+        class="gr-form-styles ${this.computeSectionClass()}"
+      >
+        <div id="options">
+          <gr-select
+            id="action"
+            .bindValue=${this.rule?.value?.action}
+            @bind-value-changed=${(e: BindValueChangeEvent) => {
+              this.handleActionBindValueChanged(e);
+            }}
+          >
+            <select ?disabled=${!this.editing}>
+              ${this.computeOptions().map(
+                item => html` <option value=${item}>${item}</option> `
+              )}
+            </select>
+          </gr-select>
+          ${this.renderMinAndMaxLabel()} ${this.renderMinAndMaxInput()}
+          <a class="groupPath" href="${this.computeGroupPath(this.groupId)}">
+            ${this.groupName}
+          </a>
+          <gr-select
+            id="force"
+            class="${this.computeForce(this.rule?.value?.action)
+              ? 'force'
+              : ''}"
+            .bindValue=${this.rule?.value?.force}
+            @bind-value-changed=${(e: BindValueChangeEvent) => {
+              this.handleForceBindValueChanged(e);
+            }}
+          >
+            <select ?disabled=${!this.editing}>
+              ${this.computeForceOptions(this.rule?.value?.action).map(
+                item => html`
+                  <option value=${item.value}>${item.value}</option>
+                `
+              )}
+            </select>
+          </gr-select>
+        </div>
+        <gr-button
+          link
+          id="removeBtn"
+          @click=${() => {
+            this.handleRemoveRule();
+          }}
+          >Remove</gr-button
+        >
+      </div>
+      <div
+        id="deletedContainer"
+        class="gr-form-styles ${this.computeSectionClass()}"
+      >
+        ${this.groupName} was deleted
+        <gr-button
+          link
+          id="undoRemoveBtn"
+          @click=${() => {
+            this.handleUndoRemove();
+          }}
+          >Undo</gr-button
+        >
+      </div>
+    `;
+  }
+
+  private renderMinAndMaxLabel() {
+    if (!this.label) return;
+
+    return html`
+      <gr-select
+        id="labelMin"
+        .bindValue=${this.rule?.value?.min}
+        @bind-value-changed=${(e: BindValueChangeEvent) => {
+          this.handleMinBindValueChanged(e);
+        }}
+      >
+        <select ?disabled=${!this.editing}>
+          ${this.label.values.map(
+            item => html` <option value=${item.value}>${item.value}</option> `
+          )}
+        </select>
+      </gr-select>
+      <gr-select
+        id="labelMax"
+        .bindValue=${this.rule?.value?.max}
+        @bind-value-changed=${(e: BindValueChangeEvent) => {
+          this.handleMaxBindValueChanged(e);
+        }}
+      >
+        <select ?disabled=${!this.editing}>
+          ${this.label.values.map(
+            item => html` <option value=${item.value}>${item.value}</option> `
+          )}
+        </select>
+      </gr-select>
+    `;
+  }
+
+  private renderMinAndMaxInput() {
+    if (!this.hasRange) return;
+
+    return html`
+      <iron-autogrow-textarea
+        id="minInput"
+        class="min"
+        autocomplete="on"
+        placeholder="Min value"
+        .bindValue=${this.rule?.value?.min}
+        ?disabled=${!this.editing}
+        @bind-value-changed=${(e: BindValueChangeEvent) => {
+          this.handleMinBindValueChanged(e);
+        }}
+      ></iron-autogrow-textarea>
+      <iron-autogrow-textarea
+        id="maxInput"
+        class="max"
+        autocomplete="on"
+        placeholder="Max value"
+        .bindValue=${this.rule?.value?.max}
+        ?disabled=${!this.editing}
+        @bind-value-changed=${(e: BindValueChangeEvent) => {
+          this.handleMaxBindValueChanged(e);
+        }}
+      ></iron-autogrow-textarea>
+    `;
+  }
+
+  override willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has('editing')) {
+      this.handleEditingChanged(changedProperties.get('editing') as boolean);
     }
   }
 
-  _computeForce(permission: AccessPermissionId, action?: string) {
-    if (AccessPermissionId.PUSH === permission && action !== Action.DENY) {
+  // private but used in test
+  setupValues() {
+    if (!this.rule?.value) {
+      this.setDefaultRuleValues();
+    }
+  }
+
+  // private but used in test
+  computeForce(action?: string) {
+    if (AccessPermissionId.PUSH === this.permission && action !== Action.DENY) {
       return true;
     }
 
-    return AccessPermissionId.EDIT_TOPIC_NAME === permission;
+    return AccessPermissionId.EDIT_TOPIC_NAME === this.permission;
   }
 
-  _computeForceClass(permission: AccessPermissionId, action?: string) {
-    return this._computeForce(permission, action) ? 'force' : '';
+  // private but used in test
+  computeGroupPath(groupId?: string) {
+    if (!groupId) return;
+    return `${getBaseUrl()}/admin/groups/${encodeURL(groupId, true)}`;
   }
 
-  _computeGroupPath(group: string) {
-    return `${getBaseUrl()}/admin/groups/${encodeURL(group, true)}`;
-  }
-
-  _handleAccessSaved() {
-    if (!this.rule) return;
+  // private but used in test
+  handleAccessSaved() {
     // Set a new 'original' value to keep track of after the value has been
     // saved.
-    this._setOriginalRuleValues(this.rule.value);
+    this.setOriginalRuleValues();
   }
 
-  _handleEditingChanged(editing: boolean, editingOld: boolean) {
+  private handleEditingChanged(editingOld: boolean) {
     // Ignore when editing gets set initially.
     if (!editingOld) {
       return;
     }
     // Restore original values if no longer editing.
-    if (!editing) {
-      this._handleUndoChange();
+    if (!this.editing) {
+      this.handleUndoChange();
     }
   }
 
-  _computeSectionClass(editing: boolean, deleted: boolean) {
+  // private but used in test
+  computeSectionClass() {
     const classList = [];
-    if (editing) {
+    if (this.editing) {
       classList.push('editing');
     }
-    if (deleted) {
+    if (this.deleted) {
       classList.push('deleted');
     }
     return classList.join(' ');
   }
 
-  _computeForceOptions(permission: string, action?: string) {
-    if (permission === AccessPermissionId.PUSH) {
+  // private but used in test
+  computeForceOptions(action?: string) {
+    if (this.permission === AccessPermissionId.PUSH) {
       if (action === Action.ALLOW) {
         return ForcePushOptions.ALLOW;
       } else if (action === Action.BLOCK) {
@@ -222,83 +401,158 @@
       } else {
         return [];
       }
-    } else if (permission === AccessPermissionId.EDIT_TOPIC_NAME) {
+    } else if (this.permission === AccessPermissionId.EDIT_TOPIC_NAME) {
       return FORCE_EDIT_OPTIONS;
     }
     return [];
   }
 
-  _getDefaultRuleValues(permission: AccessPermissionId, label?: RuleLabel) {
+  // private but used in test
+  getDefaultRuleValues() {
     const ruleAction = Action.ALLOW;
     const value: RuleValue = {};
-    if (permission === AccessPermissionId.PRIORITY) {
+    if (this.permission === AccessPermissionId.PRIORITY) {
       value.action = PRIORITY_OPTIONS[0];
       return value;
-    } else if (label) {
-      value.min = label.values[0].value;
-      value.max = label.values[label.values.length - 1].value;
-    } else if (this._computeForce(permission, ruleAction)) {
-      value.force = this._computeForceOptions(permission, ruleAction)[0].value;
+    } else if (this.label) {
+      value.min = this.label.values[0].value;
+      value.max = this.label.values[this.label.values.length - 1].value;
+    } else if (this.computeForce(ruleAction)) {
+      value.force = this.computeForceOptions(ruleAction)[0].value;
     }
     value.action = DROPDOWN_OPTIONS[0];
     return value;
   }
 
-  _setDefaultRuleValues() {
-    this.set(
-      'rule.value',
-      this._getDefaultRuleValues(this.permission, this.label)
-    );
+  // private but used in test
+  setDefaultRuleValues() {
+    this.rule!.value = this.getDefaultRuleValues();
+
+    this.handleRuleChange();
   }
 
-  _computeOptions(permission: string) {
-    if (permission === 'priority') {
+  // private but used in test
+  computeOptions() {
+    if (this.permission === 'priority') {
       return PRIORITY_OPTIONS;
     }
     return DROPDOWN_OPTIONS;
   }
 
-  _handleRemoveRule() {
+  private handleRemoveRule() {
     if (!this.rule?.value) return;
     if (this.rule.value.added) {
       fireEvent(this, 'added-rule-removed');
     }
-    this._deleted = true;
+    this.deleted = true;
     this.rule.value.deleted = true;
+
+    this.handleRuleChange();
+
     fireEvent(this, 'access-modified');
   }
 
-  _handleUndoRemove() {
+  private handleUndoRemove() {
     if (!this.rule?.value) return;
-    this._deleted = false;
+    this.deleted = false;
     delete this.rule.value.deleted;
+
+    this.handleRuleChange();
   }
 
-  _handleUndoChange() {
+  private handleUndoChange() {
     if (!this.rule?.value) return;
     // gr-permission will take care of removing rules that were added but
     // unsaved. We need to keep the added bit for the filter.
     if (this.rule.value.added) {
       return;
     }
-    this.set('rule.value', {...this._originalRuleValues});
-    this._deleted = false;
+    this.rule.value = {...this.originalRuleValues};
+    this.deleted = false;
     delete this.rule.value.deleted;
     delete this.rule.value.modified;
+
+    this.handleRuleChange();
   }
 
-  @observe('rule.value.*')
-  _handleValueChange() {
-    if (!this._originalRuleValues || !this.rule?.value) {
+  // private but used in test
+  handleValueChange() {
+    if (!this.originalRuleValues || !this.rule?.value) {
       return;
     }
     this.rule.value.modified = true;
+
+    this.handleRuleChange();
+
     // Allows overall access page to know a change has been made.
     fireEvent(this, 'access-modified');
   }
 
-  _setOriginalRuleValues(value?: RuleValue) {
-    if (value === undefined) return;
-    this._originalRuleValues = {...value};
+  // private but used in test
+  setOriginalRuleValues() {
+    if (!this.rule?.value) return;
+    this.originalRuleValues = {...this.rule!.value};
+  }
+
+  private handleActionBindValueChanged(e: BindValueChangeEvent) {
+    if (
+      !this.rule?.value ||
+      e.detail.value === undefined ||
+      this.rule.value.action === String(e.detail.value)
+    )
+      return;
+
+    this.rule.value.action = String(e.detail.value);
+
+    this.handleValueChange();
+  }
+
+  private handleMinBindValueChanged(e: BindValueChangeEvent) {
+    if (
+      !this.rule?.value ||
+      e.detail.value === undefined ||
+      this.rule.value.min === Number(e.detail.value)
+    )
+      return;
+    this.rule.value.min = Number(e.detail.value);
+
+    this.handleValueChange();
+  }
+
+  private handleMaxBindValueChanged(e: BindValueChangeEvent) {
+    if (
+      !this.rule?.value ||
+      e.detail.value === undefined ||
+      this.rule.value.max === Number(e.detail.value)
+    )
+      return;
+    this.rule.value.max = Number(e.detail.value);
+
+    this.handleValueChange();
+  }
+
+  private handleForceBindValueChanged(e: BindValueChangeEvent) {
+    const forceValue = String(e.detail.value) === 'true' ? true : false;
+    if (
+      !this.rule?.value ||
+      e.detail.value === undefined ||
+      this.rule.value.force === forceValue
+    )
+      return;
+    this.rule.value.force = forceValue;
+
+    this.handleValueChange();
+  }
+
+  private handleRuleChange() {
+    this.requestUpdate('rule');
+
+    this.dispatchEvent(
+      new CustomEvent('rule-changed', {
+        detail: {value: this.rule},
+        composed: true,
+        bubbles: true,
+      })
+    );
   }
 }
diff --git a/polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor_html.ts b/polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor_html.ts
deleted file mode 100644
index c4d7688..0000000
--- a/polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor_html.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * @license
- * Copyright (C) 2020 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import {html} from '@polymer/polymer/lib/utils/html-tag';
-
-export const htmlTemplate = html`
-  <style include="shared-styles">
-    :host {
-      border-bottom: 1px solid var(--border-color);
-      padding: var(--spacing-m);
-      display: block;
-    }
-    #removeBtn {
-      display: none;
-    }
-    .editing #removeBtn {
-      display: flex;
-    }
-    #options {
-      align-items: baseline;
-      display: flex;
-    }
-    #options > * {
-      margin-right: var(--spacing-m);
-    }
-    #mainContainer {
-      align-items: baseline;
-      display: flex;
-      flex-wrap: nowrap;
-      justify-content: space-between;
-    }
-    #deletedContainer.deleted {
-      align-items: baseline;
-      display: flex;
-      justify-content: space-between;
-    }
-    #undoBtn,
-    #force,
-    #deletedContainer,
-    #mainContainer.deleted {
-      display: none;
-    }
-    #undoBtn.modified,
-    #force.force {
-      display: block;
-    }
-    .groupPath {
-      color: var(--deemphasized-text-color);
-    }
-  </style>
-  <style include="gr-form-styles">
-    iron-autogrow-textarea {
-      width: 14em;
-    }
-  </style>
-  <div
-    id="mainContainer"
-    class$="gr-form-styles [[_computeSectionClass(editing, _deleted)]]"
-  >
-    <div id="options">
-      <gr-select
-        id="action"
-        bind-value="{{rule.value.action}}"
-        on-change="_handleValueChange"
-      >
-        <select disabled$="[[!editing]]">
-          <template is="dom-repeat" items="[[_computeOptions(permission)]]">
-            <option value="[[item]]">[[item]]</option>
-          </template>
-        </select>
-      </gr-select>
-      <template is="dom-if" if="[[label]]">
-        <gr-select
-          id="labelMin"
-          bind-value="{{rule.value.min}}"
-          on-change="_handleValueChange"
-        >
-          <select disabled$="[[!editing]]">
-            <template is="dom-repeat" items="[[label.values]]">
-              <option value="[[item.value]]">[[item.value]]</option>
-            </template>
-          </select>
-        </gr-select>
-        <gr-select
-          id="labelMax"
-          bind-value="{{rule.value.max}}"
-          on-change="_handleValueChange"
-        >
-          <select disabled$="[[!editing]]">
-            <template is="dom-repeat" items="[[label.values]]">
-              <option value="[[item.value]]">[[item.value]]</option>
-            </template>
-          </select>
-        </gr-select>
-      </template>
-      <template is="dom-if" if="[[hasRange]]">
-        <iron-autogrow-textarea
-          id="minInput"
-          class="min"
-          autocomplete="on"
-          placeholder="Min value"
-          bind-value="{{rule.value.min}}"
-          disabled$="[[!editing]]"
-        ></iron-autogrow-textarea>
-        <iron-autogrow-textarea
-          id="maxInput"
-          class="max"
-          autocomplete="on"
-          placeholder="Max value"
-          bind-value="{{rule.value.max}}"
-          disabled$="[[!editing]]"
-        ></iron-autogrow-textarea>
-      </template>
-      <a class="groupPath" href$="[[_computeGroupPath(groupId)]]">
-        [[groupName]]
-      </a>
-      <gr-select
-        id="force"
-        class$="[[_computeForceClass(permission, rule.value.action)]]"
-        bind-value="{{rule.value.force}}"
-        on-change="_handleValueChange"
-      >
-        <select disabled$="[[!editing]]">
-          <template
-            is="dom-repeat"
-            items="[[_computeForceOptions(permission, rule.value.action)]]"
-          >
-            <option value="[[item.value]]">[[item.name]]</option>
-          </template>
-        </select>
-      </gr-select>
-    </div>
-    <gr-button link="" id="removeBtn" on-click="_handleRemoveRule"
-      >Remove</gr-button
-    >
-  </div>
-  <div
-    id="deletedContainer"
-    class$="gr-form-styles [[_computeSectionClass(editing, _deleted)]]"
-  >
-    [[groupName]] was deleted
-    <gr-button link="" id="undoRemoveBtn" on-click="_handleUndoRemove"
-      >Undo</gr-button
-    >
-  </div>
-`;
diff --git a/polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor_test.ts b/polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor_test.ts
index 1afd123..47c3bea 100644
--- a/polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor_test.ts
+++ b/polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor_test.ts
@@ -29,12 +29,13 @@
 suite('gr-rule-editor tests', () => {
   let element: GrRuleEditor;
 
-  setup(() => {
-    element = basicFixture.instantiate();
+  setup(async () => {
+    element = basicFixture.instantiate() as GrRuleEditor;
+    await element.updateComplete;
   });
 
   suite('unit tests', () => {
-    test('_computeForce, _computeForceClass, and _computeForceOptions', () => {
+    test('computeForce and computeForceOptions', () => {
       const ForcePushOptions = {
         ALLOW: [
           {name: 'Allow pushing (but not force pushing)', value: false},
@@ -56,67 +57,55 @@
           value: true,
         },
       ];
-      let permission = 'push' as AccessPermissionId;
+      element.permission = 'push' as AccessPermissionId;
       let action = 'ALLOW';
-      assert.isTrue(element._computeForce(permission, action));
-      assert.equal(element._computeForceClass(permission, action), 'force');
+      assert.isTrue(element.computeForce(action));
       assert.deepEqual(
-        element._computeForceOptions(permission, action),
+        element.computeForceOptions(action),
         ForcePushOptions.ALLOW
       );
 
       action = 'BLOCK';
-      assert.isTrue(element._computeForce(permission, action));
-      assert.equal(element._computeForceClass(permission, action), 'force');
+      assert.isTrue(element.computeForce(action));
       assert.deepEqual(
-        element._computeForceOptions(permission, action),
+        element.computeForceOptions(action),
         ForcePushOptions.BLOCK
       );
 
       action = 'DENY';
-      assert.isFalse(element._computeForce(permission, action));
-      assert.equal(element._computeForceClass(permission, action), '');
-      assert.equal(element._computeForceOptions(permission, action).length, 0);
+      assert.isFalse(element.computeForce(action));
+      assert.equal(element.computeForceOptions(action).length, 0);
 
-      permission = 'editTopicName' as AccessPermissionId;
-      assert.isTrue(element._computeForce(permission));
-      assert.equal(element._computeForceClass(permission), 'force');
-      assert.deepEqual(
-        element._computeForceOptions(permission),
-        FORCE_EDIT_OPTIONS
-      );
-      permission = 'submit' as AccessPermissionId;
-      assert.isFalse(element._computeForce(permission));
-      assert.equal(element._computeForceClass(permission), '');
-      assert.deepEqual(element._computeForceOptions(permission), []);
+      element.permission = 'editTopicName' as AccessPermissionId;
+      assert.isTrue(element.computeForce());
+      assert.deepEqual(element.computeForceOptions(), FORCE_EDIT_OPTIONS);
+      element.permission = 'submit' as AccessPermissionId;
+      assert.isFalse(element.computeForce());
+      assert.deepEqual(element.computeForceOptions(), []);
     });
 
-    test('_computeSectionClass', () => {
-      let deleted = true;
-      let editing = false;
-      assert.equal(element._computeSectionClass(editing, deleted), 'deleted');
+    test('computeSectionClass', () => {
+      element.deleted = true;
+      element.editing = false;
+      assert.equal(element.computeSectionClass(), 'deleted');
 
-      deleted = false;
-      assert.equal(element._computeSectionClass(editing, deleted), '');
+      element.deleted = false;
+      assert.equal(element.computeSectionClass(), '');
 
-      editing = true;
-      assert.equal(element._computeSectionClass(editing, deleted), 'editing');
+      element.editing = true;
+      assert.equal(element.computeSectionClass(), 'editing');
 
-      deleted = true;
-      assert.equal(
-        element._computeSectionClass(editing, deleted),
-        'editing deleted'
-      );
+      element.deleted = true;
+      assert.equal(element.computeSectionClass(), 'editing deleted');
     });
 
-    test('_getDefaultRuleValues', () => {
-      let permission = 'priority' as AccessPermissionId;
-      let label;
-      assert.deepEqual(element._getDefaultRuleValues(permission, label), {
+    test('getDefaultRuleValues', () => {
+      element.permission = 'priority' as AccessPermissionId;
+      assert.deepEqual(element.getDefaultRuleValues(), {
         action: 'BATCH',
       });
-      permission = 'label-Code-Review' as AccessPermissionId;
-      label = {
+      element.permission = 'label-Code-Review' as AccessPermissionId;
+      element.label = {
         values: [
           {value: -2, text: 'This shall not be merged'},
           {value: -1, text: 'I would prefer this is not merged as is'},
@@ -125,71 +114,73 @@
           {value: 2, text: 'Looks good to me, approved'},
         ],
       };
-      assert.deepEqual(element._getDefaultRuleValues(permission, label), {
+      assert.deepEqual(element.getDefaultRuleValues(), {
         action: 'ALLOW',
         max: 2,
         min: -2,
       });
-      permission = 'push' as AccessPermissionId;
-      label = undefined;
-      assert.deepEqual(element._getDefaultRuleValues(permission, label), {
+      element.permission = 'push' as AccessPermissionId;
+      element.label = undefined;
+      assert.deepEqual(element.getDefaultRuleValues(), {
         action: 'ALLOW',
         force: false,
       });
-      permission = 'submit' as AccessPermissionId;
-      assert.deepEqual(element._getDefaultRuleValues(permission, label), {
+      element.permission = 'submit' as AccessPermissionId;
+      assert.deepEqual(element.getDefaultRuleValues(), {
         action: 'ALLOW',
       });
     });
 
-    test('_setDefaultRuleValues', async () => {
+    test('setDefaultRuleValues', async () => {
       element.rule = {value: {}};
       const defaultValue = {action: 'ALLOW'};
       const getDefaultRuleValuesStub = sinon
-        .stub(element, '_getDefaultRuleValues')
+        .stub(element, 'getDefaultRuleValues')
         .returns(defaultValue);
-      element._setDefaultRuleValues();
+      element.setDefaultRuleValues();
       assert.isTrue(getDefaultRuleValuesStub.called);
       assert.equal(element.rule!.value, defaultValue);
     });
 
-    test('_computeOptions', () => {
+    test('computeOptions', () => {
       const PRIORITY_OPTIONS = ['BATCH', 'INTERACTIVE'];
       const DROPDOWN_OPTIONS = ['ALLOW', 'DENY', 'BLOCK'];
-      let permission = 'priority';
-      assert.deepEqual(element._computeOptions(permission), PRIORITY_OPTIONS);
-      permission = 'submit';
-      assert.deepEqual(element._computeOptions(permission), DROPDOWN_OPTIONS);
+      element.permission = 'priority' as AccessPermissionId;
+      assert.deepEqual(element.computeOptions(), PRIORITY_OPTIONS);
+      element.permission = 'submit' as AccessPermissionId;
+      assert.deepEqual(element.computeOptions(), DROPDOWN_OPTIONS);
     });
 
-    test('_handleValueChange', () => {
+    test('handleValueChange', () => {
       const modifiedHandler = sinon.stub();
       element.rule = {value: {}};
       element.addEventListener('access-modified', modifiedHandler);
-      element._handleValueChange();
+      element.handleValueChange();
       assert.isNotOk(element.rule!.value!.modified);
-      element._originalRuleValues = {};
-      element._handleValueChange();
+      element.originalRuleValues = {};
+      element.handleValueChange();
       assert.isTrue(element.rule!.value!.modified);
       assert.isTrue(modifiedHandler.called);
     });
 
-    test('_handleAccessSaved', () => {
+    test('handleAccessSaved', () => {
       const originalValue = {action: 'DENY'};
       const newValue = {action: 'ALLOW'};
-      element._originalRuleValues = originalValue;
+      element.originalRuleValues = originalValue;
       element.rule = {value: newValue};
-      element._handleAccessSaved();
-      assert.deepEqual(element._originalRuleValues, newValue);
+      element.handleAccessSaved();
+      assert.deepEqual(element.originalRuleValues, newValue);
     });
 
-    test('_setOriginalRuleValues', () => {
-      const value = {
-        action: 'ALLOW',
-        force: false,
+    test('setOriginalRuleValues', () => {
+      element.rule = {
+        value: {
+          action: 'ALLOW',
+          force: false,
+        },
       };
-      element._setOriginalRuleValues(value);
-      assert.deepEqual(element._originalRuleValues, value);
+      element.setOriginalRuleValues();
+      assert.deepEqual(element.originalRuleValues, element.rule.value);
     });
   });
 
@@ -204,16 +195,13 @@
         },
       };
       element.section = 'refs/*';
-
-      // Typically called on ready since elements will have properties defined
-      // by the parent element.
-      element._setupValues(element.rule);
-      await flush();
-      element.connectedCallback();
+      element.setupValues();
+      element.setOriginalRuleValues();
+      await element.updateComplete;
     });
 
-    test('_ruleValues and _originalRuleValues are set correctly', () => {
-      assert.deepEqual(element._originalRuleValues, element.rule!.value);
+    test('_ruleValues and originalRuleValues are set correctly', () => {
+      assert.deepEqual(element.originalRuleValues, element.rule!.value);
     });
 
     test('values are set correctly', () => {
@@ -228,8 +216,10 @@
       );
     });
 
-    test('modify and cancel restores original values', () => {
+    test('modify and cancel restores original values', async () => {
+      element.rule = {value: {}};
       element.editing = true;
+      await element.updateComplete;
       assert.notEqual(
         getComputedStyle(queryAndAssert<GrButton>(element, '#removeBtn'))
           .display,
@@ -240,12 +230,13 @@
       actionBindValue.bindValue = 'DENY';
       assert.isTrue(element.rule!.value!.modified);
       element.editing = false;
+      await element.updateComplete;
       assert.equal(
         getComputedStyle(queryAndAssert<GrButton>(element, '#removeBtn'))
           .display,
         'none'
       );
-      assert.deepEqual(element._originalRuleValues, element.rule!.value);
+      assert.deepEqual(element.originalRuleValues, element.rule!.value);
       assert.equal(
         queryAndAssert<GrSelect>(element, '#action').bindValue,
         'ALLOW'
@@ -253,31 +244,33 @@
       assert.isNotOk(element.rule!.value!.modified);
     });
 
-    test('modify value', () => {
+    test('modify value', async () => {
       assert.isNotOk(element.rule!.value!.modified);
       const actionBindValue = queryAndAssert<GrSelect>(element, '#action');
       actionBindValue.bindValue = 'DENY';
-      flush();
+      await element.updateComplete;
       assert.isTrue(element.rule!.value!.modified);
 
       // The original value should now differ from the rule values.
-      assert.notDeepEqual(element._originalRuleValues, element.rule!.value);
+      assert.notDeepEqual(element.originalRuleValues, element.rule!.value);
     });
 
-    test('all selects are disabled when not in edit mode', () => {
+    test('all selects are disabled when not in edit mode', async () => {
       const selects = queryAll<HTMLSelectElement>(element, 'select');
       for (const select of selects) {
         assert.isTrue(select.disabled);
       }
       element.editing = true;
+      await element.updateComplete;
       for (const select of selects) {
         assert.isFalse(select.disabled);
       }
     });
 
-    test('remove rule and undo remove', () => {
+    test('remove rule and undo remove', async () => {
       element.editing = true;
       element.rule = {value: {action: 'ALLOW'}};
+      await element.updateComplete;
       assert.isFalse(
         queryAndAssert<HTMLDivElement>(
           element,
@@ -285,22 +278,25 @@
         ).classList.contains('deleted')
       );
       MockInteractions.tap(queryAndAssert<GrButton>(element, '#removeBtn'));
+      await element.updateComplete;
       assert.isTrue(
         queryAndAssert<HTMLDivElement>(
           element,
           '#deletedContainer'
         ).classList.contains('deleted')
       );
-      assert.isTrue(element._deleted);
+      assert.isTrue(element.deleted);
       assert.isTrue(element.rule!.value!.deleted);
 
       MockInteractions.tap(queryAndAssert<GrButton>(element, '#undoRemoveBtn'));
-      assert.isFalse(element._deleted);
+      await element.updateComplete;
+      assert.isFalse(element.deleted);
       assert.isNotOk(element.rule!.value!.deleted);
     });
 
-    test('remove rule and cancel', () => {
+    test('remove rule and cancel', async () => {
       element.editing = true;
+      await element.updateComplete;
       assert.notEqual(
         getComputedStyle(queryAndAssert<GrButton>(element, '#removeBtn'))
           .display,
@@ -314,7 +310,9 @@
       );
 
       element.rule = {value: {action: 'ALLOW'}};
+      await element.updateComplete;
       MockInteractions.tap(queryAndAssert<GrButton>(element, '#removeBtn'));
+      await element.updateComplete;
       assert.notEqual(
         getComputedStyle(queryAndAssert<GrButton>(element, '#removeBtn'))
           .display,
@@ -326,15 +324,16 @@
         ).display,
         'none'
       );
-      assert.isTrue(element._deleted);
+      assert.isTrue(element.deleted);
       assert.isTrue(element.rule!.value!.deleted);
 
       element.editing = false;
-      assert.isFalse(element._deleted);
+      await element.updateComplete;
+      assert.isFalse(element.deleted);
       assert.isNotOk(element.rule!.value!.deleted);
       assert.isNotOk(element.rule!.value!.modified);
 
-      assert.deepEqual(element._originalRuleValues, element.rule!.value);
+      assert.deepEqual(element.originalRuleValues, element.rule!.value);
       assert.equal(
         getComputedStyle(queryAndAssert<GrButton>(element, '#removeBtn'))
           .display,
@@ -348,9 +347,9 @@
       );
     });
 
-    test('_computeGroupPath', () => {
+    test('computeGroupPath', () => {
       const group = '123';
-      assert.equal(element._computeGroupPath(group), '/admin/groups/123');
+      assert.equal(element.computeGroupPath(group), '/admin/groups/123');
     });
   });
 
@@ -360,14 +359,14 @@
       element.permission = 'editTopicName' as AccessPermissionId;
       element.rule = {};
       element.section = 'refs/*';
-      element._setupValues(element.rule!);
-      await flush();
+      element.setupValues();
+      await element.updateComplete;
       element.rule!.value!.added = true;
-      await flush();
+      await element.updateComplete;
       element.connectedCallback();
     });
 
-    test('_ruleValues and _originalRuleValues are set correctly', () => {
+    test('_ruleValues and originalRuleValues are set correctly', () => {
       // Since the element does not already have default values, they should
       // be set. The original values should be set to those too.
       assert.isNotOk(element.rule!.value!.modified);
@@ -389,23 +388,23 @@
       });
     });
 
-    test('modify value', () => {
+    test('modify value', async () => {
       assert.isNotOk(element.rule!.value!.modified);
       const forceBindValue = queryAndAssert<GrSelect>(element, '#force');
-      forceBindValue.bindValue = true;
-      flush();
+      forceBindValue.bindValue = 'true';
+      await element.updateComplete;
       assert.isTrue(element.rule!.value!.modified);
 
       // The original value should now differ from the rule values.
-      assert.notDeepEqual(element._originalRuleValues, element.rule!.value);
+      assert.notDeepEqual(element.originalRuleValues, element.rule!.value);
     });
 
-    test('remove value', () => {
+    test('remove value', async () => {
       element.editing = true;
       const removeStub = sinon.stub();
       element.addEventListener('added-rule-removed', removeStub);
       MockInteractions.tap(queryAndAssert<GrButton>(element, '#removeBtn'));
-      flush();
+      await element.updateComplete;
       assert.isTrue(removeStub.called);
     });
   });
@@ -432,13 +431,13 @@
         },
       };
       element.section = 'refs/*';
-      element._setupValues(element.rule);
-      await flush();
+      element.setupValues();
+      await element.updateComplete;
       element.connectedCallback();
     });
 
-    test('_ruleValues and _originalRuleValues are set correctly', () => {
-      assert.deepEqual(element._originalRuleValues, element.rule!.value);
+    test('_ruleValues and originalRuleValues are set correctly', () => {
+      assert.deepEqual(element.originalRuleValues, element.rule!.value);
     });
 
     test('values are set correctly', () => {
@@ -459,18 +458,18 @@
       );
     });
 
-    test('modify value', () => {
+    test('modify value', async () => {
       const removeStub = sinon.stub();
       element.addEventListener('added-rule-removed', removeStub);
       assert.isNotOk(element.rule!.value!.modified);
       const labelMinBindValue = queryAndAssert<GrSelect>(element, '#labelMin');
       labelMinBindValue.bindValue = 1;
-      flush();
+      await element.updateComplete;
       assert.isTrue(element.rule!.value!.modified);
       assert.isFalse(removeStub.called);
 
       // The original value should now differ from the rule values.
-      assert.notDeepEqual(element._originalRuleValues, element.rule!.value);
+      assert.notDeepEqual(element.originalRuleValues, element.rule!.value);
     });
   });
 
@@ -478,7 +477,7 @@
     let setDefaultRuleValuesSpy: sinon.SinonSpy;
 
     setup(async () => {
-      setDefaultRuleValuesSpy = sinon.spy(element, '_setDefaultRuleValues');
+      setDefaultRuleValuesSpy = sinon.spy(element, 'setDefaultRuleValues');
       element.label = {
         values: [
           {value: -2, text: 'This shall not be merged'},
@@ -492,14 +491,14 @@
       element.permission = 'label-Code-Review' as AccessPermissionId;
       element.rule = {};
       element.section = 'refs/*';
-      element._setupValues(element.rule!);
-      await flush();
+      element.setupValues();
+      await element.updateComplete;
       element.rule!.value!.added = true;
-      await flush();
+      await element.updateComplete;
       element.connectedCallback();
     });
 
-    test('_ruleValues and _originalRuleValues are set correctly', () => {
+    test('_ruleValues and originalRuleValues are set correctly', () => {
       // Since the element does not already have default values, they should
       // be set. The original values should be set to those too.
       assert.isNotOk(element.rule!.value!.modified);
@@ -528,15 +527,15 @@
       });
     });
 
-    test('modify value', () => {
+    test('modify value', async () => {
       assert.isNotOk(element.rule!.value!.modified);
       const labelMinBindValue = queryAndAssert<GrSelect>(element, '#labelMin');
       labelMinBindValue.bindValue = 1;
-      flush();
+      await element.updateComplete;
       assert.isTrue(element.rule!.value!.modified);
 
       // The original value should now differ from the rule values.
-      assert.notDeepEqual(element._originalRuleValues, element.rule!.value);
+      assert.notDeepEqual(element.originalRuleValues, element.rule!.value);
     });
   });
 
@@ -551,108 +550,13 @@
         },
       };
       element.section = 'refs/*';
-      element._setupValues(element.rule!);
-      await flush();
+      element.setupValues();
+      await element.updateComplete;
       element.connectedCallback();
     });
 
-    test('_ruleValues and _originalRuleValues are set correctly', () => {
-      assert.deepEqual(element._originalRuleValues, element.rule!.value);
-    });
-
-    test('values are set correctly', () => {
-      assert.isTrue(
-        queryAndAssert<GrSelect>(element, '#force').classList.contains('force')
-      );
-      assert.equal(
-        queryAndAssert<GrSelect>(element, '#action').bindValue,
-        element.rule!.value!.action
-      );
-      assert.equal(
-        queryAndAssert<GrSelect>(element, '#force').bindValue,
-        element.rule!.value!.force
-      );
-      assert.isNotOk(query<GrSelect>(element, '#labelMin'));
-      assert.isNotOk(query<GrSelect>(element, '#labelMax'));
-    });
-
-    test('modify value', () => {
-      assert.isNotOk(element.rule!.value!.modified);
-      const actionBindValue = queryAndAssert<GrSelect>(element, '#action');
-      actionBindValue.bindValue = false;
-      flush();
-      assert.isTrue(element.rule!.value!.modified);
-
-      // The original value should now differ from the rule values.
-      assert.notDeepEqual(element._originalRuleValues, element.rule!.value);
-    });
-  });
-
-  suite('new push rule', () => {
-    setup(async () => {
-      element.groupName = 'Group Name';
-      element.permission = 'push' as AccessPermissionId;
-      element.rule = {};
-      element.section = 'refs/*';
-      element._setupValues(element.rule!);
-      await flush();
-      element.rule!.value!.added = true;
-      await flush();
-      element.connectedCallback();
-    });
-
-    test('_ruleValues and _originalRuleValues are set correctly', () => {
-      // Since the element does not already have default values, they should
-      // be set. The original values should be set to those too.
-      assert.isNotOk(element.rule!.value!.modified);
-      const expectedRuleValue = {
-        action: 'ALLOW',
-        force: false,
-        added: true,
-      };
-      assert.deepEqual(element.rule!.value, expectedRuleValue);
-      test('values are set correctly', () => {
-        assert.equal(
-          queryAndAssert<GrSelect>(element, '#action').bindValue,
-          expectedRuleValue.action
-        );
-        assert.equal(
-          queryAndAssert<GrSelect>(element, '#force').bindValue,
-          expectedRuleValue.action
-        );
-      });
-    });
-
-    test('modify value', () => {
-      assert.isNotOk(element.rule!.value!.modified);
-      const forceBindValue = queryAndAssert<GrSelect>(element, '#force');
-      forceBindValue.bindValue = true;
-      flush();
-      assert.isTrue(element.rule!.value!.modified);
-
-      // The original value should now differ from the rule values.
-      assert.notDeepEqual(element._originalRuleValues, element.rule!.value);
-    });
-  });
-
-  suite('already existing edit rule', () => {
-    setup(async () => {
-      element.groupName = 'Group Name';
-      element.permission = 'editTopicName' as AccessPermissionId;
-      element.rule = {
-        value: {
-          action: 'ALLOW',
-          force: true,
-        },
-      };
-      element.section = 'refs/*';
-      element._setupValues(element.rule);
-      await flush();
-      element.connectedCallback();
-    });
-
-    test('_ruleValues and _originalRuleValues are set correctly', () => {
-      assert.deepEqual(element._originalRuleValues, element.rule!.value);
+    test('_ruleValues and originalRuleValues are set correctly', () => {
+      assert.deepEqual(element.originalRuleValues, element.rule!.value);
     });
 
     test('values are set correctly', () => {
@@ -675,11 +579,106 @@
       assert.isNotOk(element.rule!.value!.modified);
       const actionBindValue = queryAndAssert<GrSelect>(element, '#action');
       actionBindValue.bindValue = false;
-      await flush();
+      await element.updateComplete;
       assert.isTrue(element.rule!.value!.modified);
 
       // The original value should now differ from the rule values.
-      assert.notDeepEqual(element._originalRuleValues, element.rule!.value);
+      assert.notDeepEqual(element.originalRuleValues, element.rule!.value);
+    });
+  });
+
+  suite('new push rule', async () => {
+    setup(async () => {
+      element.groupName = 'Group Name';
+      element.permission = 'push' as AccessPermissionId;
+      element.rule = {};
+      element.section = 'refs/*';
+      element.setupValues();
+      await element.updateComplete;
+      element.rule!.value!.added = true;
+      await element.updateComplete;
+      element.connectedCallback();
+    });
+
+    test('_ruleValues and originalRuleValues are set correctly', () => {
+      // Since the element does not already have default values, they should
+      // be set. The original values should be set to those too.
+      assert.isNotOk(element.rule!.value!.modified);
+      const expectedRuleValue = {
+        action: 'ALLOW',
+        force: false,
+        added: true,
+      };
+      assert.deepEqual(element.rule!.value, expectedRuleValue);
+      test('values are set correctly', () => {
+        assert.equal(
+          queryAndAssert<GrSelect>(element, '#action').bindValue,
+          expectedRuleValue.action
+        );
+        assert.equal(
+          queryAndAssert<GrSelect>(element, '#force').bindValue,
+          expectedRuleValue.action
+        );
+      });
+    });
+
+    test('modify value', async () => {
+      assert.isNotOk(element.rule!.value!.modified);
+      const forceBindValue = queryAndAssert<GrSelect>(element, '#force');
+      forceBindValue.bindValue = true;
+      await element.updateComplete;
+      assert.isTrue(element.rule!.value!.modified);
+
+      // The original value should now differ from the rule values.
+      assert.notDeepEqual(element.originalRuleValues, element.rule!.value);
+    });
+  });
+
+  suite('already existing edit rule', () => {
+    setup(async () => {
+      element.groupName = 'Group Name';
+      element.permission = 'editTopicName' as AccessPermissionId;
+      element.rule = {
+        value: {
+          action: 'ALLOW',
+          force: true,
+        },
+      };
+      element.section = 'refs/*';
+      element.setupValues();
+      await element.updateComplete;
+      element.connectedCallback();
+    });
+
+    test('_ruleValues and originalRuleValues are set correctly', () => {
+      assert.deepEqual(element.originalRuleValues, element.rule!.value);
+    });
+
+    test('values are set correctly', () => {
+      assert.isTrue(
+        queryAndAssert<GrSelect>(element, '#force').classList.contains('force')
+      );
+      assert.equal(
+        queryAndAssert<GrSelect>(element, '#action').bindValue,
+        element.rule!.value!.action
+      );
+      assert.equal(
+        queryAndAssert<GrSelect>(element, '#force').bindValue,
+        element.rule!.value!.force
+      );
+      assert.isNotOk(query<GrSelect>(element, '#labelMin'));
+      assert.isNotOk(query<GrSelect>(element, '#labelMax'));
+    });
+
+    test('modify value', async () => {
+      assert.isNotOk(element.rule!.value!.modified);
+      const actionBindValue = queryAndAssert<GrSelect>(element, '#action');
+      actionBindValue.bindValue = false;
+      await element.updateComplete;
+      assert.isTrue(element.rule!.value!.modified);
+
+      // The original value should now differ from the rule values.
+      assert.notDeepEqual(element.originalRuleValues, element.rule!.value);
     });
   });
 });