feat: ✨ add transition custom property to uui-button

package.json

@@ -102,7 +102,7 @@
     "npm-check-updates": "16.10.16",
     "plop": "3.1.2",
     "postcss": "8.4.36",
-    "postcss-advanced-variables": "4.0.0",
+    "postcss-advanced-variables": "3.0.1",
     "postcss-cli": "11.0.0",
     "postcss-color-function": "4.1.0",
     "postcss-custom-properties": "13.3.4",

packages/uui-button/lib/uui-button.element.ts

@@ -47,6 +47,7 @@ export type UUIButtonType = 'submit' | 'button' | 'reset';
  *  @cssprop --uui-button-contrast-hover - overwrite the text color for hover state
  *  @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state
  *  @cssprop --uui-button-content-align - Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'.
+ *  @cssprop --uui-button-transition - Add transition to the button. Default is none.
  */
 @defineElement('uui-button')
 export class UUIButtonElement extends UUIFormControlMixin(
@@ -338,6 +339,11 @@ export class UUIButtonElement extends UUIFormControlMixin(
 
         transition: var(--uui-button-transition, none);
       }
+
+      #button:focus-visible {
+        outline: 2px solid var(--color-emphasis);
+      }
+
       button[disabled]:active,
       a:not([href]):active {
         animation: ${UUIHorizontalShakeAnimationValue};
@@ -436,13 +442,6 @@ export class UUIButtonElement extends UUIFormControlMixin(
         font-weight: var(--uui-button-font-weight, 700);
       }
 
-      #button:focus-visible {
-        outline: 2px solid var(--color-emphasis);
-      }
-
-      :host([look='primary']) #button:focus-visible {
-        outline-offset: 2px;
-      }
       :host([look='primary']:hover) #button {
         background-color: var(
           --uui-button-background-color-hover,
@@ -451,6 +450,12 @@ export class UUIButtonElement extends UUIFormControlMixin(
         color: var(--uui-button-contrast-hover, var(--color-contrast));
         border-color: var(--uui-button-border-color-hover, transparent);
       }
+
+      /* special outline offset tof primary style so you can see the outline */
+      :host([look='primary']) #button:focus-visible {
+        outline-offset: 2px;
+      }
+
       :host([look='primary'][disabled]) #button {
         background-color: var(
           --uui-button-background-color-disabled,