add mt-field-label component

packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import MtFieldLabel from "./mt-field-label.vue";
+import { fn } from "@storybook/test";
+
+export default {
+  title: "Components/Form/mt-field-label",
+  component: MtFieldLabel,
+  args: {
+    default: "Field Label",
+    id: "some-id",
+    "onUpdate:inheritance": fn(),
+  },
+  argTypes: {
+    inheritance: {
+      control: {
+        type: "select",
+      },
+      options: ["none", "linked", "unlinked"],
+    },
+  },
+} satisfies Meta<typeof MtFieldLabel>;
+
+type MtFieldLabelStory = StoryObj<typeof MtFieldLabel>;
+
+export const Default: MtFieldLabelStory = {};

packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.vue

@@ -0,0 +1,86 @@
+<template>
+  <label :for="props.id" :class="classes">
+    <button
+      v-if="inheritance !== 'none'"
+      class="mt-field-label__inheritance-switch"
+      :aria-label="inheritance === 'linked' ? 'Unlink inheritance' : 'Link inheritance'"
+      @click="$emit('update:inheritance', inheritance === 'linked' ? 'unlinked' : 'linked')"
+    >
+      <mt-icon
+        size="1rem"
+        aria-hidden="true"
+        :name="
+          inheritance === 'linked' ? 'regular-link-horizontal' : 'regular-link-horizontal-slash'
+        "
+      />
+    </button>
+
+    <slot />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import MtIcon from "@/components/icons-media/mt-icon/mt-icon.vue";
+
+defineEmits<{
+  (e: "update:inheritance", value: "linked" | "unlinked"): void;
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    hasError?: boolean;
+    required?: boolean;
+    inheritance?: "linked" | "unlinked" | "none";
+  }>(),
+  {
+    hasError: false,
+    required: false,
+    inheritance: "none",
+  },
+);
+
+const classes = computed(() => ({
+  "mt-field-label": true,
+  "mt-field-label--with-error": props.hasError,
+  "mt-field-label--is-required": props.required,
+  "mt-field-label--has-linked-inheritance": props.inheritance === "linked",
+}));
+</script>
+
+<style scoped>
+.mt-field-label {
+  display: flex;
+  column-gap: 0.25rem;
+  align-items: center;
+  color: var(--color-text-primary-default);
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xs);
+}
+
+.mt-field-label--is-required::after {
+  content: "*";
+  color: var(--color-text-brand-default);
+}
+
+.mt-field-label--has-linked-inheritance {
+  color: var(--color-text-accent-default);
+}
+
+.mt-field-label--with-error {
+  color: var(--color-text-critical-default);
+}
+
+.mt-field-label__inheritance-switch {
+  margin-right: 0.25rem;
+
+  &:focus-visible {
+    outline-offset: 0.25rem;
+    border-radius: var(--border-radius-2xs);
+    outline-color: var(--color-border-brand-selected);
+  }
+}
+</style>