From 996fa6df579210e8e9d73eb12e2e9d2a001aaafd Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 18 Dec 2024 23:13:43 -0500
Subject: [PATCH] Import appearance helpers in elements with newly acquired
 appearance attribute

---
 src/components/input/input.ts   | 3 ++-
 src/components/select/select.ts | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 66593dd22..7184111a8 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -14,6 +14,7 @@ import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import nativeStyles from '../../styles/native/input.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
+import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import type WaButton from '../button/button.js';
@@ -63,7 +64,7 @@ import styles from './input.css';
  */
 @customElement('wa-input')
 export default class WaInput extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [sizeStyles, formControlStyles, nativeStyles, styles];
+  static shadowStyle = [sizeStyles, appearanceStyles, formControlStyles, nativeStyles, styles];
 
   static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
 
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index d2c4cbedf..c5ca9ff7c 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -21,6 +21,7 @@ import { RequiredValidator } from '../../internal/validators/required-validator.
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
+import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
@@ -86,7 +87,7 @@ import styles from './select.css';
  */
 @customElement('wa-select')
 export default class WaSelect extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [formControlStyles, sizeStyles, styles];
+  static shadowStyle = [appearanceStyles, formControlStyles, sizeStyles, styles];
 
   static get validators() {
     const validators = isServer