Description
Describe the bug
When I add radio buttons as a child to Paper
with color="secondary"
the active radio button is not visible.
To Reproduce
Steps to reproduce the behavior:
- Install deps
npm i -D @smui/paper @smui/form-field @smui/radio
- Drop code below into a
+page.svelte
document. - View the document.
- Observe the active radio is not visible.
<script>
import Paper from '@smui/paper';
import FormField from '@smui/form-field';
import Radio from '@smui/radio';
let selected = 'total price';
</script>
<Paper color="secondary" variant="unelevated" class="content-wrapper">
{#each ['total price', 'per credit price'] as options}
<FormField>
<Radio bind:group={selected} value={options} />
<span slot="label">{`${options[0].toUpperCase()}${options.slice(1)}`}</span>
</FormField>
{/each}
</Paper>
Expected behavior
Active radio should be visible on Paper using secondary color.
Screenshots
https://github.com/hperrin/svelte-material-ui/assets/97140109/a24ad19a-9495-4c26-9ea3-fd59daa88b1f
Desktop (please complete the following information):
- OS: [e.g. iOS] macos
- Browser [e.g. chrome, safari] Chromium
- Version [e.g. 22] Version 117.0.5938.92 (Official Build) (arm64)
Additional context
Bug created from newly scaffolded Svelte project using the SMUI v7 beta 15 release. On a related note the documentation website uses a Card
to display radio examples. It's not possible to reproduce this issue using a Card
because, although Card
accepts a color
attribute the attribute when set to color="secondary"
does not change the color of the card.