element updates

packages/webawesome/scripts/build.js

@@ -218,8 +218,9 @@ export async function build(options = {}) {
       outdir: getCdnDir(),
       chunkNames: 'chunks/[name].[hash]',
       define: {
-        'process.env.NODE_ENV': '"production"', // required by Floating UI
+        'process.env.NODE_ENV': '"development"', // required by Floating UI
       },
+      conditions: ['development'],
       bundle: true,
       splitting: true,
       minify: false,

packages/webawesome/src/components/select/select.ts

@@ -773,12 +773,12 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     });
   }
 
-  updated(changedProperties: PropertyValues<this>) {
-    super.updated(changedProperties);
-
+  willUpdate(changedProperties: PropertyValues<this>) {
     if (changedProperties.has('value')) {
       this.customStates.set('blank', !this.value);
     }
+
+    super.willUpdate(changedProperties);
   }
 
   @watch('disabled', { waitUntilFirstUpdate: true })

packages/webawesome/src/internal/webawesome-form-associated-element.ts

@@ -125,6 +125,10 @@ export class WebAwesomeFormAssociatedElement
     super.connectedCallback();
     this.updateValidity();
 
+    setTimeout(() => {
+      this.updateValidity();
+    })
+
     // Lazily evaluate after the constructor to allow people to override the `assumeInteractionOn`
     this.assumeInteractionOn.forEach(event => {
       this.addEventListener(event, this.handleInteraction);
@@ -179,8 +183,8 @@ export class WebAwesomeFormAssociatedElement
       }
     }
 
-    this.updateValidity();
     super.willUpdate(changedProperties);
+    this.updateValidity();
   }
 
   private handleInteraction = (event: Event) => {
@@ -245,8 +249,9 @@ export class WebAwesomeFormAssociatedElement
       anchor = this.validationTarget;
     }
 
+    const validity = this.internals.validity
     this.internals.setValidity(flags, message, anchor || undefined);
-    this.requestUpdate('validity');
+    this.requestUpdate('validity', validity);
     this.setCustomStates();
   }
 

packages/webawesome/web-test-runner.config.js

@@ -27,7 +27,8 @@ export default {
   files: 'src/**/*.test.ts', // "default" group
   concurrentBrowsers: 3,
   nodeResolve: {
-    exportConditions: ['production', 'default'],
+    // exportConditions: ['production', 'default'],
+    exportConditions: ['development', 'default'],
   },
   testFramework: {
     config: {
@@ -85,7 +86,7 @@ export default {
         <link rel="stylesheet" href="/dist/styles/themes/default.css">
 
         <script>
-          window.process = {env: { NODE_ENV: "production" }}
+          window.process = {env: { NODE_ENV: "development" }}
         </script>
         <script>
           window.serverComponents = [
@@ -111,6 +112,15 @@ export default {
   `,
   // Create a named group for every test file to enable running single tests. If a test file is `split-panel.test.ts`
   // then you can run `npm run test -- --group split-panel` to run only that component's tests.
+  filterBrowserLogs: ({ type, args }) => {
+    const filteredStrings = [
+      "Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information."
+    ]
+
+    const string = args.join("")
+
+    return !filteredStrings.includes(string)
+  },
   groups: globbySync('src/**/*.test.ts').map(path => {
     const groupName = path.match(/^.*\/(?<fileName>.*)\.test\.ts/).groups.fileName;
     return {