✨ feature: Added Label component

src/components/label/VLabel.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type IVLabel from './IVLabel.type';
+import styles from '@visua/typography.module.css';
+import VHint from '../hint/VHint.vue';
+
+const props = withDefaults(defineProps<IVLabel>(), {
+  type: 'default',
+  disabled: false,
+  required: false,
+  hint: undefined,
+});
+</script>
+
+<template>
+  <label
+    :for="props.for"
+    :class="[styles['text-body-MD-standard-text-Regular'], {
+      'label': props.type === 'default',
+      'success': props.type === 'success',
+      'error': props.type === 'error',
+      'disabled': props.disabled,
+    }]"
+    :aria-label="props.label"
+    :aria-disabled="props.disabled"
+    :aria-required="props.required"
+  >
+    {{ props.label }}
+    <slot name="required-type">
+      <span
+        v-if="'required' in $attrs && $attrs.required !== false"
+        :class="{ 'required': props.required }"
+      >*</span>
+    </slot>
+    <VHint
+      v-if="props.hint"
+      :title="props.hint"
+      :disabled="props.disabled"
+    />
+  </label>
+</template>
+
+<style lang="css" scoped>
+.label {color: var(--text-label-grey);}
+.success {color: var(--text-default-success);}
+.error {color: var(--text-default-error);}
+.disabled {color: var(--text-disabled-grey);}
+.required {color: var(--minor-red-marianne);}
+</style>