Add suffix widget non-rounding; add disabled state to many widgets

frontend/src/components/widgets/inputs/ColorInput.vue

@@ -1,6 +1,12 @@
 <template>
-	<LayoutRow class="color-input" :title="tooltip">
-		<button :class="{ none: value.none }" :style="{ '--chosen-color': value.toHexOptionalAlpha() }" @click="() => $emit('update:open', true)" tabindex="0" data-floating-menu-spawner>
+	<LayoutRow class="color-input" :class="{ 'sharp-right-corners': sharpRightCorners }" :title="tooltip">
+		<button
+			:class="{ none: value.none, 'sharp-right-corners': sharpRightCorners }"
+			:style="{ '--chosen-color': value.toHexOptionalAlpha() }"
+			@click="() => $emit('update:open', true)"
+			tabindex="0"
+			data-floating-menu-spawner
+		>
 			<TextLabel :bold="true" class="chip" v-if="chip">{{ chip }}</TextLabel>
 		</button>
 		<ColorPicker v-model:open="isOpen" :color="value" @update:color="(color: Color) => colorPickerUpdated(color)" :allowNone="true" />
@@ -86,8 +92,9 @@ export default defineComponent({
 	props: {
 		value: { type: Color as PropType<Color>, required: true },
 		noTransparency: { type: Boolean as PropType<boolean>, default: false }, // TODO: Rename to allowTransparency, also implement allowNone
-		disabled: { type: Boolean as PropType<boolean>, default: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false }, // TODO: Design and implement
 		tooltip: { type: String as PropType<string | undefined>, required: false },
+		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
 
 		// Bound through `v-model`
 		// TODO: See if this should be made to follow the pattern of DropdownInput.vue so this could be removed

frontend/src/components/widgets/inputs/DropdownInput.vue

@@ -2,7 +2,7 @@
 	<LayoutRow class="dropdown-input" data-dropdown-input>
 		<LayoutRow
 			class="dropdown-box"
-			:class="{ disabled, open }"
+			:class="{ disabled, open, 'sharp-right-corners': sharpRightCorners }"
 			:style="{ minWidth: `${minWidth}px` }"
 			:title="tooltip"
 			@click="() => !disabled && (open = true)"
@@ -116,6 +116,7 @@ export default defineComponent({
 		interactive: { type: Boolean as PropType<boolean>, default: true },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
 		tooltip: { type: String as PropType<string | undefined>, required: false },
+		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
 		return {

frontend/src/components/widgets/inputs/FieldInput.vue

@@ -1,6 +1,6 @@
 <!-- This is a base component, extended by others like NumberInput and TextInput. It should not be used directly. -->
 <template>
-	<LayoutRow class="field-input" :class="{ disabled }" :title="tooltip">
+	<LayoutRow class="field-input" :class="{ disabled, 'sharp-right-corners': sharpRightCorners }" :title="tooltip">
 		<input
 			v-if="!textarea"
 			:class="{ 'has-label': label }"
@@ -136,6 +136,7 @@ export default defineComponent({
 		disabled: { type: Boolean as PropType<boolean>, default: false },
 		textarea: { type: Boolean as PropType<boolean>, default: false },
 		tooltip: { type: String as PropType<string | undefined>, required: false },
+		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
 		return {

frontend/src/components/widgets/inputs/FontInput.vue

@@ -1,8 +1,10 @@
+<!-- TODO: Combine this widget into the DropdownInput widget -->
+
 <template>
 	<LayoutRow class="font-input">
 		<LayoutRow
 			class="dropdown-box"
-			:class="{ disabled }"
+			:class="{ disabled, 'sharp-right-corners': sharpRightCorners }"
 			:style="{ minWidth: `${minWidth}px` }"
 			:title="tooltip"
 			:tabindex="disabled ? -1 : 0"
@@ -95,6 +97,7 @@ export default defineComponent({
 		isStyle: { type: Boolean as PropType<boolean>, default: false },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
 		tooltip: { type: String as PropType<string | undefined>, required: false },
+		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
 		return {

frontend/src/components/widgets/inputs/NumberInput.vue

@@ -7,6 +7,7 @@
 		:disabled="disabled"
 		:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
 		:tooltip="tooltip"
+		:sharpRightCorners="sharpRightCorners"
 		@textFocused="() => onTextFocused()"
 		@textChanged="() => onTextChanged()"
 		@cancelTextChange="() => onCancelTextChange()"
@@ -110,6 +111,7 @@ export default defineComponent({
 		disabled: { type: Boolean as PropType<boolean>, default: false },
 		minWidth: { type: Number as PropType<number>, default: 0 },
 		tooltip: { type: String as PropType<string | undefined>, required: false },
+		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
 
 		// Callbacks
 		incrementCallbackIncrease: { type: Function as PropType<() => void>, required: false },

frontend/src/components/widgets/inputs/RadioInput.vue

@@ -1,12 +1,13 @@
 <template>
-	<LayoutRow class="radio-input">
+	<LayoutRow class="radio-input" :class="{ disabled }">
 		<button
-			:class="{ active: index === selectedIndex }"
+			:class="{ active: index === selectedIndex, disabled, 'sharp-right-corners': index === entries.length - 1 && sharpRightCorners }"
 			v-for="(entry, index) in entries"
 			:key="index"
 			@click="() => handleEntryClick(entry)"
 			:title="entry.tooltip"
 			:tabindex="index === selectedIndex ? -1 : 0"
+			:disabled="disabled"
 		>
 			<IconLabel v-if="entry.icon" :icon="entry.icon" />
 			<TextLabel v-if="entry.label">{{ entry.label }}</TextLabel>
@@ -43,6 +44,24 @@
 			}
 		}
 
+		&.disabled {
+			background: var(--color-4-dimgray);
+			color: var(--color-8-uppergray);
+
+			svg {
+				fill: var(--color-8-uppergray);
+			}
+
+			&.active {
+				background: var(--color-8-uppergray);
+				color: var(--color-2-mildblack);
+
+				svg {
+					fill: var(--color-2-mildblack);
+				}
+			}
+		}
+
 		& + button {
 			margin-left: 1px;
 		}
@@ -80,7 +99,9 @@ export default defineComponent({
 	emits: ["update:selectedIndex"],
 	props: {
 		entries: { type: Array as PropType<RadioEntries>, required: true },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
 		selectedIndex: { type: Number as PropType<number>, required: true },
+		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
 	},
 	methods: {
 		handleEntryClick(radioEntryData: RadioEntryData) {

frontend/src/components/widgets/inputs/TextInput.vue

@@ -8,6 +8,7 @@
 		:disabled="disabled"
 		:tooltip="tooltip"
 		:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
+		:sharpRightCorners="sharpRightCorners"
 		@textFocused="() => onTextFocused()"
 		@textChanged="() => onTextChanged()"
 		@cancelTextChange="() => onCancelTextChange()"
@@ -43,6 +44,7 @@ export default defineComponent({
 		centered: { type: Boolean as PropType<boolean>, default: false },
 		minWidth: { type: Number as PropType<number>, default: 0 },
 		tooltip: { type: String as PropType<string | undefined>, required: false },
+		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
 		return {