flip color picker to keep it in the viewport (#1391)

packages/webawesome/docs/docs/resources/changelog.md

@@ -33,6 +33,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed spacing in `<wa-input>` when both clear and password toggle icons are present [issue:1325]
 - Fixed a bug in `<wa-radio-group>` and `<wa-radio>` where changing appearances dynamically would render incorrectly [issue:1178]
 - Fixed a bug in `<wa-input>` that prevented the value from changing when assigning non-string values to `value` [issue:1323]
+- Fixed a bug in `<wa-color-picker>` that prevent the picker from staying in the viewport
 
 ## 3.0.0-beta.4
 

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

@@ -1327,6 +1327,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         distance="0"
         skidding="0"
         sync="width"
+        flip
+        flip-fallback-strategy="best-fit"
+        shift
+        shift-padding="10"
         aria-disabled=${this.disabled ? 'true' : 'false'}
         @wa-after-show=${this.handleAfterShow}
         @wa-after-hide=${this.handleAfterHide}