feat: reflect properties to attributes

[geoffrich]

Alaska Airlines Pull Request

This improves compatibility with Svelte and Preact by reflecting properties to attributes.

Summary:

Svelte and Preact favor setting properties instead of attributes for custom elements. Since this component relies on the presence of those attributes on the host element to set styles, the element did not display properly in those frameworks.

In the future, we should reflect properties that we want to use for styling to prevent these issues.

I also renamed the internal sm and md properties. This was causing a similar issue -- the frameworks thought these were equivalent to the sm and md attributes we were setting.

Type of change:

Please delete options that are not relevant.

• [x] New capability

Checklist:

• [x] My update follows the CONTRIBUTING guidelines of this project
• [x] I have performed a self-review of my own update

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!
-- Auro Design System Team

[geoffrich]

The following now works in my Svelte project:

<auro-loader ringworm="true" md="true"></auro-loader>
<auro-loader ringworm="true"></auro-loader>

[AuroDesignSystem]

:tada: This PR is included in version 1.0.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: