fix: define active state styles after focus state (#219)

* define active state after focus state

* Change files

* ensure hover styles override focus styles

---------

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>

Author: nicholasrice

change/@adaptive-web-adaptive-ui-3677b8f0-153b-48e9-b402-d50350e968f2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Define order of interactivity states as focus - hover - active",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/adaptive-ui/src/core/modules/element-styles-renderer.ts

@@ -94,6 +94,12 @@ export class ElementStylesRenderer {
             }
 
             if (params.interactive !== undefined) {
+                if (values.focus) {
+                    selectors.set(
+                        makeSelector(params, InteractiveState.focus),
+                        ElementStylesRenderer.declaration(property, values.focus, InteractiveState.focus)
+                    );
+                }
                 if (values.hover) {
                     selectors.set(
                         makeSelector(params, InteractiveState.hover),
@@ -106,12 +112,6 @@ export class ElementStylesRenderer {
                         ElementStylesRenderer.declaration(property, values.active, InteractiveState.active)
                     );
                 }
-                if (values.focus) {
-                    selectors.set(
-                        makeSelector(params, InteractiveState.focus),
-                        ElementStylesRenderer.declaration(property, values.focus, InteractiveState.focus)
-                    );
-                }
             }
 
             if (params.disabled !== undefined && values.disabled) {