Do not reflect variant, fixes #454

Also a docs fix on callout (used it to make my testing easier)

docs/docs/components/callout.md

@@ -19,43 +19,40 @@ icon: callout
 Set the `variant` attribute to change the callout's variant.
 
 ```html {.example}
-<wa-callout variant="brand">
+{% for variant, info in {
-  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+  brand: {
-  <strong>This is super informative</strong><br />
+    title: 'This is super informative',
-  You can tell by how pretty the callout is.
+    content: 'You can tell by how pretty the callout is.',
-</wa-callout>
+    icon: 'circle-info'
-
+  },
-<br />
+  success: {
-
+    title: 'Your changes have been saved',
-<wa-callout variant="success">
+    content: 'You can safely exit the app now.',
-  <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
+    icon: 'circle-check'
-  <strong>Your changes have been saved</strong><br />
+  },
-  You can safely exit the app now.
+  neutral: {
-</wa-callout>
+    title: 'Your settings have been updated',
-
+    content: 'Settings will take effect on next login.',
-<br />
+    icon: 'gear'
-
+  },
-<wa-callout variant="neutral">
+  warning: {
-  <wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
+    title: 'Your session has ended',
-  <strong>Your settings have been updated</strong><br />
+    content: 'Please login again to continue.',
-  Settings will take effect on next login.
+    icon: 'triangle-exclamation'
-</wa-callout>
+  },
-
+  danger: {
-<br />
+    title: 'Your account has been deleted',
-
+    content: 'We’re very sorry to see you go!',
-<wa-callout variant="warning">
+    icon: 'circle-exclamation'
-  <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
+  }
-  <strong>Your session has ended</strong><br />
+} %}
-  Please login again to continue.
+  <wa-callout variant="{{ variant }}">
-</wa-callout>
+    <wa-icon slot="icon" name="{{ info.icon }}" variant="regular"></wa-icon>
-
+    <strong>{{ info.title }}</strong><br />
-<br />
+    {{ info.content }}
-
+  </wa-callout>
-<wa-callout variant="danger">
+  {% if not loop.last %}<br />{% endif %}
-  <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
+{% endfor %}
-  <strong>Your account has been deleted</strong><br />
-  We're very sorry to see you go!
-</wa-callout>
 ```
 
 ### Appearance

src/components/button/button.ts

@@ -69,7 +69,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   @property() title = ''; // make reactive to pass through
 
   /** The button's theme variant. */
-  @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
+  @property() variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
 
   /** The button's visual appearance. */
   @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';