From 32f24a881e546c553df39d2b92346664b59cdd39 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 17 Aug 2022 11:37:37 -0400
Subject: [PATCH] make dir/lang reactive everywhere

---
 docs/resources/changelog.md                           | 1 +
 scripts/plop/templates/component/component.hbs        | 8 ++++++--
 src/components/alert/alert.ts                         | 5 +++--
 src/components/animated-image/animated-image.ts       | 5 +++--
 src/components/animation/animation.ts                 | 5 +++--
 src/components/avatar/avatar.ts                       | 5 +++--
 src/components/badge/badge.ts                         | 5 +++--
 src/components/breadcrumb-item/breadcrumb-item.ts     | 5 +++--
 src/components/breadcrumb/breadcrumb.ts               | 5 +++--
 src/components/button-group/button-group.ts           | 5 +++--
 src/components/button/button.ts                       | 4 ++--
 src/components/card/card.ts                           | 5 +++--
 src/components/checkbox/checkbox.ts                   | 5 +++--
 src/components/color-picker/color-picker.ts           | 8 +++-----
 src/components/details/details.ts                     | 5 +++--
 src/components/dialog/dialog.ts                       | 5 +++--
 src/components/divider/divider.ts                     | 4 ++--
 src/components/drawer/drawer.ts                       | 7 ++++---
 src/components/dropdown/dropdown.ts                   | 5 +++--
 src/components/format-bytes/format-bytes.ts           | 7 ++-----
 src/components/format-date/format-date.ts             | 8 +++-----
 src/components/format-number/format-number.ts         | 7 ++-----
 src/components/icon-button/icon-button.ts             | 4 ++--
 src/components/icon/icon.ts                           | 5 +++--
 src/components/image-comparer/image-comparer.ts       | 5 +++--
 src/components/include/include.ts                     | 5 +++--
 src/components/input/input.ts                         | 5 +++--
 src/components/menu-item/menu-item.ts                 | 5 +++--
 src/components/menu-label/menu-label.ts               | 5 +++--
 src/components/menu/menu.ts                           | 5 +++--
 src/components/mutation-observer/mutation-observer.ts | 5 +++--
 src/components/popup/popup.ts                         | 5 +++--
 src/components/progress-bar/progress-bar.ts           | 8 +++-----
 src/components/progress-ring/progress-ring.ts         | 8 +++-----
 src/components/qr-code/qr-code.ts                     | 5 +++--
 src/components/radio-button/radio-button.ts           | 4 ++--
 src/components/radio-group/radio-group.ts             | 5 +++--
 src/components/radio/radio.ts                         | 5 +++--
 src/components/range/range.ts                         | 5 +++--
 src/components/rating/rating.ts                       | 5 +++--
 src/components/relative-time/relative-time.ts         | 8 +++-----
 src/components/resize-observer/resize-observer.ts     | 5 +++--
 src/components/responsive-media/responsive-media.ts   | 5 +++--
 src/components/select/select.ts                       | 5 +++--
 src/components/skeleton/skeleton.ts                   | 5 +++--
 src/components/spinner/spinner.ts                     | 5 +++--
 src/components/split-panel/split-panel.ts             | 5 +++--
 src/components/switch/switch.ts                       | 5 +++--
 src/components/tab-group/tab-group.ts                 | 8 +++-----
 src/components/tab-panel/tab-panel.ts                 | 5 +++--
 src/components/tab/tab.ts                             | 8 +++-----
 src/components/tag/tag.ts                             | 5 +++--
 src/components/textarea/textarea.ts                   | 8 ++++----
 src/components/tooltip/tooltip.ts                     | 5 +++--
 src/components/tree-item/tree-item.ts                 | 5 +++--
 src/components/tree/tree.ts                           | 5 +++--
 src/components/visually-hidden/visually-hidden.ts     | 5 +++--
 src/internal/shoelace-element.ts                      | 8 ++++++++
 58 files changed, 176 insertions(+), 142 deletions(-)
 create mode 100644 src/internal/shoelace-element.ts

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 8eca210c..2c3346bf 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - Improved RTL support for `<sl-image-comparer>`
+- Refactored components to extend from `ShoelaceElement` to make `dir` and `lang` reactive properties in all components
 
 ## 2.0.0-beta.81
 
diff --git a/scripts/plop/templates/component/component.hbs b/scripts/plop/templates/component/component.hbs
index d734f227..401bfc2b 100644
--- a/scripts/plop/templates/component/component.hbs
+++ b/scripts/plop/templates/component/component.hbs
@@ -1,7 +1,9 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
+import { LocalizeController } from '../../utilities/localize';
 import styles from './{{ tagWithoutPrefix tag }}.styles';
 import type { CSSResultGroup } from 'lit';
 
@@ -21,9 +23,11 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --example - An example CSS custom property.
  */
 @customElement('{{ tag }}')
-export default class {{ properCase tag }} extends LitElement {
+export default class {{ properCase tag }} extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
+  private readonly localize = new LocalizeController(this);
+
   /** An example property. */
   @property() prop = 'example';
 
diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts
index dd007226..19ffd414 100644
--- a/src/components/alert/alert.ts
+++ b/src/components/alert/alert.ts
@@ -1,8 +1,9 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { animateTo, stopAnimations } from '../../internal/animate';
 import { emit, waitForEvent } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
@@ -40,7 +41,7 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'sl
  */
 
 @customElement('sl-alert')
-export default class SlAlert extends LitElement {
+export default class SlAlert extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   private autoHideTimeout: number;
diff --git a/src/components/animated-image/animated-image.ts b/src/components/animated-image/animated-image.ts
index df3134de..c556ce5f 100644
--- a/src/components/animated-image/animated-image.ts
+++ b/src/components/animated-image/animated-image.ts
@@ -1,6 +1,7 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import '../icon/icon';
 import styles from './animated-image.styles';
@@ -23,7 +24,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --icon-size - The size of the play/pause icons.
  */
 @customElement('sl-animated-image')
-export default class SlAnimatedImage extends LitElement {
+export default class SlAnimatedImage extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @state() frozenFrame: string;
diff --git a/src/components/animation/animation.ts b/src/components/animation/animation.ts
index 72a91aa7..49788993 100644
--- a/src/components/animation/animation.ts
+++ b/src/components/animation/animation.ts
@@ -1,6 +1,7 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, queryAsync } from 'lit/decorators.js';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import styles from './animation.styles';
 import { animations } from './animations';
@@ -18,7 +19,7 @@ import type { CSSResultGroup } from 'lit';
  * multiple animation elements.
  */
 @customElement('sl-animation')
-export default class SlAnimation extends LitElement {
+export default class SlAnimation extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   private animation?: Animation;
diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index 43f43971..56ebb650 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -1,6 +1,7 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import '../icon/icon';
 import styles from './avatar.styles';
@@ -22,7 +23,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --size - The size of the avatar.
  */
 @customElement('sl-avatar')
-export default class SlAvatar extends LitElement {
+export default class SlAvatar extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @state() private hasError = false;
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index 115a8489..3b7d522b 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -1,6 +1,7 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import styles from './badge.styles';
 import type { CSSResultGroup } from 'lit';
 
@@ -13,7 +14,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart base - The component's internal wrapper.
  */
 @customElement('sl-badge')
-export default class SlBadge extends LitElement {
+export default class SlBadge extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   /** The badge's variant. */
diff --git a/src/components/breadcrumb-item/breadcrumb-item.ts b/src/components/breadcrumb-item/breadcrumb-item.ts
index 5dbae30f..e009a48b 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.ts
@@ -1,7 +1,8 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { HasSlotController } from '../../internal/slot';
 import styles from './breadcrumb-item.styles';
 import type { CSSResultGroup } from 'lit';
@@ -23,7 +24,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart separator - The container that wraps the separator slot.
  */
 @customElement('sl-breadcrumb-item')
-export default class SlBreadcrumbItem extends LitElement {
+export default class SlBreadcrumbItem extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');
diff --git a/src/components/breadcrumb/breadcrumb.ts b/src/components/breadcrumb/breadcrumb.ts
index 042a09c1..91e92fe2 100644
--- a/src/components/breadcrumb/breadcrumb.ts
+++ b/src/components/breadcrumb/breadcrumb.ts
@@ -1,5 +1,6 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { LocalizeController } from '../../utilities/localize';
 import '../icon/icon';
 import styles from './breadcrumb.styles';
@@ -18,7 +19,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart base - The component's internal wrapper.
  */
 @customElement('sl-breadcrumb')
-export default class SlBreadcrumb extends LitElement {
+export default class SlBreadcrumb extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('slot') defaultSlot: HTMLSlotElement;
diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts
index 250b529c..2a9037b1 100644
--- a/src/components/button-group/button-group.ts
+++ b/src/components/button-group/button-group.ts
@@ -1,5 +1,6 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import styles from './button-group.styles';
 import type { CSSResultGroup } from 'lit';
 
@@ -12,7 +13,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart base - The component's internal wrapper.
  */
 @customElement('sl-button-group')
-export default class SlButtonGroup extends LitElement {
+export default class SlButtonGroup extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('slot') defaultSlot: HTMLSlotElement;
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 4bb2eed7..3c3baf37 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -1,10 +1,10 @@
-import { LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { html, literal } from 'lit/static-html.js';
 import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { HasSlotController } from '../../internal/slot';
 import { LocalizeController } from '../../utilities/localize';
 import '../spinner/spinner';
@@ -31,7 +31,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart caret - The button's caret.
  */
 @customElement('sl-button')
-export default class SlButton extends LitElement {
+export default class SlButton extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('.button') button: HTMLButtonElement | HTMLLinkElement;
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index 24367e71..f9b76a32 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -1,6 +1,7 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { HasSlotController } from '../../internal/slot';
 import styles from './card.styles';
 import type { CSSResultGroup } from 'lit';
@@ -26,7 +27,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --padding - The padding to use for card sections.*
  */
 @customElement('sl-card')
-export default class SlCard extends LitElement {
+export default class SlCard extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 75757f22..bc30a3c5 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -6,6 +6,7 @@ import { live } from 'lit/directives/live.js';
 import { defaultValue } from '../../internal/default-value';
 import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import styles from './checkbox.styles';
 import type { CSSResultGroup } from 'lit';
@@ -27,7 +28,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart label - The checkbox label.
  */
 @customElement('sl-checkbox')
-export default class SlCheckbox extends LitElement {
+export default class SlCheckbox extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('input[type="checkbox"]') input: HTMLInputElement;
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index 634ceeea..2900e474 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -1,5 +1,5 @@
 import Color from 'color';
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -10,6 +10,7 @@ import { drag } from '../../internal/drag';
 import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
 import { clamp } from '../../internal/math';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
 import '../button-group/button-group';
@@ -82,7 +83,7 @@ declare const EyeDropper: EyeDropperConstructor;
  * @cssproperty --swatch-size - The size of each predefined color swatch.
  */
 @customElement('sl-color-picker')
-export default class SlColorPicker extends LitElement {
+export default class SlColorPicker extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('[part="input"]') input: SlInput;
@@ -180,9 +181,6 @@ export default class SlColorPicker extends LitElement {
     '#fff'
   ];
 
-  /** The locale to render the component in. */
-  @property() lang: string;
-
   connectedCallback() {
     super.connectedCallback();
 
diff --git a/src/components/details/details.ts b/src/components/details/details.ts
index 8b6dc859..b9cb6155 100644
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -1,8 +1,9 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../../internal/animate';
 import { emit, waitForEvent } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
 import { LocalizeController } from '../../utilities/localize';
@@ -34,7 +35,7 @@ import type { CSSResultGroup } from 'lit';
  * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
  */
 @customElement('sl-details')
-export default class SlDetails extends LitElement {
+export default class SlDetails extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('.details') details: HTMLElement;
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 26e43470..9dcdbd71 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -6,6 +6,7 @@ import { animateTo, stopAnimations } from '../../internal/animate';
 import { emit, waitForEvent } from '../../internal/event';
 import Modal from '../../internal/modal';
 import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
@@ -57,7 +58,7 @@ import type { CSSResultGroup } from 'lit';
  * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.
  */
 @customElement('sl-dialog')
-export default class SlDialog extends LitElement {
+export default class SlDialog extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('.dialog') dialog: HTMLElement;
diff --git a/src/components/divider/divider.ts b/src/components/divider/divider.ts
index f7e7729e..e64475df 100644
--- a/src/components/divider/divider.ts
+++ b/src/components/divider/divider.ts
@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import styles from './divider.styles';
 import type { CSSResultGroup } from 'lit';
@@ -13,7 +13,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --spacing - The spacing of the divider.
  */
 @customElement('sl-divider')
-export default class SlDivider extends LitElement {
+export default class SlDivider extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   /** Draws the divider in a vertical orientation. */
diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts
index fa3bb7c7..f4d555d0 100644
--- a/src/components/drawer/drawer.ts
+++ b/src/components/drawer/drawer.ts
@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -6,6 +6,7 @@ import { animateTo, stopAnimations } from '../../internal/animate';
 import { emit, waitForEvent } from '../../internal/event';
 import Modal from '../../internal/modal';
 import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { HasSlotController } from '../../internal/slot';
 import { uppercaseFirstLetter } from '../../internal/string';
 import { watch } from '../../internal/watch';
@@ -65,7 +66,7 @@ import type { CSSResultGroup } from 'lit';
  * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.
  */
 @customElement('sl-drawer')
-export default class SlDrawer extends LitElement {
+export default class SlDrawer extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('.drawer') drawer: HTMLElement;
@@ -247,8 +248,8 @@ export default class SlDrawer extends LitElement {
     }
   }
 
+  /* eslint-disable lit-a11y/click-events-have-key-events */
   render() {
-    /* eslint-disable lit-a11y/click-events-have-key-events */
     return html`
       <div
         part="base"
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index 07d21fe8..f5cc1dff 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -1,9 +1,10 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { animateTo, stopAnimations } from '../../internal/animate';
 import { emit, waitForEvent } from '../../internal/event';
 import { scrollIntoView } from '../../internal/scroll';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { getTabbableBoundary } from '../../internal/tabbable';
 import { watch } from '../../internal/watch';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
@@ -39,7 +40,7 @@ import type { CSSResultGroup } from 'lit';
  * @animation dropdown.hide - The animation to use when hiding the dropdown.
  */
 @customElement('sl-dropdown')
-export default class SlDropdown extends LitElement {
+export default class SlDropdown extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('.dropdown') popup: SlPopup;
diff --git a/src/components/format-bytes/format-bytes.ts b/src/components/format-bytes/format-bytes.ts
index 07fd6c39..228a841a 100644
--- a/src/components/format-bytes/format-bytes.ts
+++ b/src/components/format-bytes/format-bytes.ts
@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { LocalizeController } from '../../utilities/localize';
 
 /**
@@ -8,7 +8,7 @@ import { LocalizeController } from '../../utilities/localize';
  * @status stable
  */
 @customElement('sl-format-bytes')
-export default class SlFormatBytes extends LitElement {
+export default class SlFormatBytes extends ShoelaceElement {
   private readonly localize = new LocalizeController(this);
 
   /** The number to format in bytes. */
@@ -20,9 +20,6 @@ export default class SlFormatBytes extends LitElement {
   /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
   @property() display: 'long' | 'short' | 'narrow' = 'short';
 
-  /** The locale to use when formatting the number. */
-  @property() lang: string;
-
   render() {
     if (isNaN(this.value)) {
       return '';
diff --git a/src/components/format-date/format-date.ts b/src/components/format-date/format-date.ts
index 9690ddf8..3405af71 100644
--- a/src/components/format-date/format-date.ts
+++ b/src/components/format-date/format-date.ts
@@ -1,5 +1,6 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { LocalizeController } from '../../utilities/localize';
 
 /**
@@ -7,15 +8,12 @@ import { LocalizeController } from '../../utilities/localize';
  * @status stable
  */
 @customElement('sl-format-date')
-export default class SlFormatDate extends LitElement {
+export default class SlFormatDate extends ShoelaceElement {
   private readonly localize = new LocalizeController(this);
 
   /** The date/time to format. If not set, the current date and time will be used. */
   @property() date: Date | string = new Date();
 
-  /** The locale to use when formatting the date/time. */
-  @property() lang: string;
-
   /** The format for displaying the weekday. */
   @property() weekday: 'narrow' | 'short' | 'long';
 
diff --git a/src/components/format-number/format-number.ts b/src/components/format-number/format-number.ts
index a2287601..4942fcf5 100644
--- a/src/components/format-number/format-number.ts
+++ b/src/components/format-number/format-number.ts
@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { LocalizeController } from '../../utilities/localize';
 
 /**
@@ -7,15 +7,12 @@ import { LocalizeController } from '../../utilities/localize';
  * @status stable
  */
 @customElement('sl-format-number')
-export default class SlFormatNumber extends LitElement {
+export default class SlFormatNumber extends ShoelaceElement {
   private readonly localize = new LocalizeController(this);
 
   /** The number to format. */
   @property({ type: Number }) value = 0;
 
-  /** The locale to use when formatting the number. */
-  @property() lang: string;
-
   /** The formatting style to use. */
   @property() type: 'currency' | 'decimal' | 'percent' = 'decimal';
 
diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts
index c9416c11..1160733e 100644
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -1,9 +1,9 @@
-import { LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { html, literal } from 'lit/static-html.js';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import '../icon/icon';
 import styles from './icon-button.styles';
 import type { CSSResultGroup } from 'lit';
@@ -20,7 +20,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart base - The component's internal wrapper.
  */
 @customElement('sl-icon-button')
-export default class SlIconButton extends LitElement {
+export default class SlIconButton extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @state() private hasFocus = false;
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 92792b46..334175aa 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -1,8 +1,9 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import styles from './icon.styles';
 import { getIconLibrary, unwatchIcon, watchIcon } from './library';
@@ -21,7 +22,7 @@ let parser: DOMParser;
  * @csspart base - The component's internal wrapper.
  */
 @customElement('sl-icon')
-export default class SlIcon extends LitElement {
+export default class SlIcon extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @state() private svg = '';
diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts
index 40c3c1b3..4323ecf8 100644
--- a/src/components/image-comparer/image-comparer.ts
+++ b/src/components/image-comparer/image-comparer.ts
@@ -1,10 +1,11 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { drag } from '../../internal/drag';
 import { emit } from '../../internal/event';
 import { clamp } from '../../internal/math';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
 import '../icon/icon';
@@ -33,7 +34,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --handle-size - The size of the compare handle.
  */
 @customElement('sl-image-comparer')
-export default class SlImageComparer extends LitElement {
+export default class SlImageComparer extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('.image-comparer') base: HTMLElement;
diff --git a/src/components/include/include.ts b/src/components/include/include.ts
index d705d93f..643f2a68 100644
--- a/src/components/include/include.ts
+++ b/src/components/include/include.ts
@@ -1,6 +1,7 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import styles from './include.styles';
 import { requestInclude } from './request';
@@ -14,7 +15,7 @@ import type { CSSResultGroup } from 'lit';
  * @event {{ status: number }} sl-error - Emitted when the included file fails to load due to an error.
  */
 @customElement('sl-include')
-export default class SlInclude extends LitElement {
+export default class SlInclude extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   /**
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index ef145910..2ec4de6f 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -6,6 +6,7 @@ import { live } from 'lit/directives/live.js';
 import { defaultValue } from '../../internal/default-value';
 import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
@@ -56,7 +57,7 @@ const isFirefox = isChromium ? false : navigator.userAgent.includes('Firefox');
  * @csspart suffix - The input suffix container.
  */
 @customElement('sl-input')
-export default class SlInput extends LitElement {
+export default class SlInput extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('.input__control') input: HTMLInputElement;
diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts
index 4edb91d1..63c35b0e 100644
--- a/src/components/menu-item/menu-item.ts
+++ b/src/components/menu-item/menu-item.ts
@@ -1,7 +1,8 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { getTextContent } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import '../icon/icon';
@@ -28,7 +29,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart suffix - The suffix container.
  */
 @customElement('sl-menu-item')
-export default class SlMenuItem extends LitElement {
+export default class SlMenuItem extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   private cachedTextLabel: string;
diff --git a/src/components/menu-label/menu-label.ts b/src/components/menu-label/menu-label.ts
index 287e612b..b96fd911 100644
--- a/src/components/menu-label/menu-label.ts
+++ b/src/components/menu-label/menu-label.ts
@@ -1,5 +1,6 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import styles from './menu-label.styles';
 import type { CSSResultGroup } from 'lit';
 
@@ -12,7 +13,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart base - The component's internal wrapper.
  */
 @customElement('sl-menu-label')
-export default class SlMenuLabel extends LitElement {
+export default class SlMenuLabel extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   render() {
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index 02a04afa..62301b8b 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -1,6 +1,7 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { getTextContent } from '../../internal/slot';
 import styles from './menu.styles';
 import type SlMenuItem from '../menu-item/menu-item';
@@ -18,7 +19,7 @@ export interface MenuSelectEventDetail {
  * @event {{ item: SlMenuItem }} sl-select - Emitted when a menu item is selected.
  */
 @customElement('sl-menu')
-export default class SlMenu extends LitElement {
+export default class SlMenu extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('slot') defaultSlot: HTMLSlotElement;
diff --git a/src/components/mutation-observer/mutation-observer.ts b/src/components/mutation-observer/mutation-observer.ts
index 3e1aa986..537a508c 100644
--- a/src/components/mutation-observer/mutation-observer.ts
+++ b/src/components/mutation-observer/mutation-observer.ts
@@ -1,6 +1,7 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import styles from './mutation-observer.styles';
 import type { CSSResultGroup } from 'lit';
@@ -14,7 +15,7 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The content to watch for mutations.
  */
 @customElement('sl-mutation-observer')
-export default class SlMutationObserver extends LitElement {
+export default class SlMutationObserver extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   private mutationObserver: MutationObserver;
diff --git a/src/components/popup/popup.ts b/src/components/popup/popup.ts
index bc11d6e6..f1dbd70a 100644
--- a/src/components/popup/popup.ts
+++ b/src/components/popup/popup.ts
@@ -1,8 +1,9 @@
 import { arrow, autoUpdate, computePosition, flip, offset, shift, size } from '@floating-ui/dom';
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import styles from './popup.styles';
 import type { CSSResultGroup } from 'lit';
 
@@ -33,7 +34,7 @@ import type { CSSResultGroup } from 'lit';
  *  available when using `auto-size`.
  */
 @customElement('sl-popup')
-export default class SlPopup extends LitElement {
+export default class SlPopup extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */
diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts
index 8fc21041..0fe04185 100644
--- a/src/components/progress-bar/progress-bar.ts
+++ b/src/components/progress-bar/progress-bar.ts
@@ -1,8 +1,9 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './progress-bar.styles';
 import type { CSSResultGroup } from 'lit';
@@ -23,7 +24,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --label-color - The label color.
  */
 @customElement('sl-progress-bar')
-export default class SlProgressBar extends LitElement {
+export default class SlProgressBar extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
   private readonly localize = new LocalizeController(this);
 
@@ -36,9 +37,6 @@ export default class SlProgressBar extends LitElement {
   /** A custom label for the progress bar's aria label. */
   @property() label = '';
 
-  /** The locale to render the component in. */
-  @property() lang: string;
-
   render() {
     return html`
       <div
diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts
index 1cfab68b..de4c1a9f 100644
--- a/src/components/progress-ring/progress-ring.ts
+++ b/src/components/progress-ring/progress-ring.ts
@@ -1,5 +1,6 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './progress-ring.styles';
 import type { CSSResultGroup } from 'lit';
@@ -20,7 +21,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --indicator-color - The indicator color.
  */
 @customElement('sl-progress-ring')
-export default class SlProgressRing extends LitElement {
+export default class SlProgressRing extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
   private readonly localize = new LocalizeController(this);
 
@@ -34,9 +35,6 @@ export default class SlProgressRing extends LitElement {
   /** A custom label for the progress ring's aria label. */
   @property() label = '';
 
-  /** The locale to render the component in. */
-  @property() lang: string;
-
   updated(changedProps: Map<string, unknown>) {
     super.updated(changedProps);
 
diff --git a/src/components/qr-code/qr-code.ts b/src/components/qr-code/qr-code.ts
index cdd644ac..70486f46 100644
--- a/src/components/qr-code/qr-code.ts
+++ b/src/components/qr-code/qr-code.ts
@@ -1,7 +1,8 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import QrCreator from 'qr-creator';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import styles from './qr-code.styles';
 import type { CSSResultGroup } from 'lit';
@@ -13,7 +14,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart base - The component's internal wrapper.
  */
 @customElement('sl-qr-code')
-export default class SlQrCode extends LitElement {
+export default class SlQrCode extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('canvas') canvas: HTMLElement;
diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts
index 42393bc9..d30af6c2 100644
--- a/src/components/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button.ts
@@ -1,9 +1,9 @@
-import { LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { html } from 'lit/static-html.js';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import styles from './radio-button.styles';
@@ -27,7 +27,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart suffix - The suffix slot's container.
  */
 @customElement('sl-radio-button')
-export default class SlRadioButton extends LitElement {
+export default class SlRadioButton extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('.button') input: HTMLInputElement;
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index b70dcf82..da7b0941 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -1,9 +1,10 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { emit } from 'src/internal/event';
 import { FormSubmitController } from 'src/internal/form';
 import { watch } from 'src/internal/watch';
+import ShoelaceElement from '../../internal/shoelace-element';
 import '../button-group/button-group';
 import styles from './radio-group.styles';
 import type SlRadioButton from '../radio-button/radio-button';
@@ -27,7 +28,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart button-group__base - The button group's `base` part.
  */
 @customElement('sl-radio-group')
-export default class SlRadioGroup extends LitElement {
+export default class SlRadioGroup extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   protected readonly formSubmitController = new FormSubmitController(this, {
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 91dbda0d..77079577 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -1,7 +1,8 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { emit } from 'src/internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import styles from './radio.styles';
 import type { CSSResultGroup } from 'lit';
@@ -21,7 +22,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart label - The radio label.
  */
 @customElement('sl-radio')
-export default class SlRadio extends LitElement {
+export default class SlRadio extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @state() checked = false;
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 4830fe1d..b10c01e1 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -6,6 +6,7 @@ import { live } from 'lit/directives/live.js';
 import { defaultValue } from '../../internal/default-value';
 import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
@@ -39,7 +40,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --track-active-offset - The point of origin of the active track.
  */
 @customElement('sl-range')
-export default class SlRange extends LitElement {
+export default class SlRange extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('.range__control') input: HTMLInputElement;
diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts
index b7bb9dcd..a89765ff 100644
--- a/src/components/rating/rating.ts
+++ b/src/components/rating/rating.ts
@@ -1,10 +1,11 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { emit } from '../../internal/event';
 import { clamp } from '../../internal/math';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
 import '../icon/icon';
@@ -27,7 +28,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --symbol-spacing - The spacing to use around symbols.
  */
 @customElement('sl-rating')
-export default class SlRating extends LitElement {
+export default class SlRating extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('.rating') rating: HTMLElement;
diff --git a/src/components/relative-time/relative-time.ts b/src/components/relative-time/relative-time.ts
index f0770605..ceec129c 100644
--- a/src/components/relative-time/relative-time.ts
+++ b/src/components/relative-time/relative-time.ts
@@ -1,5 +1,6 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { LocalizeController } from '../../utilities/localize';
 
 interface UnitConfig {
@@ -22,7 +23,7 @@ const availableUnits: UnitConfig[] = [
  * @status stable
  */
 @customElement('sl-relative-time')
-export default class SlRelativeTime extends LitElement {
+export default class SlRelativeTime extends ShoelaceElement {
   private readonly localize = new LocalizeController(this);
   private updateTimeout: number;
 
@@ -33,9 +34,6 @@ export default class SlRelativeTime extends LitElement {
   /** The date from which to calculate time from. */
   @property() date: Date | string;
 
-  /** The locale to use when formatting the number. */
-  @property() lang: string;
-
   /** The formatting style to use. */
   @property() format: 'long' | 'short' | 'narrow' = 'long';
 
diff --git a/src/components/resize-observer/resize-observer.ts b/src/components/resize-observer/resize-observer.ts
index 2076456f..c8c83919 100644
--- a/src/components/resize-observer/resize-observer.ts
+++ b/src/components/resize-observer/resize-observer.ts
@@ -1,6 +1,7 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import styles from './resize-observer.styles';
 import type { CSSResultGroup } from 'lit';
@@ -14,7 +15,7 @@ import type { CSSResultGroup } from 'lit';
  * @event {{ entries: ResizeObserverEntry[] }} sl-resize - Emitted when the element is resized.
  */
 @customElement('sl-resize-observer')
-export default class SlResizeObserver extends LitElement {
+export default class SlResizeObserver extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   private resizeObserver: ResizeObserver;
diff --git a/src/components/responsive-media/responsive-media.ts b/src/components/responsive-media/responsive-media.ts
index 26b50092..7727b9a3 100644
--- a/src/components/responsive-media/responsive-media.ts
+++ b/src/components/responsive-media/responsive-media.ts
@@ -1,6 +1,7 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import styles from './responsive-media.styles';
 import type { CSSResultGroup } from 'lit';
 
@@ -11,7 +12,7 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The element to receive the aspect ratio. Should be a replaced element, such as `<img>`, `<iframe>`, or `<video>`.
  */
 @customElement('sl-responsive-media')
-export default class SlResponsiveMedia extends LitElement {
+export default class SlResponsiveMedia extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   /**
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 8d8a30b4..b7209f03 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -1,9 +1,10 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { defaultValue } from '../../internal/default-value';
 import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
@@ -61,7 +62,7 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
  * @csspart tags - The container in which multi select options are rendered.
  */
 @customElement('sl-select')
-export default class SlSelect extends LitElement {
+export default class SlSelect extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('.select') dropdown: SlDropdown;
diff --git a/src/components/skeleton/skeleton.ts b/src/components/skeleton/skeleton.ts
index a5f2c04f..ae824ee8 100644
--- a/src/components/skeleton/skeleton.ts
+++ b/src/components/skeleton/skeleton.ts
@@ -1,6 +1,7 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import styles from './skeleton.styles';
 import type { CSSResultGroup } from 'lit';
 
@@ -16,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --sheen-color - The sheen color when the skeleton is in its loading state.
  */
 @customElement('sl-skeleton')
-export default class SlSkeleton extends LitElement {
+export default class SlSkeleton extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   /** Determines which effect the skeleton will use. */
diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts
index a65936ce..e4db070c 100644
--- a/src/components/spinner/spinner.ts
+++ b/src/components/spinner/spinner.ts
@@ -1,5 +1,6 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './spinner.styles';
 import type { CSSResultGroup } from 'lit';
@@ -16,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
  */
 @customElement('sl-spinner')
-export default class SlSpinner extends LitElement {
+export default class SlSpinner extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   private readonly localize = new LocalizeController(this);
diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts
index 7183969f..5921aedb 100644
--- a/src/components/split-panel/split-panel.ts
+++ b/src/components/split-panel/split-panel.ts
@@ -1,9 +1,10 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { drag } from '../../internal/drag';
 import { emit } from '../../internal/event';
 import { clamp } from '../../internal/math';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './split-panel.styles';
@@ -31,7 +32,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.
  */
 @customElement('sl-split-panel')
-export default class SlSplitPanel extends LitElement {
+export default class SlSplitPanel extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   private cachedPositionInPixels: number;
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index 912f4e29..a5a812d9 100644
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -6,6 +6,7 @@ import { live } from 'lit/directives/live.js';
 import { defaultValue } from '../../internal/default-value';
 import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import styles from './switch.styles';
 import type { CSSResultGroup } from 'lit';
@@ -30,7 +31,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --thumb-size - The size of the thumb.
  */
 @customElement('sl-switch')
-export default class SlSwitch extends LitElement {
+export default class SlSwitch extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('input[type="checkbox"]') input: HTMLInputElement;
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index 729fef38..297bbf1a 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -1,8 +1,9 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { emit } from '../../internal/event';
 import { scrollIntoView } from '../../internal/scroll';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
 import '../icon-button/icon-button';
@@ -38,7 +39,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
  */
 @customElement('sl-tab-group')
-export default class SlTabGroup extends LitElement {
+export default class SlTabGroup extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
   private readonly localize = new LocalizeController(this);
 
@@ -67,9 +68,6 @@ export default class SlTabGroup extends LitElement {
   /** Disables the scroll arrows that appear when tabs overflow. */
   @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;
 
-  /** The locale to render the component in. */
-  @property() lang: string;
-
   connectedCallback() {
     super.connectedCallback();
 
diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts
index 3dcbe083..7158a221 100644
--- a/src/components/tab-panel/tab-panel.ts
+++ b/src/components/tab-panel/tab-panel.ts
@@ -1,7 +1,8 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { autoIncrement } from '../../internal/auto-increment';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import styles from './tab-panel.styles';
 import type { CSSResultGroup } from 'lit';
@@ -17,7 +18,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --padding - The tab panel's padding.
  */
 @customElement('sl-tab-panel')
-export default class SlTabPanel extends LitElement {
+export default class SlTabPanel extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   private readonly attrId = autoIncrement();
diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts
index 2c5a27f9..da1509d2 100644
--- a/src/components/tab/tab.ts
+++ b/src/components/tab/tab.ts
@@ -1,8 +1,9 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { autoIncrement } from '../../internal/auto-increment';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
 import '../icon-button/icon-button';
@@ -24,7 +25,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart close-button__base - The close button's `base` part.
  */
 @customElement('sl-tab')
-export default class SlTab extends LitElement {
+export default class SlTab extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
   private readonly localize = new LocalizeController(this);
 
@@ -45,9 +46,6 @@ export default class SlTab extends LitElement {
   /** Draws the tab in a disabled state. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  /** The locale to render the component in. */
-  @property() lang: string;
-
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'tab');
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index e27b0c03..03ca7a23 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -1,7 +1,8 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { LocalizeController } from '../../utilities/localize';
 import '../icon-button/icon-button';
 import styles from './tag.styles';
@@ -23,7 +24,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart remove-button__base - The remove button's `base` part.
  */
 @customElement('sl-tag')
-export default class SlTag extends LitElement {
+export default class SlTag extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
   private readonly localize = new LocalizeController(this);
 
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index efb9f626..7a46deed 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -6,6 +6,7 @@ import { live } from 'lit/directives/live.js';
 import { defaultValue } from '../../internal/default-value';
 import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
 import styles from './textarea.styles';
@@ -31,7 +32,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart textarea - The textarea control.
  */
 @customElement('sl-textarea')
-export default class SlTextarea extends LitElement {
+export default class SlTextarea extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('.textarea__control') input: HTMLTextAreaElement;
@@ -158,10 +159,9 @@ export default class SlTextarea extends LitElement {
     if (position) {
       if (typeof position.top === 'number') this.input.scrollTop = position.top;
       if (typeof position.left === 'number') this.input.scrollLeft = position.left;
-      return;
+      return undefined;
     }
 
-    // eslint-disable-next-line consistent-return
     return {
       top: this.input.scrollTop,
       left: this.input.scrollTop
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index 22d0667c..093a2cea 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -1,8 +1,9 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { animateTo, parseDuration, stopAnimations } from '../../internal/animate';
 import { emit, waitForEvent } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
 import { LocalizeController } from '../../utilities/localize';
@@ -38,7 +39,7 @@ import type { CSSResultGroup } from 'lit';
  * @animation tooltip.hide - The animation to use when hiding the tooltip.
  */
 @customElement('sl-tooltip')
-export default class SlTooltip extends LitElement {
+export default class SlTooltip extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts
index 6dc918dd..faf74a8f 100644
--- a/src/components/tree-item/tree-item.ts
+++ b/src/components/tree-item/tree-item.ts
@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { live } from 'lit/directives/live.js';
@@ -6,6 +6,7 @@ import { when } from 'lit/directives/when.js';
 import { animateTo, shimKeyframesHeightAuto, stopAnimations } from 'src/internal/animate';
 import { getAnimation, setDefaultAnimation } from 'src/utilities/animation-registry';
 import { emit } from '../../internal/event';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { watch } from '../../internal/watch';
 import { LocalizeController } from '../../utilities/localize';
 import '../checkbox/checkbox';
@@ -47,7 +48,7 @@ export function isTreeItem(element: Element) {
  * @csspart children - The item's children container.
  */
 @customElement('sl-tree-item')
-export default class SlTreeItem extends LitElement {
+export default class SlTreeItem extends ShoelaceElement {
   static styles = styles;
 
   private readonly localize = new LocalizeController(this);
diff --git a/src/components/tree/tree.ts b/src/components/tree/tree.ts
index dc3cc23c..03bdbca0 100644
--- a/src/components/tree/tree.ts
+++ b/src/components/tree/tree.ts
@@ -1,8 +1,9 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { emit } from 'src/internal/event';
 import { clamp } from 'src/internal/math';
 import { watch } from 'src/internal/watch';
+import ShoelaceElement from '../../internal/shoelace-element';
 import { LocalizeController } from '../../utilities/localize';
 import { isTreeItem } from '../tree-item/tree-item';
 import styles from './tree.styles';
@@ -54,7 +55,7 @@ function syncCheckboxes(changedTreeItem: SlTreeItem) {
  * @cssproperty [--indent-guide-width=0] - The width of the indentation line.
  */
 @customElement('sl-tree')
-export default class SlTree extends LitElement {
+export default class SlTree extends ShoelaceElement {
   static styles = styles;
 
   @query('slot') defaultSlot: HTMLSlotElement;
diff --git a/src/components/visually-hidden/visually-hidden.ts b/src/components/visually-hidden/visually-hidden.ts
index 768ef622..7cd3337f 100644
--- a/src/components/visually-hidden/visually-hidden.ts
+++ b/src/components/visually-hidden/visually-hidden.ts
@@ -1,5 +1,6 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import ShoelaceElement from '../../internal/shoelace-element';
 import styles from './visually-hidden.styles';
 import type { CSSResultGroup } from 'lit';
 
@@ -10,7 +11,7 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The content you'd like to be visually hidden.
  */
 @customElement('sl-visually-hidden')
-export default class SlVisuallyHidden extends LitElement {
+export default class SlVisuallyHidden extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
   render() {
diff --git a/src/internal/shoelace-element.ts b/src/internal/shoelace-element.ts
new file mode 100644
index 00000000..ed089388
--- /dev/null
+++ b/src/internal/shoelace-element.ts
@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export default class ShoelaceElement extends LitElement {
+  // Make localization attributes reactive
+  @property() dir: string;
+  @property() lang: string;
+}