make dir/lang reactive everywhere

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
 

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';
 

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;

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;

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;

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;

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. */

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');

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;

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;

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;

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');

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;

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();
 

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;

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;

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. */

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"

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;

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 '';

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';
 

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';
 

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;

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 = '';

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;

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;
 
   /**

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;

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;

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() {

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;

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;

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. */

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

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);
 

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;

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;

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, {

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;

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;

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;

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';
 

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;

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;
 
   /**

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;

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. */

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);

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;

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;

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();
 

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();

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');

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);
 

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

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;

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);

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;

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() {

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;
+}