Alignment of button content

[trueqbit]

Checklist

• [X] I could not find a solution in the existing issues or docs.
• [X] I agree to follow this project's Code of Conduct.

Description

I am using hanko-elements for login functionality in a web application. The CSS for the wrapper of a button icon explicitly sets width and flex alignment:

.hanko_loadingSpinnerWrapperIcon {
  justify-content: center;
  width: 100%;
  column-gap: 10px;
  margin-left: 10px;
}

This makes it currently impossible to align the button content (icon and text) using the shadow DOM.

Describe your ideal solution

The ideal would probably be a CSS variable or respect alignment of the parent ::part(button).

Workarounds or alternatives

No response

Hanko Version

v0.9.0

Additional Context

The background is that I want to center-align the content of the button in the same way as usual in our application, also I find it a bit inconsistent with the alignment of the "Continue" button when all form elements are stacked.

A few screenshots show what it currently looks like: Login challenge form: Create Passkey form:

[dhananjay-Byte]

hey @trueqbit i would like to work on this can you please assign me this?

[trueqbit]

hey @trueqbit i would like to work on this can you please assign me this?

@dhananjay-Byte As I am not a contributor, I cannot change the metadata of a ticket...

[trueqbit]

hey @trueqbit i would like to work on this can you please assign me this?

@dhananjay-Byte As I am not a contributor, I cannot change the metadata of a ticket...

@dhananjay-Byte Is there any progress here?