2021-05-04 07:29:15 +02:00
|
|
|
<script>
|
2021-05-06 16:33:16 +02:00
|
|
|
import "@spectrum-css/fieldlabel/dist/index-vars.css"
|
2022-01-19 19:33:58 +01:00
|
|
|
import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
|
2021-05-06 16:33:16 +02:00
|
|
|
|
|
|
|
export let size = "M"
|
2021-11-12 14:31:55 +01:00
|
|
|
export let tooltip = ""
|
2022-09-12 20:12:05 +02:00
|
|
|
export let muted
|
2021-05-04 07:29:15 +02:00
|
|
|
</script>
|
|
|
|
|
2022-01-19 19:33:58 +01:00
|
|
|
<TooltipWrapper {tooltip} {size}>
|
2022-09-12 20:12:05 +02:00
|
|
|
<label
|
2023-04-18 15:37:29 +02:00
|
|
|
data-testid="label"
|
2022-09-12 20:12:05 +02:00
|
|
|
class:muted
|
|
|
|
for=""
|
|
|
|
class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}
|
|
|
|
>
|
2021-11-12 14:31:55 +01:00
|
|
|
<slot />
|
|
|
|
</label>
|
2022-01-19 19:33:58 +01:00
|
|
|
</TooltipWrapper>
|
2021-05-04 07:29:15 +02:00
|
|
|
|
|
|
|
<style>
|
2021-05-06 16:33:16 +02:00
|
|
|
label {
|
|
|
|
padding: 0;
|
|
|
|
white-space: nowrap;
|
2023-02-23 14:55:18 +01:00
|
|
|
color: var(--spectrum-global-color-gray-700);
|
2021-05-04 07:29:15 +02:00
|
|
|
}
|
2022-09-12 20:12:05 +02:00
|
|
|
|
|
|
|
.muted {
|
|
|
|
opacity: 0.5;
|
|
|
|
}
|
2021-05-04 07:29:15 +02:00
|
|
|
</style>
|