"decrement-arrow" has wrong rotation

[slaubenberger]

Hi

First of all, thank you very much for providing such a nice widget library!

Now the small issue: the "decrement-arrow" has an the wrong rotation in the following css-files:
adwaita.css
adwaita-dark.css
cupertino.css

I fixed it by simply removing the unnecessary "rotate"-command in the css.
It would be nice if you could include this fix in your main branch and upcoming releases.

Regards,
Stefan

[jarek-foksa]

In case of adwaita.css and adwaita-dark.css the transform is redundant since the arrow icon is the "-" (minus) sign. But I'm not sure what's wrong with cupertino.css, the transform (180deg rotation) seems correct.

[slaubenberger]

Hmm, the strange thing is, I'm not geting +/- as signs. My signs are ^/v (up and down). On your website, I also see the +/- signs...
No idea why this is happening. I just used the latest version today - the change log is 0.25.11 (2024-04-01).

[jarek-foksa]

Are you sure you are loading the themes correctly? My guess is that you have both Adwaita and Cupertino themes loaded simultaneously or you placed the widget inside a shadow root without adoptedStyleSheets.

[slaubenberger]

I'm pretty sure I use Xel the correct way, the only references are in my index.html with the following usages:
xel.js
adwaita.css

I'm using it in an Electron app with the following packages on a M2 Mac:
├── @electron-forge/[email protected]
├── @electron-forge/[email protected]
├── @electron-forge/[email protected]
├── @electron-forge/[email protected]
├── @electron-forge/[email protected]
├── @electron-forge/[email protected]
├── @electron-forge/[email protected]
├── @electron/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[jarek-foksa]

I still can't reproduce this issue. Could you please attach your index.html file? Also, what is your web browser name and version?

[slaubenberger]

Here you go:

index.html.zip

The result looks like this (after the rotation fix):

The following libraries are used:

• Chromium 124.0.6367.60
• Node.js 20.11.1
• Electron 30.0.1

[jarek-foksa]

The HTML file looks fine, I guess it is a problem with the tooling that you use to generate the Electron app bundle.