Convert component shadow styles to CSS files too

src/components/checkbox/checkbox.ts

@@ -12,7 +12,7 @@ import { WaFocusEvent } from '../../events/focus.js';
 import { WaInputEvent } from '../../events/input.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
-import formControlStyles from '../../styles/form-control.styles.js';
+import formControlStyles from '../../styles/shadow/form-control.css';
 import styles from './checkbox.css';
 import type { PropertyValues } from 'lit';
 

src/components/color-picker/color-picker.ts

@@ -22,7 +22,7 @@ import { WaInputEvent } from '../../events/input.js';
 import { WaInvalidEvent } from '../../events/invalid.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
-import formControlStyles from '../../styles/form-control.styles.js';
+import formControlStyles from '../../styles/shadow/form-control.css';
 import styles from './color-picker.css';
 import type { PropertyValues } from 'lit';
 import type WaDropdown from '../dropdown/dropdown.js';

src/components/input/input.ts

@@ -14,7 +14,7 @@ import { WaFocusEvent } from '../../events/focus.js';
 import { WaInputEvent } from '../../events/input.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
-import formControlStyles from '../../styles/form-control.styles.js';
+import formControlStyles from '../../styles/shadow/form-control.css';
 import styles from './input.css';
 import type WaButton from '../button/button.js';
 

src/components/radio-group/radio-group.ts

@@ -10,7 +10,7 @@ import { WaChangeEvent } from '../../events/change.js';
 import { WaInputEvent } from '../../events/input.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
-import formControlStyles from '../../styles/form-control.styles.js';
+import formControlStyles from '../../styles/shadow/form-control.css';
 import styles from './radio-group.css';
 import type WaRadio from '../radio/radio.js';
 import type WaRadioButton from '../radio-button/radio-button.js';

src/components/range/range.ts

@@ -12,7 +12,7 @@ import { WaFocusEvent } from '../../events/focus.js';
 import { WaInputEvent } from '../../events/input.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
-import formControlStyles from '../../styles/form-control.styles.js';
+import formControlStyles from '../../styles/shadow/form-control.css';
 import styles from './range.css';
 
 /**

src/components/select/select.ts

@@ -22,7 +22,7 @@ import { waitForEvent } from '../../internal/event.js';
 import { WaShowEvent } from '../../events/show.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
-import formControlStyles from '../../styles/form-control.styles.js';
+import formControlStyles from '../../styles/shadow/form-control.css';
 import styles from './select.css';
 import type { TemplateResult } from 'lit';
 import type { WaRemoveEvent } from '../../events/remove.js';

src/components/switch/switch.ts

@@ -11,7 +11,7 @@ import { WaFocusEvent } from '../../events/focus.js';
 import { WaInputEvent } from '../../events/input.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
-import formControlStyles from '../../styles/form-control.styles.js';
+import formControlStyles from '../../styles/shadow/form-control.css';
 import styles from './switch.css';
 import type { PropertyValues } from 'lit';
 

src/components/textarea/textarea.ts

@@ -11,7 +11,7 @@ import { WaFocusEvent } from '../../events/focus.js';
 import { WaInputEvent } from '../../events/input.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
-import formControlStyles from '../../styles/form-control.styles.js';
+import formControlStyles from '../../styles/shadow/form-control.css';
 import styles from './textarea.css';
 
 /**

src/internal/webawesome-element.ts

@@ -2,7 +2,7 @@ import { CustomErrorValidator } from './validators/custom-error-validator.js';
 import { isServer, LitElement, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { WaInvalidEvent } from '../events/invalid.js';
-import componentStyles from '../styles/component.styles.js';
+import componentStyles from '../styles/shadow/component.css';
 import type { CSSResult, CSSResultGroup, PropertyValues } from 'lit';
 
 export default class WebAwesomeElement extends LitElement {
@@ -26,9 +26,11 @@ export default class WebAwesomeElement extends LitElement {
       : [];
 
     // Convert any string styles to Lit’s CSSResult
-    const shadowStyles = shadowStyle.map(style => (typeof style === 'string' ? unsafeCSS(style) : style));
+    const shadowStyles = [componentStyles, ...shadowStyle].map(style =>
+      typeof style === 'string' ? unsafeCSS(style) : style
+    );
 
-    return [componentStyles, ...shadowStyles];
+    return shadowStyles;
   }
 
   @property({ type: Boolean, reflect: true, attribute: 'did-ssr' }) didSSR = isServer || Boolean(this.shadowRoot);

src/styles/component.styles.ts

@@ -1,17 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    box-sizing: border-box !important;
-  }
-
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit !important;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-`;

src/styles/form-control.styles.ts

@@ -1,61 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .form-control .form-control__label {
-    display: none;
-  }
-
-  .form-control .form-control__help-text {
-    display: none;
-  }
-
-  /* Label */
-  .form-control--has-label .form-control__label {
-    display: inline-block;
-    color: var(--wa-form-control-label-color);
-    font-weight: var(--wa-form-control-label-font-weight);
-    line-height: var(--wa-form-control-label-line-height);
-    margin-bottom: var(--wa-space-3xs);
-  }
-
-  .form-control--has-label.form-control--small .form-control__label {
-    font-size: var(--wa-font-size-s);
-  }
-
-  .form-control--has-label.form-control--medium .form-control__label {
-    font-size: var(--wa-font-size-m);
-  }
-
-  .form-control--has-label.form-control--large .form-control__label {
-    font-size: var(--wa-font-size-l);
-  }
-
-  :host([required]) .form-control--has-label .form-control__label::after {
-    content: var(--wa-form-control-required-content);
-    margin-inline-start: var(--wa-form-control-required-content-offset);
-    color: var(--wa-form-control-required-content-color);
-  }
-
-  /* Help text */
-  .form-control--has-help-text .form-control__help-text {
-    display: block;
-    color: var(--wa-color-text-quiet);
-    margin-top: var(--wa-space-3xs);
-  }
-
-  .form-control--has-help-text.form-control--small .form-control__help-text {
-    font-size: var(--wa-font-size-xs);
-  }
-
-  .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: var(--wa-font-size-s);
-  }
-
-  .form-control--has-help-text.form-control--large .form-control__help-text {
-    font-size: var(--wa-font-size-m);
-  }
-
-  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
-    margin-top: var(--wa-space-2xs);
-  }
-`;

src/styles/shadow/component.css

@@ -0,0 +1,13 @@
+:host {
+  box-sizing: border-box !important;
+}
+
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: inherit !important;
+}
+
+[hidden] {
+  display: none !important;
+}

src/styles/shadow/form-control.css

@@ -0,0 +1,57 @@
+.form-control .form-control__label {
+  display: none;
+}
+
+.form-control .form-control__help-text {
+  display: none;
+}
+
+/* Label */
+.form-control--has-label .form-control__label {
+  display: inline-block;
+  color: var(--wa-form-control-label-color);
+  font-weight: var(--wa-form-control-label-font-weight);
+  line-height: var(--wa-form-control-label-line-height);
+  margin-bottom: var(--wa-space-3xs);
+}
+
+.form-control--has-label.form-control--small .form-control__label {
+  font-size: var(--wa-font-size-s);
+}
+
+.form-control--has-label.form-control--medium .form-control__label {
+  font-size: var(--wa-font-size-m);
+}
+
+.form-control--has-label.form-control--large .form-control__label {
+  font-size: var(--wa-font-size-l);
+}
+
+:host([required]) .form-control--has-label .form-control__label::after {
+  content: var(--wa-form-control-required-content);
+  margin-inline-start: var(--wa-form-control-required-content-offset);
+  color: var(--wa-form-control-required-content-color);
+}
+
+/* Help text */
+.form-control--has-help-text .form-control__help-text {
+  display: block;
+  color: var(--wa-color-text-quiet);
+  margin-top: var(--wa-space-3xs);
+}
+
+.form-control--has-help-text.form-control--small .form-control__help-text {
+  font-size: var(--wa-font-size-xs);
+}
+
+.form-control--has-help-text.form-control--medium .form-control__help-text {
+  font-size: var(--wa-font-size-s);
+}
+
+.form-control--has-help-text.form-control--large .form-control__help-text {
+  font-size: var(--wa-font-size-m);
+}
+
+.form-control--has-help-text.form-control--radio-group .form-control__help-text {
+  margin-top: var(--wa-space-2xs);
+}